@font-face {
    font-family: GangofThree, 'Gang of Three';
    src: url("../assets/fonts/go3v2.ttf");
}

:root{
    --blue-bg: #2C2C5B;
    --blue-border: 4px solid #00FFFF;
    --ad-text-clr: #CCCC15;
    scroll-behavior: smooth;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: inherit;
}

h1{
    font-size: 2rem;
}

h2{
    font-size: 1.75rem;
}

h3{
    font-size: 1.5rem;
}

p{
    font-size: 1.25rem;
}

body{
    position: relative;
    margin-inline: max(10px, 2cqi);
    min-block-size: 100dvh;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em 4em;
    background-color: rgb(182, 182, 182);
}

.fake-img{
    min-width: 360px;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
}

#adSlot{
    z-index: 2;
}

#devicePermissions{
    display: block;
    position: relative;
    background-color: var(--blue-bg);
    color: var(--ad-text-clr);
    border: var(--blue-border);
    font-size: 1.5rem;
    padding: 0.25em 0.5em;
    border-radius: 8px;
    margin-inline: auto;
    margin-bottom: 1em;
    cursor: pointer;
}

#adContainer{
    display: block;
    width: 300px;
    height: 600px;
    overflow: hidden;
    border: var(--blue-border);
    box-sizing: content-box;
    border-radius: 6px;
    margin-inline: auto;
}

footer{
    text-align: center;
}

footer h2{
    font-size: 18px;
}

.hidden{
    display: none;
    opacity: 0;
}

#startGameButton, #discountBtn, #resetLink{
    cursor: pointer;
}

#currentScore, #targetScore{
    font-size: 3rem;
}

@media screen and (width <= 1200px){
    body{
        grid-template-areas: 
        "header header header"
        "ad ad ad"
        "article article article"
        "article article article"
        "footer footer footer";
    }
}

@media screen and (width < 600px) {

    body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.39);
    }

    aside{
        margin-block: auto;
    }
}