:root {
    --color-blanco: #EDE6F2;
    --color-rojo: #F72C25;
    --color-verde: #99C1B9;
    --color-negro: #000;
    --gradiente-rojo: #fa6f77;
    --gradiente-morado: #bb75d9;
}

/* Animaciones */

@keyframes gradient {
    0% {
        background-position: right bottom, 0% 50%;
    }
    50% {
        background-position: right bottom, 100% 50%;
    }
    100% {
        background-position: right bottom, 0% 50%;
    }
}


/* Generales */

body {
    background-color: var(--color-blanco);
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
    background-image: url(../img/background.webp), linear-gradient(45deg, var(--gradiente-rojo), var(--gradiente-morado));
    background-repeat: no-repeat;
    background-position: center center, right bottom;
    background-size: 500px 500px, 200% 200%;
    animation: gradient 5s ease infinite;
}

@media all and (max-width: 1158px) {
    body {
        background-size: 0 0, 200% 200%;
    }
}

/* Fin Generales */

/* Main */

.main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main__title {
    font-family: 'Comforter Brush', cursive;
    font-weight: normal;
    text-align: center;
    color: var(--color-blanco);
    font-size: 3rem;
    margin: 0;
}

.main__subtitle {
    font-family: 'Comforter Brush', cursive;
    font-weight: normal;
    text-align: center;
    color: var(--color-negro);
    font-size: 3rem;
}

.nav {
    margin-top: 2rem;
}

.nav__ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2.5rem;
    padding: 0;
    list-style: none;
}

@media all and (max-width: 1580px) {
    .nav__ul {
        grid-template-columns: repeat(4, 1fr);
    }
}


@media all and (max-width: 600px) {
    .nav__ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

.nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav__link {
    display: block;
    width: 7rem;
    text-align: center;
}

.nav__link:hover .nav__img {
    border-width: 4px;
}

.nav__img {
    border-radius: 50%;
    border: 2px solid var(--color-rojo);
    box-sizing: border-box;
    padding: 3px;
    max-width: 9rem;
}

.nav__text {
    display: inline-block;
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 0;
    transition: .3s cubic-bezier(.68,-0.55,.27,1.55);
}

.nav__subitem {
    display: flex;
    flex-wrap: wrap;
    transform: translateX(-100vw);
    list-style: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: #ffffffd9;
    padding: 1rem;
    grid-gap: 3rem;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
}

@supports (backdrop-filter: blur(8px)) {
    .nav__subitem {
        backdrop-filter: blur(8px);
        background-color: #fff5;
    }
}

@supports (-webkit-backdrop-filter: blur(8px)) {
    .nav__subitem {
        -webkit-backdrop-filter: blur(8px);
        background-color: #fff5;
    }
}

.nav__subitem > .nav__item {
    margin-bottom: 2rem;
}


.nav__subitem .nav__text {
    display: block;
    height: 0;
    overflow: visible;
}

.nav__subitem--show {
    transform: translateX(0);
    opacity: 1;
}

.nav__close {
    position: fixed;
    bottom: 1rem;
    left:  auto;
    right: auto;
    font-size: 3rem;
}


@media all and (max-width: 600px) {
    .nav__close {
        position: initial;
    }
}

/* Fin Main */