html, body {
    max-width: 400px;
    margin: auto;

    /*border: 1px solid blue;*/
}

section {
    margin: auto;
    font-family: "Comic Sans MS", sans-serif;
}

#dots {
    width: 240px;
}

#garden {
    width: 320px;
}

canvas {
    border: 1px solid black;
}

#game-header {
    display: flex;
    /*next statement lines up 3 children together in the center of the container*/
    justify-content: center;
    margin-bottom: 5px;
}

#game-header div {
    flex-flow: row wrap;
    flex: 1;
    max-width: 110px;
    margin-top: 0px;
    text-align: center;
    font-size: 1.2em;
}

button {
    font-family: inherit;
    border-radius: 30px;
}

#game-header button {
    width: 55px;
}

#mini-help {
    font-size: small;
    text-align: center;
}

#instructions {
    border: 2px solid forestgreen;
    background-color: lightgreen;
    padding: 10px;
    position: absolute;
    top: 100px;
    max-width: 400px;
    margin: auto;
}

#dismiss-button {
    float: right;
    font-size: medium;
}

#instructions h1 {
    clear: right;
}

#hide-instructions {
    float: right;
}