/*Variables de colores*/
:root {
    --rosa: #fbc2c8;
    --crema: #f2f0d5;
    --marron: #9d6c4b;
    --blanco: #fcfaf9;
    --negro: #120000;
}


html{  
    background-image: url('/imagenes_dec/Fondo.png');
    background-size:100em ;
}
* {
    font-size: 1em;
    font-family: Grape Nuts;
}
/* SCROLLBARR*/

*::-webkit-scrollbar {
    width: 0.2em;   
}
*::-webkit-scrollbar-thumb {
    background-color: var(--rosa);
    border:0.1em solid var(--rosa);
    border-radius: 0.2em;
}
*::-webkit-scrollbar:horizontal{
    display: hidden;
}

.info::-webkit-scrollbar-thumb {
    background-color: var(--marron);
    border:0.1em solid var(--marron);
    border-radius: 0.2em;
}
/* ENCABEZADO*/
header {
    height: 14em;
    margin: 1em 0 0 22em;
    background-image: url('/imagenes_dec/header.png');
    background-repeat: no-repeat;
    background-size: 55em ;
    display: flex;
}
#nombre {
    position: relative;
    width: 20em;
    translate: 1.5em 1.5em;
}
.medio{
    display: flex;
    flex-direction: column;
}
#hours{
    font-family: "Pixelify Sans";
    position: relative;
    display: flex;
    height: 6em;
    width: 6em;
    z-index: 2;
    background-image: url(/imagenes_dec/corazonhora.png);
    background-size: 6em;
    align-items: center;
    justify-content: center;
    translate: 2em 2em;
    animation: translate1 10s ease-in-out infinite;
}
@keyframes translate1 {
    0% {transform: none;}
    30% {transform: translateY(0)}
    50% {transform: translateY(1.5em);}
    70% {transform: translateY(1.5em);}
    100% {transform: translateY(0);}
}    

#min{
    font-family: "Pixelify Sans";
    position: relative;
    display: flex;
    height: 6em;
    width: 6em;
    background-image: url(/imagenes_dec/corazonhora.png);
    background-size: 6em;
    align-items: center;
    justify-content: center;
    translate: 5em -2.5em;
    animation: translate2 10s ease-in-out infinite;
}
@keyframes translate2 {
    0% {transform: none;}
    30% {transform: translateY(0)}
    50% {transform: translateY(-1.5em);}
    70% {transform: translateY(-1.5em);}
    100% {transform: translateY(0);}
}    
#gato{
    position: relative;
    height: 3.5em;
    translate: -2em -2em;
}
.musica{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.notas{
    display: flex;
    justify-content: right;
}
#notas {
    position: relative;
    width: 9em;
    translate:3em 7em ;
    z-index: 2;
}
#disco {
    position: relative;
    z-index: 0;
    translate:-4em 0 ;
    width: 10em;
    animation: spin 5s ease-in-out infinite;
}
.reproductor {
    display: flex;
    flex-direction: column;
    position: relative;
    background-image: url('/imagenes_dec/reproductor.png');
    background-repeat: no-repeat;
    background-size: 13em;
    background-position: center;
    height: 15em;
    width: 13em;
    translate: 0 -4em;
    z-index: 1;
    padding: 1.2em;
}
.bbtitle, #titlescroll{
    font-family:'Pixelify Sans';
    font-size: 0.8em;
    color: var(--rosa);
    width: 6em;
    overflow: hidden;
    translate: 8em 0;
}
#pause{
    width: 0.8em;
    translate: 2.15em -0.1em;
}
#play{
    width: 0.7em;
    translate: 8.5em 0.2em;
    opacity: 75%;
}
.kiss{
    display: flex;
    justify-content: flex-end;
}
#kiss{
   position: relative;
    height: 2.5em ;
    translate: 0.25em -6.25em;
    z-index: 6; 
}
@keyframes spin {
    0% {transform: none;}
    80% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
/*CUERPO*/
main{
    display: flex;
    gap:3em;
}
/* NAVEGACIÓN :D */
nav {
    min-width: 19em;
    height: 22em;
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    background-image: url('/imagenes_dec/paletapixel.png');
    background-size: 17em;
    background-repeat: no-repeat;
    background-position: 1.5em;
    justify-content: space-evenly;
}
nav li{
    list-style-type: none;
    margin-left: 9em;
    font-size: 1.3em;
}
nav li a{
    color: var(--negro);
}
nav li a:hover {
    color: var(--marron);
}

/* parte central*/
section{
    display: grid;
    min-width: 54.8em;
    grid-template-areas: 
    "espejo    info" 
    "detalles   .";
    grid-template-columns: 25em 29em;
    grid-template-rows: 38.5em 40em;
}

.espejo{
    grid-area: espejo;
    display: flex;
    flex-direction: column;
    align-items:center;
}
#aries, #ds, #bi, #ballet, #pincel{
    position: relative;
    max-width: 1.5em;
    height: 1.5em;
    z-index: 7;
}
#ac, #fresa, #nj{
    position: relative;
    max-height: 3em;
    width: 6em;
    z-index: 7;
}
#espejo{
    min-height: 36em;
    position: relative;
    translate: 0 -7em;
}
#delfin{
    position: relative;
    min-height: 5em;
    translate: 6em -3em;
    z-index: 5;
}

#bolsa{
    position: relative;
    min-height: 15em;
    transform: rotateY(180deg);
    translate: -5em -22em;
    z-index: -1;
}
.info{
    grid-area: info;
    padding: 1em;
    background-image: url('/imagenes_dec/textolargo.png');
    background-repeat: no-repeat;
    background-size: 29em;
    overflow: scroll;
}
.detalles{
    grid-area: detalles;
}





/* copia pega de idiomas*/
.translate{
    width: 10em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.idioma{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}
#click{
    width: 5em;
}
.opcion{
    height: fit-content;
}
/*Lista de idiomas*/
.idiomas{
    height: 6.2em;
    width: 5em;
    padding: 0;
    margin: 0.2em 0 0 0;
    background-image: url('/idiomas/desplegable.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 5em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    visibility:hidden;
}
.idiomas li{
    list-style-type: none;
    width: 5em; 
}
.idiomas li a{
    display: flex;
    justify-content: space-evenly;
    font-size: 0.8em;
    color: rgb(85, 85, 85);
}

.idiomas li img{
    height: 1.2em;
}
/* toggle - js */
.toggle{
    visibility: visible;
}