html, body {
    margin: 0px;
    padding: 0px;
    background-color: #2c2c2c;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

#logo {
    max-width: 15%;
}

canvas {
    display: block;
    width: 512px;
    height: 512px;
    background-color: white;
}

#canvases {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.canvas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.btn {
    display: flex;
    width: 64px;
    height: 64px;
    justify-content: center;
    align-items: center;
    background-color: #4e4e4e;
    color: #ffffff;
    cursor: pointer;
    border-radius: 15px;
}
.btn:hover, .active {
    background-color: #3a3a3a;
    color: #bebebe;
}

#color-btn { background-color: #000000; }
#size-tiny-btn { font-size: 2px; }
#size-small-btn { font-size: 8px; }
#size-medium-btn { font-size: 16px; }
#size-big-btn { font-size: 32px; }
#size-huge-btn { font-size: 64px; }