style.css

body {
    --whiter: #DDD;
    --white: #DADADA;
    --light-gray: #404049;
    --gray: #35353A;
    --dark-gray: #28282E;
    --black: #111;
    --accent: #5CB700;
    background: var(--dark-gray);
    font-family: Roboto, sans-serif;
    margin: auto;
    width: 70%;
    color: var(--whiter);
}

h1 {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    float: left;
    margin-top: 15px;
    cursor: default;
}

#header img {
    float: right;
    margin-top: 15px;
}

#header img:hover {
    cursor: pointer;
    background: var(--black);
    border-radius: 26px;
}


canvas {
    background: var(--black);
    width: 100%;
    height: 80vh;
    margin-bottom: 15px;
}

input {
    background: var(--light-gray);
    border: thin solid dimgray;
    border-radius: 2px;
    padding-left: 8px;
    margin-right: 15px;
    line-height: 32px;
    caret-color: white;
    color: white;
    width: 75px;
    font-size: 18px;
}

#drawer {
    width: 25px;
    height: 25px;
    vertical-align: top;
}

button {
    height: 40px;
    background: var(--black);
    color: var(--whiter);
    font-size: 18px;
    border-radius: 5px;
    border-color: var(--dark-gray);
}

button:hover {
    cursor: pointer;
    background: var(--dark-gray);
}

@media (max-width:1024px) {
    body { width: 100vw;}
    h1 { margin-left: 10px; font-size: 36px; margin-bottom: 10px; margin-top: 10px;}
    #header img { margin-right: 10px; margin-top: 10px}
    input { margin-left: 10px; margin-right: 1px; font-size: 24px; width: 90px; height: 40px}
    #drawer {width: 40px; height: 40px}
    #drawer-label {display: block; margin-left: 10px; margin-top: 15px}
    label {font-size: 20px}
    canvas {width: 100vw; height: 70vh}
}