body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;

    background-image: url('./images/background.png');
    background-size: max(100vw, 100vh);
    background-repeat:no-repeat;
    background-position: center;
    background-attachment: fixed;

    background-color: hsl(0, 0%, 25%);

    color: white;
    /* text-shadow: black 0px 0px 10px; */
    text-shadow: 0px 0px 50px black;

    box-shadow: inset 0px 0px 50px black;
}

a:link {
    color: hsl(60, 100%, 85%);
}

a:hover {
    font-style: italic;
    color: hsl(0, 0%, 100%);
}

a:visited {
    font-style: italic;
    color: hsl(46, 100%, 75%);
}

/* @media (prefers-color-scheme: dark) {
    body {
        background-image: url('/images/background_dark.webp');
        background-color: hsl(0, 0%, 25%);
        color: black;
        text-shadow: white 0px 0px 40px;
    }
} */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

canvas {
    /* border: 1px solid #000; */
    margin-bottom: 20px;
}

#buttons {
    width: 401px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}