/* ======================================================= */
/* 1. MOBILE FIRST (DEFAULT) */
/* ======================================================= */

@import "tailwindcss";

:root {
    --gradient-color-footer: linear-gradient(to right, #FFFFFF);
    --gradient-color-slogan: linear-gradient(-45deg, #FFFFFF, #5c5d5f, #9298A1);
    --gradient-color-infos: linear-gradient(45deg, #FFFFFF, #9298A1);
    --color-square-title: #9298A1;
    --color-shadow-100: (0 0 5px #D7D4D4, #6D6161, #272222, #494040);
    --color-shadow-50: (0 0 10px #D7D4D4, #6D6161, #272222, #494040);
    --animated-gradient-bg: linear-gradient(-45deg, #11001c, #1a002b, #272222);
    --gradient-text-glow: linear-gradient(90deg, #D7D4D4, #272222, #9298A1, #494040);

    --principal-font: "Major Mono Display", monospace;
    --principal-font-size: 1em;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    line-height: 1.5;
    padding: 2%;
    font-family: var(--principal-font);
    font-size: var(--principal-font-size);
}

.principal-container {
    max-width: 90%;
    margin-top: 10%;
}

.title {
    font-family: var(--principal-font);
    font-size: 225%;
    text-align: center;
    text-transform: uppercase;
}

.slogan {
    position: relative;
    font-size: 120%;
    text-align: center;
    z-index: 10;
    width: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
    background: var(--gradient-color-slogan);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.collection-info {
    font-size: 90%;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-bottom: 5%;
    background: var(--gradient-color-infos);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

a {
    width: 100%;
}

.social-media {
    justify-self: center;
    max-width: 10%;
    margin-top: 2%;
    margin-bottom: 2%;
    position: relative;
    filter: saturate(0);
    z-index: 10;
}

.footer {
    font-size: 70%;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-bottom: 5%;
    text-transform: normal;
    background: var(--gradient-color-footer);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ======================================================= */
/* 2. ANIMAÇÕES */
/* ======================================================= */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes text-glow {

    0%,
    100% {
        text-shadow: var(--color-shadow-100);
    }

    50% {
        text-shadow: var(--color-shadow-50);
    }
}

.animated-gradient-bg {
    background: var(--animated-gradient-bg);
    background-size: 400% 400%;
    animation: gradient-animation 10s ease infinite;
}

.gradient-text-glow {
    background: var(--gradient-text-glow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: text-glow 4s ease-in-out infinite;
}

/* ======================================================= */
/* 3. MEDIA QUERIES */
/* ======================================================= */

@media (min-width: 620px) {
    body {
        max-height: 700px;
        margin-top: 10%;
    }

    .circle1 {
        max-width: 15rem;
        max-height: 15rem;
    }

    .circle2 {
        max-width: 18rem;
        max-height: 18rem;
    }

    .collection-info {
        font-size: 150%;
        margin: 0;
        letter-spacing: 1em;
    }

    .social-media {
        max-width: 2rem;
    }
}

@media (max-width: 390px) {
    body {
        margin-left: 3%;
        margin-right: 3%;
    }

    .footer {
        margin-top: 5%;
        font-size: 60%;
    }
}