body{
    overflow: auto;
    background-color: #28383f;
}
@font-face{
    font-family: Separat;
    src: url(Separat.ttf); 
  }
  @font-face{
    font-family: Helvetica Neue;
    src: url(Helvetica.ttf); 
  }
p.testo{
    font-family: Helvetica Neue;
    color: #C2DFE3;
    text-align: justify;
}
h1{
    font-family: Separat;
    color: #C2DFE3;
}
h2{
    font-family: Separat;
    color: #C2DFE3; 
    text-align: justify;
}
h3{
    font-family: Separat;
    color: #C2DFE3; 
    text-align: justify;    
    font-style: italic;
}
h4{
    font-family: Helvetica Neue;
    color: #C2DFE3;
}
h2.trans{
    font-family: Separat;
    color: #C2DFE3;
    text-align: center;
}
a.link2{
    color: #C2DFE3;
    text-decoration: underline;
}
@keyframes onmouse {
    from { color: #C2DFE3 }
    to { color:  #9DB4C0; }
}
a.link2:hover{
    color: #9DB4C0;
    animation: onmouse 0.5s;
}
li.a{
    font-family: Separat;
    color: #9DB4C0;
    animation: onmouse 0.5s;
}


   /* audio player */

 #bottone{
    background-color: #28383f;
    color: #C2DFE3;
    font-family: Separat;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    caret-color: #9DB4C0;
    border: 2px solid #C2DFE3;
   }
   #bottone:hover{
    color: #9DB4C0;
    animation: onmouse 0.5s;
   }

   #asterisco{
    font-family: Helvetica;
    color: #C2DFE3;
   }

   .responsive {
    max-width: 100%;
    height: auto;
  }

  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
 
label{
  color: #5C6B73;
  font-family: Separat;
  font-size: 100%;
}
label1{
  color: #5C6B73;
  font-family: Separat;
  font-size: 55%;
}