:root {
    --darker-clr: #010005;
    --dark-clr: #08021B;
    --accent-bg-clr: #2c87bc;
    --light-clr: white;
    --accent-clr: #21e6ed;
    
    --ff-system: Verdana, system-ui;
    --ff-audiowide: 'Audiowide', cursive;
    
    --fw-light: 200;
    --fw-regular: 400;
    --fw-bold: 700;
    --fw-black: 900;
    
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-p: 1rem;
    --fs-cta: 1rem;
    --fs-footer: 0.8rem;

    --nav-size: 7rem;

    --border: 5px solid var(--accent-bg-clr);

    --scale-size-hover: 1.02;
    
    --transition-100ms: all 100ms ease-in-out;
    --transition-300ms: all 300ms ease-in-out;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ========= TAGS ========= */

html { scroll-behavior: smooth; }

body {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), #05061c, var(--dark-clr)), url(img/key_art_bg.png);
    background-size: contain;
    background-repeat: repeat-y;
    color: var(--light-clr);
    font-family: var(--ff-system);
    line-height: 1.5;
    margin: 0;
    padding: 0;
    min-width: fit-content;
}

a {
    text-decoration: none;
    color: var(--accent-clr);
}

h1, h2, .buy, .btn { font-family: var(--ff-audiowide); }

h1 { font-size: var(--fs-h1); }

h2 {
    font-size: var(--fs-h2);
    color: var(--accent-clr);
    font-weight: var(--fw-bold);
}

p { font-size: var(--fs-p); }

footer {
    font-size: var(--fs-footer);
    font-family: var(--ff-audiowide);
    bottom: 0;
    left: 0;
    right: 0;
    border-top: var(--border);
    background-color: var(--darker-clr);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding-block: 1rem;
}

nav {
    position: fixed;
    top: 0;
    background-color: var(--darker-clr);
    border-bottom: var(--border);
    
    left: 0;
    right: 0;
    padding: 1em 10%;
    display: flex;
    justify-content: left;
    align-items: center;
    z-index: 100;
    text-align: center;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    padding: 0 20px;
}

/* ========= TAGS (Childs) ========= */

nav > a {
    width: 10%;
    position: relative;
    transition: var(--transition-100ms);
}
nav > a:hover { scale: var(--scale-size-hover); }

nav ul {
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1em;
    margin-left: 1em;
}

nav ul li {
    float: left;
    transition: var(--transition-100ms);
}
nav ul li:hover { scale: var(--scale-size-hover); }

nav ul li a { color: var(--light-clr); }
nav ul li a:hover { color: var(--accent-clr); }

nav a.buy {
    background: linear-gradient(var(--accent-clr), 40%, var(--accent-bg-clr, 80%));
    padding: 1rem;
    margin-left: auto;
    border-radius: 100vmax;
    color: var(--darker-clr);
    transition: var(--transition-100ms);
    width: 8rem;
}
nav a.buy:hover {
    color: var(--light-clr);
    scale: var(--scale-size-hover);
}

/* ========= CLASSES ========= */

/* --- Main Section --- */

.main {
    margin: var(--nav-size) 0 var(--fs-h1) 0;
    display: grid;
    place-items: center;
}

.game-logo {
    margin: 1rem 0 3rem 0;
}

.game-logo:hover {
    margin: 1rem 0 3rem 0;
    scale: var(--scale-size-hover);
}

.trailer {
    border: var(--border);
    position: relative;
    border-radius: 1em;
    box-shadow: none;
}

.short-desc {
    width: 80%;
    text-transform: uppercase;
    text-align: center;
}

/* --- Features Section --- */
.features {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.feature {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding-block: 1rem;
    /* background-color: var(--accent-bg-clr); */
    width: 100%;
}

/* .feature.right-img { background-color: var(--dark-clr); } */

.feature .feature-text {
    width: max(30rem, 45rem);
    margin-inline: auto;
    padding-inline: 1rem;    
}

.feature-text.hidden.left-text {
    margin-left: 0;
    text-align: left;
}

.feature-text.hidden.right-text {
    margin-right: 0;
    text-align: right;
}

.feature .feature-text h2, .feature .feature-text p { font-weight: var(--fw-regular); }

.feature img {
    max-width: 45rem;
    height: auto;
    margin-inline: auto;
    border-radius: 15px;
    filter: drop-shadow(0px 0px 6px var(--accent-bg-clr));
}

.feature img:hover {
    scale: var(--scale-size-hover);
}

.feature img.key-art {
    max-height: 31rem;
}

.features .feature:nth-child(even) img, .features .feature:nth-child(odd) .feature-text { order: 1; }
.features .feature:nth-child(odd) img, .features .feature:nth-child(even) .feature-text { order: 2; }

/* --- Call to Action Section --- */
.cta {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 35%;
    margin: 1rem auto 3rem auto;
    font-size: var(--fs-cta);
}

.cta .btn {
    color: var(--darker-clr);
    background: linear-gradient(var(--accent-clr), 40%, var(--accent-bg-clr, 80%));
    padding: 1rem;
    margin: auto;
    border-radius: 0.5em;
    box-shadow: none;
    font-weight: var(--fw-bold);
    border: 5px solid linear-gradient(var(--accent-clr), 40%, var(--accent-bg-clr, 80%));
    transition: var(--transition-100ms);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    max-width: 13rem;
    max-height: 4rem;
}

.cta .btn i {
    font-size: var(--fs-h1);
    padding: 0 0 0 var(--fs-p);
}

.cta .btn img {
    max-width: 30%;
    position:relative; 
}

.cta .btn:hover {
    color: var(--light-clr);
    scale: var(--scale-size-hover);
}

.btn.hollow {
    color: var(--light-clr);
    background: transparent;
    font-weight: var(--fw-regular);
    transition: var(--transition-100ms);
    max-width: 17rem;
    margin-left: var(--fs-cta);
    border: var(--border);
}
.btn.hollow:hover { scale: var(--scale-size-hover); }

.cta .btn.hollow i {
    color: var(--accent-bg-clr);
}
.cta .btn.hollow:hover i {
    color: var(--light-clr);
}


/* --- Dev Section --- */
.about {
    width: 90%;
    margin-inline: auto;
    text-align: justify;
}

.about .main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    margin-top: 0;
}

.about .main img {
    max-width: 30rem;
    border-radius: 100vmax;
    border: var(--border);
    margin-left: 3rem;
    order: 2;
}
.about .main .texto {
    order: 1;
    font-weight: var(--fw-regular);
}


/* General */

.padded-top {
    padding-top: var(--nav-size);
}


.hidden {
    opacity: 0;
    transition: var(--transition-300ms);
}
.show { opacity: 1; }

.hidden.come-from-left { transform: translateX(-100%); }
.hidden.come-from-right { transform: translateX(100%); }
.hidden.come-from-bot { transform: translateY(100%); }

.show.come-from-left, .show.come-from-right { transform: translateX(0); }
.show.come-from-bot { transform: translateY(0); }

.feature.right-img img, .feature > .feature-text, .game-logo { transition-delay: 100ms; }

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}

@media(max-width:48em) {  
    .body {
        background-size: cover;
    }
    

    .feature {
        flex-direction: column;
        align-items: center;
        justify-content: center;  
    }
    
    .feature img, .feature-text { padding: 1rem; }

    .feature img.key-art { margin-inline: 0; }

    .feature-text.hidden.right-text, .feature-text.hidden.left-text {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }
    

    .features .feature:nth-child(even) img { order: 1; }
    .features .feature:nth-child(even) .feature-text { order: 2; }

    .cta { width: 70%; }

    .about .main { flex-direction: column; }

    .about .main .texto { order: 2; }

    .about .main img {
        margin-inline: 0;
        max-height: 15rem;
        order: 1;
    }
}