:root {
    --musicOn: url('../controls_uwu/musicPlay.gif');
    --musicOff: url('../controls_uwu/musicPause.png');

    --mainColor: #380a36;
    --scndColor: #36083b7b; 
    --borderColor: #ff00b3;
    --hoverColor: var(--borderColor);
    --signColor: #683E88;
}

body {
    background-color: var(--mainColor);
    background-image: url('../imagenes uwu/tileMich1.png');
    background-repeat: repeat;
    text-align: center;
    padding-top: 50px;
    animation: diagonal-scroll 60s linear infinite;
}

@keyframes diagonal-scroll {
    0% {
        background-position: 0% 0%;
        /* Empieza en la esquina superior izquierda. 😈 */
    }

    100% {
        background-position: -100% 100%;
        /* Se desplaza hacia la izquierda y hacia abajo; Osea que termina en diagonal uwu */
    }
}

body,a {
    cursor: url('../controls_uwu/alisonCursor.png'), auto;
}

a {
    color: #fff;
}

a:hover, .audioSwitches:hover {
    cursor: url('../controls_uwu/alisonCursorHover.png'), auto;
}

h1 {
    color: #fff;
    font-size: 40px;
}

p {
    font-family: "Chewy", system-ui;
    font-size: 20px;
    color: #fff;
}

#title {
    width: 600px;
    margin-bottom: 30px;
}

/* 
    No se me ocurrió otro nombre para la cajita contenedora de divs hamurguesa xd.
    Esta debió haber sido la mainBox en realidad, pero anyways, creé otra hahaha.
    Para nombrarla me basé en lo de "Super clase" de POO. :3
*/
#superBoxHahah {
    margin: 0 auto;
    position: relative;
    width: 800px; 
}

#mainBox {
    border: 5px solid var(--borderColor);
    background-color: var(--scndColor);
    position: relative;
    margin-bottom: 70px;
}

#pagesUwU {
    display: grid;
    grid-template-areas: 
        "welcome home" /* SANITARUM. !!! UFFFF REFERENCIA HAHAHHA SIN QUERER XD.*/
        "about gatito";
    gap: 30px;
    margin-bottom: 30px;
}

#welcomepage {
    grid-area: welcome;
}

#homepage {
    grid-area: home;
}

.page {
    width: 200px;
    transition: transform 0.5s ease;
}

.page:hover {
    transform: scale(1.2) rotate(2deg);
}

#aboutpage {
    grid-area: about;
}

#tictactoepage {
    grid-area: gatito;
}

#musicSwitch {
    background-image: var(--musicOn);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 140px;
    height: 100px;
    position: absolute;
    top: 260px;
    left: 20px;
}

.musicOff {
    background-image: var(--musicOff) !important;
    filter: grayscale(100%) opacity(0.5) !important;
}

.audioSwitches {
    cursor: pointer;
    filter: none;
    transition: transform 0.3s ease-in-out;
    border: none;
    outline: none;
}

.audioSwitches:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px var(--hoverColor));
}

@media only screen and (max-width: 1100px) {
    * {
        font-size: 70px;
    }

}