styles.css

html, body {
    resize: none;
    overflow: hidden;
}

body {
    overflow-y: hidden;
}


#DOT {
    background-color: blue;
    border: none;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#LINE {
    background-color: red;
    border: none;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#SPACE {
    background-color: green;
    border: none;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#DONE {
    background-color: yellow;
    border: none;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#DOT:hover{
    background-color: darkblue;
}
#NEXT {
    background-color: black;
    border: none;
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#NEXT:hover{
    background-color: gray;
}
#AUDIO {
    background-color: rgb(255, 0, 204);
    border: none;
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#AUDIO:hover{
    background-color: rgb(120, 8, 94);
}
#REPEAT {
    background-color: rgb(94, 255, 0);
    border: none;
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 100vw;
    height: 20vw;
}
#REPEAT:hover{
    background-color: rgb(10, 65, 2);
}
#LINE:hover{
    background-color: darkred;
}
#SPACE:hover{
    background-color: darkgreen;
}
#DONE:hover{
    background-color: yellowgreen;
}
#buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
h1{
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    top: 30;
    right: 50;
}

h2{
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    top: 30;
    right: 50;
}