/*---https://meyerweb.com/eric/tools/css/reset/---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
ol, ul {
	list-style: none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }
/*---------------------------------------------*/
*{ box-sizing: border-box; }
html { height: 100%; }
a { text-decoration: none; }

@font-face {
    font-family: 'HalfBoldPixel-7';
    src: url('./fonts/HalfBoldPixel-7.woff2') format('woff2'),
        url('./fonts/HalfBoldPixel-7.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap; }

.material-symbols-sharp {
  font-variation-settings: 
      'FILL' 0, 
      'wght' 200, 
      'GRAD' 0, 
      'opsz' 24; }

:root {
    --border-radius: 0.7rem;
    --shadow: 0.3rem 0.2rem black;
    --large-text: 1.1rem;
    --margin-1: 0.9rem;
    --margin-2: calc(1.5*var(--margin-1));}

:root.theme-dark {
    --background: #2e2e2e;
    --yellow-accent: #ea713c;
    --light-yellow-accent: #FFEBE2;
    --glass: #FFFFFF21; }

h1 {
    font-family: "HalfBoldPixel-7";
    font-size: 2.3rem;
    text-shadow: 0.3rem 0.2rem black;
    color: var(--yellow-accent);
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-1); }

body {
    text-align:center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 99.9%;
    background-color: var(--background);
    background: rgb(92,63,50);
    background: -moz-linear-gradient(90deg, rgba(92,63,50,1) 0%, var(--background) 12%, var(--background) 88%, rgba(92,63,50,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(92,63,50,1) 0%, var(--background) 12%, var(--background) 88%, rgba(92,63,50,1) 100%);
    background: linear-gradient(90deg, rgba(92,63,50,1) 0%, var(--background) 12%, var(--background) 88%, rgba(92,63,50,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c3f32",endColorstr="#5c3f32",GradientType=1);}

.unselectable {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none; }

div>.display-none {
    display:none; }

#content{
    flex: 1 0 auto; }

#main-content {
    display:flex;
    justify-content: center; }

#canvas {
    background-color: white;
    display: flex;
    flex: 0 0 auto;
    max-width:430px;
    max-height:430px;
    flex-wrap: wrap; }

.grid {
    float:left;
    /*used box-shadow instead of border property because it's
    impossible to achieve a 1px border due to border stacking*/
    box-shadow: 0 0 0 1px lightgray; }

#top-panel {
    text-align: right;
    width: 430px;
    margin:auto;
    margin-bottom: 0.3rem; }

.toggle-grid {
    color: var(--light-yellow-accent); }
.toggle-grid:hover {
    color: white;);
    cursor: pointer; }
.toggle-grid:active {
    color: var(--yellow-accent);
    cursor: pointer; }

.side-panel {
    display:flex;
    max-width: 150px;
    min-width: 150px;
    justify-content: center; }
.right{
    transform: translateY(12px); }

div .long-btn {
    border-radius: var(--border-radius);
    width:100px; /* 2 color width + gap width*/
    height:42px; }
div .long-btn:hover {
    border: 3px solid var(--yellow-accent);
    cursor: pointer; }
div .long-bitn:active{
    outline:1px solid var(--yellow-accent);}

#colors {
    align-content: center;
    flex-wrap: wrap;
    gap:var(--margin-1);; }

.color {
    border: 3px solid var(--light-yellow-accent);
    width:42px;
    height:42px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);}
.color:hover {
    border: 3px solid white;
    cursor: pointer;
    filter:brightness(110%);}
.color:active {
    border: 3px solid var(--yellow-accent);
    outline: 1px solid var(--yellow-accent);}

#eraser {
    background-color: var(--glass);
    color: var(--light-yellow-accent);
    padding:0.2em; }

#rainbow {
    background: url(images/rainbow-icon.webp);
    background-size: cover; }

.color-picker {
    font-family: "HalfBoldPixel-7";
    font-size: 0.6rem;
    background-color: var(--glass);
    color: var(--light-yellow-accent);
    text-align: left;
    padding-left: 0.6rem;}

.clr-field button{
    border-radius: 0px 1rem 1rem 0px;
    z-index: -1; }

#all-sizes {
    flex-direction: column;
    align-items: center;
    gap:var(--margin-2); } 

.small-text {
    word-spacing: -0.3rem;
    color:var(--yellow-accent);
    font-family: "HalfBoldPixel-7";
    font-size: 1rem; }

#size-presets>.small-text {
    word-spacing: -0.4rem;
    margin-bottom: -0.7rem; }

label.small-text {
    display:inline-block;
    margin-bottom: 0.3rem; }

#size-presets {
    display: inherit;
    flex-direction: column;
    align-items: center;
    gap:var(--margin-1); }

.size-preset {
    background-color: black;
    color:var(--yellow-accent);
    border: 3px solid var(--light-yellow-accent);
    font-family: "HalfBoldPixel-7";
    font-size: var(--large-text);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius); }

.current-preset {
    background-color: var(--yellow-accent);
    color: var(--light-yellow-accent); }
div .current-preset:hover {
    border: 3px solid var(--light-yellow-accent); }

#custom-size {
    background-color: var(--glass);
    color:var(--light-yellow-accent);
    border: 3px solid var(--light-yellow-accent);
    font-family: "HalfBoldPixel-7";
    font-size: var(--large-text);
    box-shadow: var(--shadow);
    text-align: center;}
#custom-size:hover {
    border: 3px solid var(--yellow-accent); }
#custom-size:focus {
    border: 3px solid var(--yellow-accent);
    outline: none;
    color:var(--yellow-accent); }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }
input[type=number] {
    -moz-appearance: textfield; }

.warning {
    color:indianred;
    visibility: hidden;
    margin: 0.5rem 0.5rem 0 0.5rem;
    font-size: 0.75rem; }

#clear-button {
    background-color:var(--yellow-accent);
    color: var(--light-yellow-accent);
    font-family: "HalfBoldPixel-7";
    font-size: var(--large-text);
    box-shadow: var(--shadow);
    border: 3px solid var(--light-yellow-accent);
    margin-top: var(--margin-1);
    cursor: pointer;
    height: 38px;
    width: 82px;
    border-radius: var(--border-radius);}
#clear-button:hover {
    filter:brightness(110%); }

footer {
    justify-self: flex-end;
    width: 100%;
    background-color: var(--glass);
    padding: 0.6rem;
    border-top: 3px solid var(--light-yellow-accent); }
footer img {
    width: 15px;
    height: 15px;
    margin-right: 0.2rem; }

footer a {
    color: var(--light-yellow-accent);
    font-family: "HalfBoldPixel-7";
    font-size:0.8rem;
    display: flex;
    justify-content: center;
    align-items: center; }

@media screen and (max-width: 930px), 
       screen and (max-height: 620px) {
h1 {
    font-size: 2rem; 
    margin:0.7rem;}
#canvas {
    max-width: 350px;
    max-height: 350px; }
#top-panel {
    max-width: 350px; }
.side-panel {
    max-width: 118px;
    min-width: 118px; }
div .long-btn {   
    width:86px; /* 2 color width + gap width*/
    height:38px; }
#colors {
    gap:10px; }
.color {
    width:38px;
    height:38px; }
#eraser {
    padding:0.18em; }       
.color-picker { 
    font-size: 0.6rem;
    padding-left: 0.2rem; }
#sizes {
    gap:14px; } 
.small-text{
    word-spacing: -0.4rem;
    font-size:0.8rem; }           
#size-presets>.small-text {
    word-spacing: -0.4rem;
    margin-bottom:-0.45rem; }          
#size-presets {
    gap:10px; }
.size-preset {
    font-size: var(--large-text);
    width:86px; /* 2 color width + gap width*/
    height:38px; }
#custom-size {
    font-size: var(--large-text);
    width:86px; /* 2 color width + gap width*/
    height:38px; }
#clear-button{
    margin-top: 14px;
    font-size: 0.9rem;
    box-sizing: border-box;
    width:90px; /* 2 color width + gap width*/
    height:32px; }
footer {
    padding: 0.45rem; }
footer a {
    font-size: 0.7rem; }
footer img {
    width: 15px;
    height: 14px;}}