@font-face {
    font-family: 'font1';
    src: url('../font/Sour_Gummy/SourGummy-VariableFont_wdth\,wght.ttf') format('truetype');
}


html head body {
    width: 100%;
    height: 100px;
    position: relative;
}

/* HEADER */
header {
    column-count: 2;
    width: 75%; 
    padding-left: 15%; 
    padding-right: 10%; 
    background-attachment: fixed;
    
}

header img {
    width: 10vw;
}

header h1 {
  padding-top: 2.5vw;
  float: center ;
  text-align: center;
  font-size: 5vw;
  color: #FFC6C6;
  
}
header p {
  text-align: center;
  font-size: 2vw;

}

/* NAVBAR */
nav {
    position: sticky;
    font-size: 2vw;
    border:1px #d3d3d3;
    overflow: hidden; 
    background-color: #FFC6C6; 
}

nav ul {
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    
}

nav ul li {
    
    float: left;
}

nav ul li a {
   
    display: block;
    color: white;
    text-shadow: 2px #c1a5c4;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


nav ul a:hover{
    background-color: #F2BED1;

}

section {
  background-color: #eeeeefd4; 
  list-style-type: none ; 
  padding-left: 15%;  
  padding-right: 10%;  
  text-align: left; 
  font-weight: bold; 
  font-size: 43px; 
  overflow: hidden; 
  padding: 3%; 
  height: 5%;
}

footer {
  
    background-color: lightgoldenrodyellow;
    column-count: 2;
    column-gap: 40%;
    column-rule: 1px solid lightblue;
    display: block;
    font-size: 2vw;
    background-color: #eeeeefd4;
    padding: 5rem;
    text-align: center;

}

footer img {
    
    align-items: center;
    justify-content: center;
    position: center;
    text-align: center ;
    position: relative;
    float: left; 
    width: 27vw;
    
}

footer p {
    float: left;
    text-align: center ;
}

footer a img {
    float: right;
    width:  50px;
   
}


@media only screen and (max-width:800px) {
  /* For tablets: */
  body {
    width: 80%;
    padding: 0;
    
    
    
  }
  main {
      height: fit-content;
  }
  

  header {
     
      font-optical-sizing: auto;
      font-weight: weight;
      font-style: normal;
      float: left;
  }

  section {
      size-adjust: 50px;
      
    }

  section ul a {
      flex-direction: row;
      width: 300;
      float: center;
  }

}
@media only screen and (max-width:300px) {
  /* For mobile phones: */
  body {
    width: 100%;
    font-family: 'font1';
    
  }
  .mobile-container {
      max-width: 480px;
      margin: auto;
      background-color: #555;
      height: 500px;
      color: white;
      border-radius: 10px;
    }
    
    nav {
      overflow: hidden;
      background-color: #333;
      position: relative;
    }
    
    nav #myLinks {
      display: none;
    }
    
    nav a {
      color: white;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      display: block;
    }
    
    nav a.icon {
      background: black;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }
    
    nav a:hover {
      background-color: #ddd;
      color: rgb(185, 45, 132);
    }
    
    .active {
      background-color: #c1a5c4;
      color: white;
    }
}