* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #111;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}


/* HEADER */

header {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #181818;
    border-bottom: 1px solid #333;
}

header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 2px;
}

header p {
    margin: 5px 0 0;
    color: #aaa;
}


/* MAIN */

main {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}


/* TOOLBAR */

#toolbar {
    height: 90px;
    background: #1c1c1c;
    border-bottom: 1px solid #333;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 25px;
}


#colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 600px;
}


.color {
    width: 28px;
    height: 28px;

    border-radius: 6px;
    border: 2px solid #444;

    cursor: pointer;

    transition: 0.15s;
}


.color:hover {
    transform: scale(1.15);
}


.color.selected {
    border-color: white;
    box-shadow: 0 0 10px white;
}


/* COLOR BUTTON COLORS */

.color:nth-child(1){background:#000000;}
.color:nth-child(2){background:#ffffff;}
.color:nth-child(3){background:#e53935;}
.color:nth-child(4){background:#ff9800;}
.color:nth-child(5){background:#ffeb3b;}
.color:nth-child(6){background:#4caf50;}
.color:nth-child(7){background:#00c853;}
.color:nth-child(8){background:#00bcd4;}
.color:nth-child(9){background:#2196f3;}
.color:nth-child(10){background:#3f51b5;}
.color:nth-child(11){background:#9c27b0;}
.color:nth-child(12){background:#e91e63;}
.color:nth-child(13){background:#795548;}
.color:nth-child(14){background:#607d8b;}
.color:nth-child(15){background:#9e9e9e;}
.color:nth-child(16){background:#ff5722;}
.color:nth-child(17){background:#8bc34a;}
.color:nth-child(18){background:#673ab7;}
.color:nth-child(19){background:#009688;}
.color:nth-child(20){background:#212121;}


/* INFO */

#info {
    display: flex;
    gap: 25px;

    color: #bbb;
    font-size: 14px;
}


/* CANVAS AREA */

#canvas-container {
    flex: 1;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(circle at center, #222, #090909);
}


canvas {
    position: absolute;

    image-rendering: pixelated;

    cursor: crosshair;
}


/* FOOTER */

footer {
    height: 40px;

    background: #181818;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #777;
    font-size: 13px;

    border-top: 1px solid #333;
}