:root {
    --bg-primary: #f5f1e8;
    --bg-secondary: #ebe5d8;
    --bg-tertiary: #e8e2d5;
    --bg-input: #ffffff;
    --text-primary: #2a2a2a;
    --text-purple: #52147c;
    --text-muted: #8a8a8a;
    --accent-lavender: #9b7eb5;
    --accent-red: #c94d4d;
    --border-primary: #c9c0b0;
    --border-muted: #d4d0c5;
}

body{color:var(--text-primary);background:var(--bg-primary);margin:1em auto;padding:1em;font:14px monospace;}
footer{clear:both;margin-top:2em;}
footer img{height:16px;vertical-align:middle;margin-bottom:3px;}
a{color:var(--accent-lavender);text-decoration:none;}
a:hover,.active-page{color:var(--accent-red);}
nav{font-size:17px;}
code,dt{color:var(--accent-lavender);}
#list th,tr:nth-child(even){background:var(--bg-secondary);}
dt{position: relative; display: inline-block;}
dd{padding-bottom: 2px;}
.multicol{column-count:2;white-space:nowrap;}
@media all and (max-width: 900px) {.multicol{column-count:1;}}

@font-face {
    font-family: "DotoBlack";
    src: url("fonts/Doto-Black.ttf") format("truetype");
}

button, input[type="submit"] {
    background-color: var(--bg-tertiary);   /* cream background */
    color: var(--text-primary);              /* dark text */
    border: 1px solid var(--accent-lavender);   /* lavender border */
    padding: 0.5em 1em;
    font: 14px monospace;        /* match body font */
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

button:hover, input[type="submit"]:hover {
    background-color: var(--accent-lavender);   /* lavender fill on hover */
    color: var(--bg-primary);              /* cream text */
}

button:disabled, input[type="submit"]:disabled {
    background-color: var(--border-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    background-color: var(--bg-input);   /* white background */
    color: var(--text-primary);              /* dark text */
    border: 1px solid var(--border-primary);   /* subtle border */
    padding: 0.4em 0.6em;
    font: 14px monospace;        /* match your body font */
    border-radius: 4px;
    width: 100%;                 /* make them fill parent container */
    box-sizing: border-box;      /* include padding in width */
}

input:focus,
textarea:focus {
    border-color: var(--accent-red);       /* red highlight on focus */
    outline: none;               /* remove browser default outline */
}


#grid {
      display: grid;
      grid-template-columns: repeat(64, 10px);
      grid-template-rows: repeat(32, 10px);
      gap: 1px;
      margin: 20px;
      width: fit-content;
      height: fit-content;
    }

    .pixel {
      background: rgb(255, 255, 255);
      cursor: pointer;
      
    }

    #controls {
      margin: 10px;
    }

    input[type="color"], button {
      margin: 2px;
      padding: 2px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
    }

    button {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      margin: 5px;
      padding: 5px;
      border-radius: 6px;
      border: 1px solid var(--accent-lavender);
      cursor: pointer;
    }

    button:hover {
      background: var(--accent-lavender);
      color: var(--bg-primary);
    }

    .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Remove this container when use*/
.component-title {
  width: 100%;
  position: absolute;
  z-index: 999;
  top: 30px;
  left: 0;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #888;
  text-align: center;
}

/* The switch - the box around the slider */
.container {
  display: inline-block;
  vertical-align: middle; /* keeps it aligned with the text */
}

/* Hide default HTML checkbox */
.checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;   /* track width */
  height: 22px;  /* track height */
  background-color: var(--border-muted);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s ease-out;
}

.slider {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}

.checkbox:checked + .switch {
  background-color: var(--accent-red);
}

.checkbox:checked + .switch .slider {
  left: 20px; /* track width (40) - knob width (18) - padding (2) */
}