html{
    overflow-x: hidden;
    overflow-y: hidden;
  }
  
  body {
    background-image: url("../assets/fondo.png");
    /*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: white;
    width: 100%;
    padding: none;
    left: 0%;
  }
  
  
  h2{
    font-family: 'Xanh Mono', monospace;
    font-size: 0.8vw;
    color: rgba(0, 0, 0, 0.7);
    background-color: white;
    text-align: right;
    line-height: 1.5;
    position: fixed;
    padding: 1%;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    box-shadow: rgba(0, 0, 255, 1) -100px 100px 200px; 
    left: 73%;
    top: 0px;
    right: auto;
    
  }
  
  
  /* reloj */
  .clock {
    position: absolute;
    padding: 2%;
    align-items: center;
    top: 0%;
    left: 40%;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
    color: black;
    font-size: 1vw; 
    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: black;
    font-size: 1vw; 
    font-family: 'Manrope', sans-serif;  
    background-color: none;
  }
  
  
  
  
  .seccion a{
    color: black;
  }
  
  
  /* idioma */
  .idioma {
    position: absolute;
    padding: 1%;
    align-items: center;
    top: 85%;
    left: 1%;
    width: 50%;
    height: 100%;
    z-index: 1000;
    color: red;
    font-size: 1vw; 
    font-family: 'Dia', helvetica, arial, sans-serif;
    background-color: none;
  }
  
  
  .idioma a{
    color: red;
    font-size: 1vw; 
    font-family: 'Dia', helvetica, arial, sans-serif;
    background-color: none;
  }
  
  
  /*
  .renglon {
    float: left;
    padding-left: 1%;
    position: fixed;
    top: 0%;
    right: 0%;
    height: fit-content;
    max-height: 100%;
    z-index: 100;
    background-color: white;
  }       
  .renglon:hover {
    filter: drop-shadow(0 0 .5rem rgb(255, 0, 217));
  }
  .hover {
    pointer-events: none;
    display: inline-block;
    position: absolute;
  }  
  .ID {
    display: none;
    width: 70%;
    z-index: 100000;
  }
  .renglon:hover+.ID  {
    display: inline-block;
    position:absolute;
    top: 35%;
    left: -710%;
    width: fit-content;
    max-height: 100%;
    z-index: 100000;
    }
*/


      
      .dropmenu {
          float: left;
          padding: 5px;
          position: fixed;
          top: 1%;
          left: 2%;
          font-size: 1.5vw;
          z-index: 1000;
        }
          
        .dropmenu:hover {
          filter: drop-shadow(0 0 .5rem rgb(0, 255, 0));
        }
  
  
  

      /* Dropdown Button */
      .dropbtn {
        background-color: transparent;
        color: grey;
        padding-left: 5px;
        font-size: 16px;
        height: fit-content;
        max-height: 30px;
        position: inherit;
        border: none;
        border-radius: 8px;
        font-size: 1.5vw;
        top: 0%;
        z-index: 1000;
        position: fixed;
      }
      
      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: absolute;
        display: inline-block;
      }
      
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        position: relative;
        background-color: none;
        padding-left: 70px;
        padding-right: 20px;
        top: 10%;
        font-family: 'Manrope', sans-serif;
        color: #000;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1000;
      }
      
      /* Links inside the dropdown */
      .dropdown-content a {
        color: black;
        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: black;
        font-family: 'Manrope', sans-serif;
        }
        
      
      
      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {
        display: block;
        color: black;
        font-family: 'Playfair Display', serif;
        text-shadow: 0 0 3px #000;
        }
      
      /* 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: black;
      text-decoration: underline;
    }
    
    /* visited link */
    a:visited {
      color: black;
    }
    
    /* mouse over link */
    a:hover {
      color: black;
      
      text-shadow: 0 0 8px #000;
      
    }
    
    /* selected link */
    a:active {
      color: black;
      
    }
  
  
        .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: black;
          font-size: 0.8vw; 
          font-family: 'Dia', helvetica, arial, sans-serif;
          background-color: none;
          
      }
  


/*listado artistas*/
p {
    float: center center;
	width: 60%;
    position: absolute;
    top: 25%;
    left: 20%;
	border-collapse: collapse;
    text-align: justify;
    color: black;
    font-size: 1.2vw; 
    font-family: 'Dia', helvetica, arial, sans-serif;
    background-color: none;
    white-space: pre;
    line-height: 1vh;
    letter-spacing: auto;
}

.p a{
    text-decoration: none;
}

.p a:hover{
    text-decoration: underline;
}




/*IDs Hovers*/




  
.hover {
  pointer-events: none;
  display: inline-block;
  position: absolute;
}


.meimg, .litimg, .eyeimg, .handimg, .stoicimg, .typeimg, .beerimg, .blankimg, .blodimg {
  
  max-width: 60%;
  max-height: auto;
  display: none;
  position: fixed;
  image-orientation: center center;
  top:-5%;
  left: -5%;
  
}

.melink:hover+.meimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: -100;
  max-width: 30%;
  height: auto;
  position: fixed;
  left: 50%;
  top: 10%;
}

.link{
  color: blue;
}

.hidden {
  display: none;
}

.wrapper {
  height: 100vh;
}




  .row {

position: inherit;
float: right;
/*width: 33.33%;*/
background-color: none;
padding-top:  1px;
padding-left:  3px;
padding-right:  3px;
position: absolute;
bottom: 10px;
right: 10px;
}
  
  
  .column {
    width: 100%;
  }


      .logo  {
        position: fixed;
        bottom: 0%;
        right: 0%;
        max-width: 20%;
        display: block;
        color: black;
        font-family: 'Playfair Display', serif;
        text-shadow: 0 0 3px #000;
        }



/* Responsive styles */
@media only screen and (max-width: 768px) {
  html{
    overflow: auto;
 }


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


  
  .seccion {
    position: fixed;
    padding: 2%;
    align-items: center;
    top: -1%;
    left: 90%;
    width: 50%;
    height: 100%;
    z-index: 10000;
    overflow: hidden;
    color: black;
    font-size: 1vw; 
    font-family: 'Manrope', sans-serif;
    background-color: none;
  }

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

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


	table {
    position: absolute;
    left: 10%;
    width: 80%;
    line-height: normal;
		font-size: 3vh;
    text-align: left;
    white-space: inherit;
    }


  
  .table a{
      text-decoration: none;
  }
  
  .table a:hover{
      text-decoration: underline;
  }
  
  
  th, td {
    padding: 10px;
    text-align: center justify;
    border: none;
  }
  
  th {
    background-color: #f2f2f2;
  }

}