/* html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
} */

* {
    font-family: "Comic Sans MS", "Comic Sans", sans-serif;
}

html {
    background-color: #FFF1E8;
}

a {
    color: #29ADFF;
}

a:visited {
    color: #83769C;
}

canvas {
    border: 4px black solid;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    touch-action: none;
}

/* div {
    width: fit-content;
}

.columns {
    display: flex;
    flex-flow: row nowrap;
} */

.columns {
    display: flex;
    flex-flow: row nowrap;
}

.hidden-radio {
    display: none;
}

#color-selector {
    max-width: 516px;
}

.color-selector-option {
    border-radius: 100%;
    height: 48px;
    width: 48px;
    display: inline-block;
    vertical-align: text-top;
    box-sizing: border-box;
    border: 2px solid #000000;
    margin: 6px;
}

.size-selector-option {
    border-radius: 100%;
    display: inline-block;
    vertical-align: text-top;
    box-sizing: border-box;
    margin: 6px;
    vertical-align: middle;
    background-color: #000000;
}

.hidden-radio:checked+label {
    box-shadow: 0px 0px 0px 4px #FF77A8;
}

[for="#000000"] {
    background-color: #000000;
}

[for="#1D2B53"] {
    background-color: #1D2B53;
}

[for="#7E2553"] {
    background-color: #7E2553;
}

[for="#008751"] {
    background-color: #008751;
}

[for="#AB5236"] {
    background-color: #AB5236;
}

[for="#5F574F"] {
    background-color: #5F574F;
}

[for="#C2C3C7"] {
    background-color: #C2C3C7;
}

[for="#FFF1E8"] {
    background-color: #FFF1E8;
}

[for="#FF004D"] {
    background-color: #FF004D;
}

[for="#FFA300"] {
    background-color: #FFA300;
}

[for="#FFEC27"] {
    background-color: #FFEC27;
}

[for="#00E436"] {
    background-color: #00E436;
}

[for="#29ADFF"] {
    background-color: #29ADFF;
}

[for="#83769C"] {
    background-color: #83769C;
}

[for="#FF77A8"] {
    background-color: #FF77A8;
}

[for="#FFCCAA"] {
    background-color: #FFCCAA;
}

[for="micro"] {
    height: 2px;
    width: 2px;
}

[for="xtra-small"] {
    height: 4px;
    width: 4px;
}

[for="small"] {
    height: 8px;
    width: 8px;
}

[for="medium"] {
    height: 16px;
    width: 16px;
}

[for="large"] {
    height: 32px;
    width: 32px;
}

[for="xtra-large"] {
    height: 64px;
    width: 64px;
}

[for="big-yoshi"] {
    height: 128px;
    width: 128px;
}