#palette{
    display: grid;
    grid-template-columns: repeat(4,auto);
    gap: 5px;
    width: min-content;
    height: min-content;
    margin-bottom: 5px;
    margin-top: 5px;
}

#fullpalette{
    display: grid;
    grid-template-columns: repeat(16,auto);
    width: min-content;
    height: min-content;
}

.pixel{
    width: 50px;
    height: 50px;
}

.transparent{
    width: 25px;
    height: 25px;
    margin: 12.5px;
}

.hovered{
    background-color: rgb(128, 128, 128) !important;
}

.selected{
    position: relative;
    top: 5px;
}

.hide{
    opacity: 0;
}

:root{
    --0: blue;
    --1: blue;
    --2: blue;
    --3: blue;
}

.col0{
    background-color: var(--0);
}

.col1{
    background-color: var(--1);
}

.col2{
    background-color: var(--2);
}

.col3{
    background-color: var(--3);
}

.flex{
    display: flex;
    gap: 15px;
}

#paletteSelector{
    display: flex;
}