*{
  cursor: pointer;
}

html{
    overflow-x: hidden;
    overflow-y: hidden;
    cursor: pointer;
}

a {
  cursor: pointer;
}

  body {
    background-image: url("../chill_area/assets/notch-engine-experiments-2018-jan-002.jpg");
    /*background-color: rgb(195, 195, 195);*/
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    font-family: 'Dia', helvetica, arial, sans-serif;
    font-family: 'Gilda Display', serif;
    font-family: 'Manrope', sans-serif;
    font-family: 'Noto Sans Mono', monospace;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-size: 0.8vw;  
    color: none;
  
         
    }
  
  
  header{
    background-color: none;
    width: 100%;
    padding: none;
    left: 0%;
  }
  
  
  
  
  /* reloj */


  .clock {
    position: absolute;
    padding: 2%;
    align-items: center;
    top: 0%;
    left: 47%;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
    color: rgb(255, 255, 255);
    font-size: 0.8vw; 
    font-family: 'Dia', helvetica, arial, sans-serif;
    background-color: none;
    
}


  
  
  
  .seccion {
    position: absolute;
    padding: 2%;
    align-items: center;
    top: -1%;
    left: 90%;
    width: 50%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    color: rgb(255, 255, 255);
    font-size: 1vw; 
    font-family: 'Manrope', sans-serif;
    background-color: none;
  }
  
  
  
  iframe{
    overflow-y: hidden;
    position: absolute;
    top: 10%;
    left: 15%;
    width: 100%;
    height: 100%;
    z-index: 10; 
    cursor: pointer;
  }

 
  
  
      /* Dropdown Button */
  .dropbtn {
    background-color: transparent;
    color: transparent;
    padding-left: 5px;
    font-size: 16px;
    height: fit-content;
    max-height: 30px;
    position: inherit;
    border: none;
    border-radius: 8px;
    font-size: 1.5vw;
    z-index: 1000;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: none;
    font-family: 'Manrope', sans-serif;
    color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: rgb(255, 255, 255);
    font-family: 'Manrope', sans-serif;
    padding-left: 20px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: rgb(255, 255, 255);
    font-family: 'Manrope', sans-serif;
    }
    
  
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
    color: rgb(255, 255, 255);
    font-family: 'Playfair Display', serif;
    text-shadow: 0 0 3px #b8b8b8;
    }
  
  /* Change the background color of the dropdown button when the dropdown content is shown
  .dropdown:hover .dropbtn {        filter: drop-shadow(0 0 .5rem rgb(0, 255, 0));
  }
  */
  
  
  /* unvisited link */
  a:link {
    color: rgb(255, 255, 255);
  }
  
  /* visited link */
  a:visited {
    color: rgb(255, 255, 255);
  }
  
  /* mouse over link */
  a:hover {
    color: whitesmoke;
    font-family: 'Manrope', sans-serif;
    text-shadow: 0 0 8px #adadad;
    
  }
  
  /* selected link */
  a:active {
    color: black;
    font-family: 'Playfair Display', serif;
  }
  
  
  
  /* idioma */
  .idioma {
    position: fixed;
    padding: 1%;
    align-items: center;
    top: 25%;
    left: 90%;
    width: 100%;
    height: 100%;
    z-index: 1000;
    color: white;
    font-size: 1vw; 
    font-family: 'Manrope', sans-serif;
    background-color: none;
  }
  
  
  .idioma a{
    color: whitesmoke;
    font-size: 3vw; 
    font-family: 'Manrope', sans-serif;
    background-color: none;
    writing-mode: vertical-lr;
    text-shadow: 1px 1px 7px rgb(0, 255, 4); 
    }

    .idioma a:hover{
        color: black;
        font-size: 3vw; 
        font-family: 'Manrope', sans-serif;
        background-color: none;
        writing-mode: vertical-lr;
        }
      
  
  
  
  #info{
    /*font-family: 'Dia', helvetica, arial, sans-serif;*/
    background-color: none;
    line-height: 1.5;
    font-size: .85vw;
    position: fixed;
    max-width: 27%;
    padding: 3%;
    border: none;
    left: 60%;
    top: 7%;
    right: auto;
    font-family: 'Manrope', sans-serif;
    z-index: 300;
    }
  
  h2{
    text-align: center;
  }
  
  
  h2:hover {
    color: #3efc42;
    text-decoration: underline;
    text-shadow: 0 0 8px #adffa0;
    
  }
  
  
    h3 a:hover {
      padding: 3px;
      color: white;
      /*background-color: #3efc42;*/
      font-family: 'Manrope', sans-serif;
      text-decoration: underline;
      text-shadow: 5 5 8px #3efc42;
      
    }
  
  
 
#F1  { 
  border: none;
  background-color: none;
  background-color: transparent;
  width: auto;
  max-width: fit-content;
  cursor: pointer;
  position: absolute;
  top: 30%;
  left: 10%;
  display: block;
  z-index: 1000;
  }


  
  @media screen and (max-width: 600px) {


    iframe{
      overflow-y: hidden;
      position: absolute;
      top: 10%;
      left: 15%;
      width: 90%;
      height: 100%;
      z-index: 10; 
      cursor: pointer;
    }


    #info{
    line-height: 1.1;    font-size: 1.75vh;
    max-width: 70%;
    width: 70%;
    left: 5%;
    text-align: left;
    color: black;

    }


 

    .clock {
      font-size: 2vh; 
      left: 80%;
      top: 95%;
      position: fixed;
      }



  .seccion {
    display: none;
    }

  
  .dropbtn {
  top: -1%;
  position: fixed;
  }

  .dropdown-content {
    font-size: 0px;
  }


   
#F1
  { 
  position: absolute;
  width: 10%;
  max-width: 10%;
  bottom: 6%;
  left: 10%;
  display: block;
  z-index: 1000;
  }

   
  #F2
  { 
  position: absolute;
  width: 10%;
  max-width: 10%;
  bottom: 6%;
  left: 10%;
  display: block;
  z-index: 1000;
  }
  

}




@media screen and (max-width: 600px) {

  
html{
  overflow-x: auto;
  overflow-y: auto;
}

#F2, #F1 {
  visibility: hidden;
}


}