* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* zorgt ervoor dat margin an padding 'in' de box zitten 
    dus als je height 100px hebt dan zal de padding en margin hier in worden aangebracht. hierdoor zal jouw box altijd 100px blijven */
    font-family: Arial, Helvetica, sans-serif;
}

body {
    /* text-align: center;  centreert de canvas in het midden */
    background-color: #ffeeee;
    min-height: 99vh;
    max-width: 99vw;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

h1 {
    margin: 40px;
    font-size: 2.5rem;
    color: #d28e8e;
}

#playfield {
    background-color: rgb(22, 21, 21);
    border-top: 10px solid #d28e8e;
    border-bottom: 10px solid #d28e8e;
    border-left: 10px solid  rgb(22, 21, 21);
    border-right: 10px solid  rgb(22, 21, 21);
}

img {
    width: 20vw;
    height: auto;
    margin: 2.5vw;
}

.playfield-keys {
    display: flex;
    align-items: center;
}