@font-face {
  font-family: "nuevoFont";
  src: "../fonts/ZeitungMonoPro-Thin.ttf" format("ttf"),

}
#reproductor{
  justify-content: center;
  
}

.masGrande{
  font-size: larger;
}

html {

  scroll-behavior: smooth;
  
  }

body{
  font-family: 'Space Mono', monospace;
}

/* IDENTIFICADOR #identificador */
#primerDetalle::before{
  content: "333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333";

  display: block;
  font-size:  10px;
  color: rgb(176, 84, 96);
  position: absolute;



}
.paddingRight{
  padding-right: 20px;
}
.paddingLeft{
  padding-left: 120px;
}

#primerDetalle{
  position: relative;
  bottom: 3px;
}

h1{
  position: relative;
  
}


/* CLASE siempre comienza con punto */
.subtitulo{
  font-family: tech;
}
/*margin=entre elementos | padding=dentro del elemento*/
/* margin arriba -derecha-abajo-izquierda */
.human{
  color: rgb(176, 84, 96);
}

.menu{
  font-size: 20px;
  color: black;
  display: block;
  padding-top: 30px;
  text-align: center;
}
.block{
  display: block;
}
a{
  color:black;
}
a:hover{
  color: rgb(176, 84, 96);
}
nav{
  display:flex;
  justify-content: space-around;
}
.nav-boton{
  background-color: rgb(176, 84, 96);
  color: white;
  border: 2px solid black;
  border-radius: 5px;
  justify-content: center;
}
.desaparece{
  display: none;
}

.paddingTop{
  padding-top: 25px;
}

.justiyContent{
  text-align: justify;
}
@media (max-width:600px) {

}
@media (min-width:600px) {

}
/* IMAGE MODAL GRAPH */


/* LOADER */
.loaderWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #b05460; 
  overflow: hidden;
}
#loader {

  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
}
@keyframes loader {
  0% { left: -100px }
  100% { left: 110%; }
}
#box {
  width: 50px;
  height: 50px;
  background: #fff;
  animation: animate .5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
#reproductor{
  list-style: none;
}
#reproductor li a{
   color: black;
   text-decoration: none;
}

#playlist .currentsong a{
  color: rgb(176, 84, 96);
}
@keyframes animate {
  17% { border-bottom-right-radius: 3px; }
  25% { transform: translateY(9px) rotate(22.5deg); }
  50% {
    transform: translateY(18px) scale(1,.9) rotate(45deg) ;
    border-bottom-right-radius: 40px;
  }
  75% { transform: translateY(9px) rotate(67.5deg); }
  100% { transform: translateY(0) rotate(90deg); }
} 

#shadow { 
  width: 50px;
  height: 5px;
  background: #000;
  opacity: 0.1;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow .5s linear infinite;
}
.box2 {
  background-color: rgba(0,0,0,.5);
  color: #fff;
}
.conc {
  width: 100%;
  height: 100%;
}
@keyframes shadow {
  50% {
    transform: scale(1.2,1);
  }
}

mark {
  background-color: rgb(127, 255, 144);
  color: black;
}
.colorBlack{
  color: black;
}

/* RESPONSIVE TYPOGRAPHY */