*,footer{
    margin:0
}
*{
    box-sizing:border-box;
    padding:0
}
html{
    font-size:62.5%;
    font-family:"Jersey 10",sans-serif;
    scroll-behavior:smooth;
    scroll-padding-top:var(--nav-h)
}
body{
    background-color:#1b1b1b;
    color:#fff
}
.pink{color:var(--secondary-color)}
.blue{color:var(--primary-color)}
.purple{color:var(--transition-color)}
.bold{font-weight:700}

/* Tokens */
:root{
    --background-color:#1b1b1b;
    --text-color:#ffffff;
    --primary-color:#25b3ef;
    --secondary-color:#f33dc8;
    --transition-color:#a756c4;

    --gap-mobile:16px;
    --gap-tablet:24px;
    --gap-desktop:36px;

    --nav-h:64px;
    --burger-w:36px;
    --burger-h:4px;
    --burger-gap:12px;
    --toggle-size:64px;
    --toggle-offset:16px
}

.hero,.team-member__copy,footer{
    text-align:center
}
.nav,.nav__toggle{
    align-items:center
}
.header-spacer,.nav{
    height:var(--nav-h)
}
.hero__copy-btn,.nav__list a{
    text-decoration:none;
}
.hero__copy-btn,.nav__list a,.nav__toggle{
    color:var(--text-color)
}
.game-card__cta:hover,.hero__copy-btn:hover{
    opacity:.9
}
.site-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:100;
    background:var(--background-color)
}
.nav{
    display:flex;
    justify-content:space-between;
    margin:0 auto;
    padding:0 24px;
    max-width:100%
}
.nav__brand img{
    display:block;
    height:40px;
    width:auto
}
.nav__toggle{
    display:inline-flex;
    justify-content:center;
    padding:0;
    height:var(--toggle-size);
    width:var(--toggle-size);
    cursor:pointer;
    border:0;
    border-radius:10px;
    background-color:transparent
}
.nav__toggle:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:3px
}
.nav__burger,.nav__burger::after,.nav__burger::before{
    content:"";
    position:relative;
    display:block;
    height:var(--burger-h);
    width:var(--burger-w);
    border-radius:2px;
    transform-origin:center;
    transition:transform .25s,opacity .2s,background .2s;
    background:var(--text-color)
}
.game-card__cta,.hero__copy-btn{
    padding:7px 16px;
    background-color:var(--secondary-color);
    border-radius:8px
}
.nav__burger::before{
    position:absolute;
    top:calc(-1 * var(--burger-gap));
    left:0
}
.nav__burger::after{
    position:absolute;
    top:var(--burger-gap);
    left:0
}
.nav__toggle.is-open .nav__burger{
    background:0 0
}
.nav__toggle.is-open .nav__burger::before{
    transform:translateY(var(--burger-gap)) rotate(45deg);
    background:var(--text-color)
}
.nav__toggle.is-open .nav__burger::after{
    transform:translateY(calc(-1 * var(--burger-gap))) rotate(-45deg);
    background:var(--text-color)
}
.nav__menu[hidden]{
    display:none!important
}
.nav__menu{
    z-index:1000
}
.nav__list{
    display:flex;
    align-items:center;
    gap:var(--gap-mobile);
    list-style:none
}
.nav__list a{
    padding:8px 6px;
    font-size:3rem;
    letter-spacing:.3rem;
    border-radius:8px
}
.games-container p,.hero__copy-headline,.hero__copy-since{
    font-family:Orbitron,sans-serif;
    letter-spacing:.1rem;
    font-weight:400
}
.contact-socials img,.nav__list a:hover{
    opacity:.3
}
.nav__list a:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:4px
}
.nav__socials{
    display:none;
    align-items:center;
    gap:16px
}
.nav__socials a{
    display:inline-flex;
    align-items:center;
    justify-content:center
}
.nav__socials img{
    display:block;
    height:40px;
    width:40px
}
main{
    margin:24px
}
.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
.hero__image{
    display:block;
    width:100%;
    height:auto;
    image-rendering:pixelated;
    image-rendering:crisp-edges
}
.hero__copy-since{
    font-size:1.4rem
}
.hero__copy-logo{
    width:188px;
    height:auto;
    margin:12px 0
}
.about-us img,.game-card__img,footer{
    width:100%;
    height:auto
}
.hero__copy-headline{
    max-width:30ch;
    font-size:1.6rem
}
.hero__copy-btn{
    display:inline-block;
    margin:32px 0 40px;
    font-size:1.4rem;
    font-family:Orbitron,sans-serif;
    font-weight:400
}
.hero__copy-btn:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:4px
}
.about-container,.contact-container,.game-card__copy,.games-container,.team-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
}
.about-container h2,.contact-container h2,.games-container h2,.team-container h2{
    margin-top:12px;
    margin-bottom:24px;
    font-size:2.25rem;
    font-family:Orbitron,sans-serif;
    font-weight:400;
    color:var(--primary-color);
    text-decoration:overline;
    text-decoration-color:var(--transition-color)
}
.contact-container a,.game-card__cta{
    text-decoration:none
}
.games-container p{
    font-size:1.6rem;
    color:var(--text-color);
}
.games-grid article,.team-grid{
    display:flex;
    flex-direction:column;
    align-items:center
}
.game-card__img{
    display:block;
    margin:24px 0;
    border-radius:8px;
    image-rendering:pixelated;
    image-rendering:crisp-edges
}
.game-card__title{
    font-size:3rem;
    font-weight:400;
    letter-spacing:.2rem;
    color:var(--primary-color);
    text-transform:uppercase
}
.game-card__description,.game-card__status{
    letter-spacing:.1rem;
    font-family:Orbitron,sans-serif;
    font-weight:400
}
.game-card__status{
    margin:16px 0;
    font-size:1.4rem;
    color:var(--secondary-color)!important
}
.game-card__description{
    font-size:1.6rem;
    color:var(--text-color);
    max-width:none!important
}
.game-card__cta{
    display:inline-block;
    margin:24px 0;
    font-size:1.4rem;
    font-family:Orbitron,sans-serif;
    font-weight:400;
    color:var(--text-color)
}
.catch-us .socials-title,.team-member__role{
    color:var(--primary-color)
}
.about-container p,.contact-container p,.team-member__role{
    font-size:1.6rem;
    font-family:Orbitron,sans-serif;
    font-weight:400;
    letter-spacing:.1rem
}
.about-container p,.contact-container p{
    color:var(--text-color);
    margin-bottom:24px
}
.about-us img{
    margin-bottom:5vh
}
.team-member{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:36px
}
.team-member__photo{
    margin-bottom:24px;
    max-width:100%;
    height:auto;
    object-fit:contain;
    border-radius:100%
}
.team-member__copy{
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:320px;
    text-wrap:wrap
}.team-member__name{
    margin:12px 0;
    font-size:3rem;
    letter-spacing:.2rem;
    color:var(--text-color)
}
.team-member__bio,footer{
    font-size:1.4rem;
    font-family:Orbitron,sans-serif;
    font-weight:400;
    color:var(--text-color)
}
.team-member__bio{
    max-width:30ch;
    margin-bottom:12px;
    letter-spacing:.1rem;
    opacity:.75
}
.catch-us .socials-title{
    margin:50px 0 8px;
    text-transform:uppercase
}
.contact-socials{
    display:flex;
    justify-content:center;
    gap:10px
}
.contact-socials img:hover{
    opacity:1
}
footer{
    padding:32px 24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:var(--secondary-color)
}

@media (max-width:599px){
    .nav__list a,.nav__menu{
        color:var(--primary-color)
    }
    .nav__menu{
        position:fixed;
        inset:0;
        display:flex;
        flex-direction:column;
        gap:24px;
        padding:24px;
        background:var(--secondary-color);
        transform:translateX(100%);
        transition:transform .35s
    }
    .nav__menu.is-open{
        transform:translateX(0)
    }
    .nav__list{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        margin-top:56px
    }
    .nav__list a{
        padding:10px 0;
        font-size:4.8rem;
        letter-spacing:.3rem
    }
    .nav__toggle.is-open{
        position:fixed;
        top:var(--toggle-offset);
        right:var(--toggle-offset);
        z-index:1001
    }
}

@media (min-width:600px){
    .nav__list,.nav__menu{
        gap:var(--gap-tablet)
    }
    :root{--nav-h:72px}
    .nav{
        justify-content:space-between;
        height:var(--nav-h);
        padding:0 32px
    }
    .nav__brand img{
        height:55px;
        width:auto
    }
    .nav__toggle{
        display:none
    }
    .nav__menu{
        position:static;
        display:flex;
        align-items:center;
        transform:none;
        transition:none
    }
    .nav__menu[hidden]{
        display:flex!important
    }
    .nav__list{
        flex-direction:row
    }
    .nav__list a{
        font-size:3rem;
        letter-spacing:.3rem
    }
    main{margin:24px 32px}
    .hero__copy-logo{
        width:297px;
        height:auto;
        margin:16px 0
    }
    .game-card__cta,.hero__copy-btn{
        padding:10px 24px;
        font-size:1.6rem
    }
    .game-card__img{width:calc(100vw - 64px)}
    .team-member{
        display:grid;
        grid-template-columns:minmax(258px,320px) 1fr;
        grid-template-areas:"art copy";
        gap:16px;
        align-items:center;
        justify-content:center
    }
    .team-member__art{grid-area:art}
    .team-member__photo{height:auto}
    .team-member__copy{grid-area:copy}
}

@media (min-width:1000px){
    .about-us p,.games-container,.hero__copy-headline,.hero__copy-since{text-align:left}
    :root{--nav-h:80px}
    .nav{
        justify-content:space-between;
        height:var(--nav-h);
        padding:0 51px
    }
    .about-us img,.games-grid .game-card__img,.hero__copy-logo{
        width:100%;
        height:auto
    }
    .nav__menu{
        display:grid;
        grid-auto-flow:column;
        align-items:center;
        column-gap:var(--gap-desktop)
    }
    .nav__list{gap:var(--gap-desktop)}
    .nav__socials{display:inline-flex}
    .nav__socials img:hover{opacity:.3}
    main{margin:0}
    .about-container h2,.contact-container h2,.games-container h2,.team-container h2{font-size:3rem}
    #home{
        margin:15vh 4vw;
        display:grid;
        grid-template-columns:clamp(312px,31.25vw,400px) 1fr;
        grid-template-areas:"copy art";
        gap:2vw;
        align-items:center
    }
    .hero__copy{
        grid-area:copy;
        margin-top:75px
    }
    .hero__copy-headline{max-width:40ch}
    .hero__image{grid-area:art}
    .hero__copy-btn{
        margin-top:75px;
        padding:10px 24px;
        font-size:1.6rem
    }
    .about-container,.contact-container,.games-container,.team-container{
        margin:3vh 10vw 10vh;gap:3vh
    }
    .contact-container{
        gap:0
    }
    .games-container{
        display:flex;
        flex-direction:column;
        align-items:start
    }
    .games-title p{
        max-width:none
    }
    .games-grid .game-card{
        display:grid;
        grid-template-columns:45vw 31vw;
        column-gap:4vw;
        grid-template-rows:auto auto auto;
        align-items:start
    }
    .games-grid .game-card__art{
        grid-column:1;
        grid-row:1/-1
    }
    .games-grid .game-card__copy{
        margin-top:24px;
        grid-column:2;
        grid-row:1/-1;
        display:grid;
        grid-template-columns:min-content auto;
        row-gap:var(--gap-tablet);
        grid-template-rows:auto auto auto
    }
    @supports (grid-template-rows:subgrid){
        .game-card__copy{
            grid-template-rows:subgrid
        }
    }
    .about-container,.about-us{
        grid-template-rows:auto auto;
        display:grid
    }
    .game-card__title{
        grid-column:1;
        grid-row:1;
        justify-self:start
    }
    .game-card__status{
        margin:0;
        padding-left:24px;
        grid-column:2;
        grid-row:1;
        justify-self:start
    }
    .game-card__description{
        grid-column:1/-1;
        grid-row:2;
        text-align:left;
        margin-inline:0
    }
    .our-philosophy,.what-we-do{
        text-align:center
    }
    .game-card__cta{
        margin-bottom:0;
        grid-column:1/-1;
        grid-row:3;
        justify-self:center
    }
    .about-us,.about-us h2{
        grid-column:1/-1;
        grid-row:1
    }
    .about-container{
        grid-template-columns:auto auto;
        row-gap:50px;
        align-items:start
    }
    .about-us{
        grid-template-columns:31vw 45vw;
        column-gap:4vw
    }
    .about-us h2{
        margin-bottom:45px;
        justify-self:start
    }
    .about-us p,.what-we-do{
        grid-column:1;
        justify-content:start;
        grid-row:2
    }
    .about-us img{
        grid-column:2;
        grid-row:2;
        justify-self:end;
        margin:0
    }
    .our-philosophy{
        grid-column:2;
        grid-row:2;
        justify-content:start
    }
    .team-grid{
        display:grid;
        grid-template-columns:repeat(3,25vw);
        grid-template-rows:auto;
        column-gap:2.5vw;
        row-gap:50px;
        align-items:start
    }
    .team-member{
        display:flex;
        flex-direction:column;
        align-items:center
    }
}

@media (prefers-reduced-motion:reduce){
    *{
        animation-duration:NaNs!important;
        animation-iteration-count:1!important;
        transition-duration:NaNs!important
    }
    html{scroll-behavior:auto}
}