:root {
    --Logo-Rotate: 5deg;
    --Dvd-Reveal: 25%;
    --Tiempo-Disco: 0.75s;
    --Tiempo-Slide: 0.75s;
    --Tiempo-Spin: 2.5s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


.spin {
    animation: spin var(--Tiempo-Spin) linear infinite;
}

@keyframes spin{
    from {
            rotate: 0deg;
        }
    
        to {
            rotate: 360deg;
        }
    
}

@keyframes flotar {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes moverFondo {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 200px 200px;
    }
}

@keyframes Aparecer {

    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 100;
        transform: scale(1);
    }



}

body {

    background-image: url("Assets/BG-FLESH.jpg");
    background-repeat: repeat;
    animation: moverFondo 10s linear infinite;


}

.cabecera {
    width: 80vw;
    height: 100vh;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;

    animation: flotar 2s ease-in-out infinite;
}

.logo img {
    
    width: 100%;
    display: block;

    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05) rotate(var(--Logo-Rotate));
}

.socials {
    height: 7.5%;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 auto;

    animation: flotar 2s ease-in-out infinite;
   
}

.socials a {
    height: 100%;
    display: block;
    width: auto;
    margin: 0 auto;
    
    transition: transform 0.3s ease;
}

.socials img {
    max-height: 100%;
    width: auto;
    display: block;
}

.socials a:hover {
    transform: scale(1.05) rotate(var(--Logo-Rotate));
}

.dvd-aceso-galeria-contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75vw;
    height: 100vh;
    margin: auto;
}

.dvd {
    position: relative;
    width: auto;
    height: 80%;
    aspect-ratio: 1/1;
    margin: auto;
    cursor: pointer;
}

.caratula, 
.disco-contenedor{
    transition: transform var(--Tiempo-Disco) ease-in-out;
}

.caratula {
    position: absolute;
    margin: auto;
    inset: 0;
    height: 100%;
    
}

.disco-contenedor {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.disco{
    height: 90%;
    animation: spin var(--Tiempo-Spin) linear infinite;
}

.dvd:hover .caratula {
    transform: translateX(calc(var(--Dvd-Reveal) * -1));
}

.dvd:hover .disco-contenedor {
    transform: translateX(var(--Dvd-Reveal));
}
    
.galeria-cotenedor{

    width: 75vw;
    height: 100vh;
    animation: Aparecer .5s ease-in-out;
    display: flex;
    margin: 0 auto;
}

.galeria{

    height: 80%;
    width: 100%;
    display: flex;

    border: 1px solid #b96a6a;
    margin: auto;
    background-color: aliceblue;


    border-radius: 2cap;
}

.galeria-categorias{

    height: 7.5%;
    width: 90%;
    padding-top: 2.5%;
    display: flex;
    flex-direction: row;
    overflow: hidden;

}


.galeria-categorias p {

    margin: auto;
    

}


[hidden]{
    display: none !important;
}