body{
    background: url(../img/Logo_main.png), url();
    background-size: 25vw;
    background-color: rgba(247,245,238,0.75);
    background-repeat: no-repeat;
    background-position: center center;
    font-family: Roboto, sans-serif;
    margin:0;

}

nav{
    align-content: center;
    height: 100vh;
}

nav ul{
    list-style: none;
    display: grid;
    grid-template-columns: auto auto 30vw auto auto;
    padding:0;

}

.menuobject a{
    font-size: clamp(1.5em, 1.5vw, 8em);
    font-weight: 800;
    display: block;
    text-align: center;
    color: #006f33;
    padding:2vw 1.5vw;
    margin: 0 1.5vw;
}

.menuobject a{
    --c: #006f33; /* the color */
    
    background: 
      linear-gradient(90deg,#004D40 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%,
      linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
    -webkit-background-clip: text,padding-box;
            background-clip: text,padding-box;
    transition: 0.4s;
    border-radius: 1em;
  }
  .menuobject a:hover{
    --_p: 100%;
    color:#e0d7c3;
  }
  .menuobject a:target{
    --_p: 100%;
    color:#e0d7c3;
  }

a{
    text-decoration: none;

}

/*Social Bar*/

.social{
    list-style: none;
    font-size: 2em;
    width: 100%;
    text-align: center;
    display: grid;
    grid-template-columns: auto 10vw 10vw 10vw auto;
    padding: 0;
    margin-top: -4em;
    z-index: 2;
}

.social li a{
    color: #006f33;
    font-size: clamp(1em, 5.5vw, 10em);
    display: inline-block;
    padding: 0em 0.3em;
    margin:0em 0.1em;
}

.social li a{
    color: #0000;
    background: 
      linear-gradient(90deg,#bacf1a 50%,#006f33 0) 
      var(--_p,100%)/200% no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    transition: .4s;
  }
  .social li a:hover {
    --_p: 0%;
  }


  /*Cookie banner*/
#cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #f7f5ee;
      color: #333;
      padding: 1rem;
      border-top: 1px solid #ccc;
      font-size: 14px;
      z-index: 9999;
      display: none;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
      text-align: center;
    }
    #cookie-banner p {
      margin: 0 0 0.5rem 0;
    }
    #cookie-banner label {
      display: block;
      margin: 0.3rem 0 0.3rem 20%;
      text-align: left;
    }
    #cookie-banner button {
      margin: 0.4rem 0.4rem 0 0;
      padding: 0.4rem 1rem;
      font-size: 14px;
      cursor: pointer;
    }

#cookie-banner button{
  text-align: center;
  color:#333;
  background-color: rgba(224,215,195,1);
  display: inline-block;
  position: relative;
  border-radius: 2vw;
  font-size: clamp(0.8em, 1vw, 2em);
  padding: 1vw 3vw 1vw 3vw;
  font-weight: 600;
}

#cookie-banner button:hover{
  color:white;
  background-color: #004D40;
  box-shadow: #004d40 10px 10px 25px -10px;

}

/*MEDIA QUERIES*/


@media screen and (max-width:950px){
    body{
        background-size: 25vw;
    }

    .menuobject a{
        font-size: clamp(1.25em, 2vw, 8em);}

    .social{
            grid-template-columns: auto 12vw 12vw 12vw auto;
        }
}


@media screen and (max-width:665px){
    body{
        background-size: 40vh;
        background-position: center 25px;
    }

    nav{
        width:100%;
    }

    nav ul{
        display: flex;
        flex-direction: column;
    }

    nav ul li:first-child{
        order:3;
    }
    nav ul li:nth-child(2){
        order:1;
    }
    nav ul li:nth-child(3){
        order:5;
    }
    nav ul li:nth-child(4){
        order:2;
    }
    nav ul li:nth-child(5){
        order:4;
    }

    .menuobject{
        width:75%;
        margin: 0 auto;
    }

    .menuobject a{
        font-size: clamp(1.5em, 2vw, 8em);    
        margin:1vh auto;
        padding:2vh 0;
        border-radius: 0.5em;}
    .social{
        display: grid;
        grid-template-columns: auto 33vw 33vw 33vw;
        background-color: #e0d7c3;
        margin:0;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        width: 100%;

        }

    .social li a{
            width:100%;
            padding:1em 0;
            color: #0000;
            background: 
              linear-gradient(90deg,#bacf1a 50%,#006f33 0) 
              var(--_p,100%)/200% no-repeat;
            -webkit-background-clip: text;
                    background-clip: text;
            transition: 0.8s;
          }
          .social li a:hover {
            --_p: 0%;
          }
        
   
}