@import url('https://fonts.googleapis.com/css2?family=Fascinate&family=Ranchers&display=swap');

:root {
    --size: 20px;
    --h1-size: 2em;
    --p-size: 1em;
    --background-color: #fed;
}

@media (min-width: 600px) {
    :root {
        --size: 50px;
        --h1-size: 4em;
        --p-size: 2em;
    }    
}

body {
    height: 100vh;
    overflow: hidden;
    background-color: var(--background-color);
    cursor: pointer;
}

h1 {
    font-family: 'Fascinate', sans-serif;
    font-size: var(--h1-size);
    color: var(--background-color);
    text-align: center;
    user-select: none;
    text-shadow: -3px 4px 3px rgba(0,0,0,0.2);
}

p {
    font-family: 'Ranchers', serif;
    font-size: var(--p-size);
    color: var(--background-color);
    text-align: center;
    user-select: none;
    text-shadow: -3px 4px 3px rgba(0,0,0,0.2);
}

.visible {
    color: black;
}

#main-section {
    height: 100%;
    width: 100%;
}

#game {
    display: grid;
    grid-template-columns: repeat(10,var(--size));
    grid-template-rows: repeat(3,var(--size));
    grid-gap: 5px;
    background-color: rgb(50,50,50);
    padding: 25px;
    border-color: #454545;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    box-shadow: -2px 3px #252525, -3px 4px #252525, -4px 5px #252525, -5px 6px #252525, -5px 6px 5px black;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

canvas {
    height: var(--size);
    width: var(--size);
    background-color: black;
    border-radius: 30%;
    transition: all, 200ms;
    box-shadow: inset -1px 5px 5px 0 rgba(255,255,255,0.4), -1px 1px 2px 1px rgb(0,0,0,0.3);
}

.lit-match-light {
    background-color: rgb(200,0,0);
}

.lit-scan-light {
    background-color: rgb(0,150,0);
}

.lit-step-light {
    background-color: rgb(0,0,255);
}

@media (min-width: 600px) {
    canvas {
        border-radius: 15px;
    }    
}