body
{
    display: block;
    background-color: black;
    background-image:#0A9FA6;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: "Palanquin Dark";
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin:auto;
    -ms-overflow-style: none; 
    width: 100%;
    height: 100%;
}
body::-webkit-scrollbar{
  display: none;
}

  .bande
  {
    position: fixed;
    z-index: 2;
    background: linear-gradient(to right, #0A9FA6,#EEAD00);
    display: grid;
    place-items: left;
    font-family: "Palanquin Dark";
    width:50px;
    height:100%;
  }
.bar1, .bar11, .bar3 {
    width: 45px;
    height: 7px;
    background:linear-gradient(to right, #0A9FA6,#EEAD00);
    margin: 8px ;
    transition: 0.1s;
    border-radius: 20px;
    }
    
    .change .bar1 {
    transform: translate(0, 14px) rotate(-45deg);
    border-radius: 20px;
    width: 45px;
    height: 7px;
    }
    
    .change .bar11 {opacity: 0;}
    
    .change .bar3 {
    transform: translate(0, -15.5px) rotate(45deg);
    border-radius: 20px;
    width: 45px;
    height: 7px;
    }
    .wrapper
  {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(to right, #0A9FA6,#EEAD00);
    display: grid;
    place-items: center;
    transition: opacity 0.5s,visibility 1s;
    font-family: "Palanquin Dark";
  }
  .fade
  {
    opacity: 0;
    font-family: "Palanquin Dark";
    visibility: hidden;
  }
.loader {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.loader::before,
.loader:after {
    content: "";
    position: absolute;
    border-radius: inherit;
}

.loader:before {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, #2CD9FF 0%,
            #7EFFB2 100%);
    animation: spin .5s infinite linear;
}

.loader:after {
    width: 85%;
    height: 85%;
    background: linear-gradient(to right, #0A9FA6,#EEAD00);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/*BARRA SUPERIORE*/

@media(orientation:landscape)
{
    .header
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.headermobile
{
  display: none;
}

@media screen and (max-width:1100px) 
{
    .pc
    {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        position: fixed;
        background-color: black;
    }
    .pagem
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:space-evenly;
        align-items: center;
        width: 100%;
        height: 170px;
    }
    #one
    {
        font-size:38px;
        text-decoration: none;
        color: #0A9FA6;
        text-decoration: none;
    }
    #two
    {
        font-size:38px;
        text-decoration: none;
        color:#EEAD00;
        text-decoration: none;
    }
    #tre
    {
        font-size:38px;
        text-decoration: none;
        color: #0A9FA6;
        text-decoration: none;
    }
    .leftm
    {
        display: none;
    } 
    .homebut
    {
      background-color: #0A9FA6;
      border: solid white 6px;
      border-radius: 20px;
      position: fixed;
      bottom: 25px;
      left: 25px;
    }
    @media screen and (max-height:600px) 
    {
      #zeta
      {
        width: 90px;
        height: 50px;
      } 
    }
}
@media screen and (min-width:1100px) 
{
  .homebut{
    display: none;
  }
    .pc
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    position: fixed;
    background-color: black;
}
.pagem
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-evenly;
    align-items: center;
    width: 100%;
}
#one
{
    font-size:38px;
    text-decoration: none;
    color: #0A9FA6;
    text-decoration: none;
}
#two
{
    font-size:38px;
    text-decoration: none;
    color:#EEAD00;
    text-decoration: none;
}
#tre
{
    font-size:38px;
    text-decoration: none;
    color: #0A9FA6;
    text-decoration: none;
}
.leftm
{
    margin-left: 3.5%;
}
}
.headermobile
{
    display: none;
}
}
@media(orientation:portrait)
{
  .homebut{
    display: none;
  }
  .header
  {
      display: none;
  }
  .navbarl
  {
    display: flex;
    position:fixed;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    width: 95%;
    height: 13%;
    background-color: black;
    z-index: 999;
    border-radius: 20px;
    border: solid white 6px;
  }
  .headermobile
{
  display: flex;
  position: fixed;
  left: 50%;
  top: 10%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}
  .uii
  {
    margin-top: 13%;
    margin-left:-45%;
    margin-bottom: 2%;
    border-radius: 20%
  }
      #icon
      {
        margin-top: 1%;
        margin-right: -8%;
      }
      #list
       {
          display: none;
          position: fixed;
          flex-direction: column;
          align-items: center;
          justify-content:space-evenly;
          align-items: center;
          width: 70%;
          height: 60%;
          background-color: black;
          z-index:999;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
          border-radius: 20px;
          border: solid white 6px;
        } 

        @keyframes tid
        {
          0% {opacity: 100%;}
          15% {opacity: 95%;}
         25% {opacity: 85%;}
         45%{opacity: 75%;}
         50% {opacity: 65%;}
         65%{opacity: 50%;}
         75% {opacity: 45%;}
         85% {opacity: 25%;}
         95%{opacity: 15%;}
         100% {opacity: 0%;}  
        }
        @keyframes ti 
        {
          0% {opacity: 0%;}
          15% {opacity: 15%;}
         25% {opacity: 25%;}
         45%{opacity: 45%;}
         50% {opacity: 50%;}
         65%{opacity: 65%;}
         75% {opacity: 75%;}
         85% {opacity: 85%;}
         95%{opacity: 95%;}
         100% {opacity: 100%;} 
        }
        @media screen and (min-height:800px)  
        {
          .space
          {
            display:block;
          }
          .spacee
          {
            display: block;
          }
          .spaceee
          {
            display: block;
          }
      
        }
        @media screen and (min-height:650px)  and (max-height:800px)
        {
          .space
          {
            display:block;
          }
          .spacee
          {
            display: block;
          }
          .spaceee
          {
            display: none;
          }
      
        }
        
      @media screen and (min-height:500px) and (max-height:650px) 
      {
        .space
        {
          display:block;
        }
        .spacee
        {
          display: none;
        }
        .spaceee
        {
          display: none;
        }
    
      }
      @media screen and (max-height:500px)
      {
        .space
        {
          display:none;
        }
        .spacee
        {
          display: none;
        }
        .spaceee
        {
          display: none;
        }
    
      }
    .oness
    {
    font-size:38px;
    text-decoration: none;
    color: #0A9FA6;
    margin-left: -40px;
    }
    .twoo
    {
      font-size:38px;
      text-decoration: none;
      color: #EEAD00;
      margin-left: -40px;
    }
    .three
    {
      font-size:38px;
      text-decoration: none;
      color: #0A9FA6;
      margin-left: -40px;
    }
  }  
  /**/
  /*CONTENUTO CENTRALE*/
  .content
  {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: center;
    color:white;
    margin-top: 12%;
  }
  .titile
  {
    color:white;
    font-size: 55px;
  }
  .text
  {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  text-align: center;
  justify-content: center;
  color: white;
  font-size: 35px;
  border: solid white 6px;
    border-radius: 30px;
  }
  @media(orientation:portrait)
  {
    #imd
    {
      width: 90%;
      height: 90%;
    }
  }
  /**/

  /*BARRA INFERIORE*/

  .more
  {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .titolo
  {
    display: flex;
    flex-direction: row;
    align-items: center;
  text-align: center;
  justify-content: center;
  color: #0A9FA6;
  font-size: 50px;
  }
  .links
  {
    display: flex;
    flex-direction: row;
    align-items: center;
  text-align: center;
  justify-content: center;
  }
  #po
  {
    text-decoration: none;
    color: white;
    font-size: 20px;
  }