styles.css

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #144931;
}

body {
    background-color: #f0e6c5;
}

.button {
    align-items: center;
}

canvas {
    border: 4px solid #E6D8AA;
    background-color: #E6D8AA;
    border-radius: 16px;
}

button {
    width: 100px;
    height: 40px;
    margin-top: 15px;
    border-radius: 25px;
    font-size: large;
    background-color: #715B06;
}

button {
    color: #F8F2DC;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

p {
    font-size: large;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

kbd {
    background-color: #E6D8AA;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgb(255, 243, 188) inset;
    color: #333;
    display: inline-block;
    font-size: large;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}