style.scss

$margin: 10px;
$phone_font_size: 0.6rem;
$phone_button_size: 1.5rem;
$web_font_size: 0.95rem;
$web_button_size: 2.4rem;
$main_font: monospace;
$main_color: #181D26;
$second_color: #3D5A80;
$third_color: white;
$box_shadow: 2px 2px 9px #060606;

* {
    box-sizing: border-box;
    user-select: none;
}

body{
    margin: 0;
    background-color: $main_color;    
    color: $third_color;
    font:{
        family: $main_font;
        size: $phone_font_size;
    }
    p{
        display: inline-block;
    }
    .container {
        margin: 13px;        
        #toolbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            row-gap: $margin;
            padding: $margin;
            border-radius: 12px;
            background-color: $second_color;
            margin-bottom: $margin;
            box-shadow: $box_shadow;
        }
    }
}

canvas{
    margin: auto;
    border: 2px solid $second_color;
    border-radius: 15px;
    box-shadow: $box_shadow;
}

button{
    box-shadow: 1px 1px 4px #262728;
    border-radius: 6px;
    border: none;
    font-family: $main_font;
    font-size: $phone_font_size;
}

button , input[type='color']{
    height: $phone_button_size;
}

input , button{
    cursor: pointer;
    vertical-align: middle;
}

@media only screen and (min-width: 1070px) {
    body{
        font-size: $web_font_size;
    }
    button{
        font-size: $web_font_size;
    }
    button , input[type='color']{
        height: $web_button_size;
    }
    input[type='color']{
        margin-left: 7px;
    }
}