html,body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 1em;
    text-align: center;
    color: rgb(2, 255, 44);
    background-image: url("../img/sp.jpg");
    background-size: cover;
    background-repeat: space;
}
h2 {
    color: rgb(2, 255, 44);
}

canvas {
    background-image: url("../img/sp.jpg");
    background-repeat: repeat;
    width: 100%;
    height: 100%;
}

#container {
    max-width: 70em;
    background-image: url("../img/sp.jpg");
    margin: 0 auto;
    padding: 1em;
    display: grid;
    grid-gap: 1em;
    grid-template-rows: .25fr .5fr .25fr;
    grid-template-columns: .25fr .5r .25fr;
    grid-template-areas: "top-left game top-right"
                         "center-left game btm-right"
                         "btm-left game btm-right";
}

#top-left,  #top-right, #btm-left, #btm-right {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgb(7, 2, 98), rgb(19, 63, 242), rgb(220, 103, 255), rgb(96, 2, 136));
    /* background-image: url("../img/background.png"); */
}

#top-left {
    grid-area: top-left;
}

#top-right {
    grid-area: top-right;
}

main {
    grid-area: game;
}

#btm-left {
    grid-area: btm-left;
}

#btm-right {
    grid-area: btm-right;
}

button {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, rgb(7, 2, 98), rgb(19, 63, 242), rgb(220, 103, 255), rgb(96, 2, 136));
}


footer {
    color: rgb(112, 112, 114);
    font-style: italic;
}