:root{
    --game-field-sz: 60vh;
}

/*Laptop Screens*/
@media (min-width: 1200px) {
    html {
        font-size: 14px;
    }
}

/*Mobile*/
@media (max-width: 450px) {
    html {
        font-size: 12px;
    }

    button {
        font-size: 12px;
    }
    :root{
        --game-field-sz: 60vw;
    }
}


body{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    text-decoration: none;
    /* background-image: url(snake_bg.png); */
    background-size: cover;

    /*center body*/
    margin: 0 auto;

    /*body text*/
    color: white;
    font-size: 1rem;

    /*prevent scroll on page*/
    /* overflow: hidden; */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    /*prevent cursor highlight*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-color: hsl(120, 50%, 31%);
}

#container {
    width: 100vw;
    height: auto;
    display: block;
}

#canvas-container {
    display: block;
    width: var(--game-field-sz);
    height: auto;
    position: relative;
    /*left: calc(50%;*/
    margin: 0 auto;
}

.gameField{
    /*Make canvas fit screen*/
    width: var(--game-field-sz);
    height: var(--game-field-sz);
    position: relative;
    background: black;

    /* url(https://img.freepik.com/premium-vector/cute-pastel-green-checkerboard-checkered-gingham-plaid-tartan-pattern-background-wallpaper_565280-454.jpg?w=750)!important; */
    border-radius: 1rem;
    color: white;
}

#overlay{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    border: white 2px solid;
    background-color: transparent;
}

.hidden{
    filter: blur(4px) saturate(70%);
    animation-name: confetti;
    animation: infinite;
}

.alert{
    display: block;
    text-align: center;
    font-weight: bold;
}
#highScore{
    display:inline-block;
}
#score{
    display: inline;
}

.h1{
    text-decoration: underline !important;
    position: relative;
    top: 0;
}

button{
    max-width: 200px;
    display: inline-block;
    margin: 0.3rem;
    font-size: 1rem;
    padding: 0.5rem;
    background-color: lavender;
    font-variant-caps: all-small-caps;
    border-radius: 0.5rem;
}

.big-button {
    font-size: 1.25rem;
    padding: 10px 20px;
    margin-bottom: 1rem;
}

button:hover{
    color: blueviolet;
    transform: scale(1.05);
}

button:active {
    color: blueviolet;
    transform: scale(0.95);
}

.logStyle {
    font-family: Arial;
    font-size: 1.2rem;
    font-style: italic;
    color: beige;
    background-color: rgb(33, 33, 33);
    margin: 20 auto;
    padding: 0.5rem;
    /*Wrap text*/
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 100%;
    border-radius: 0.5rem;
}