@font-face {
  font-family: 'Great Vibes';
  src: url(./fonts/Great_Vibes/GreatVibes-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Sans Mono';
  src: url(./fonts/Noto_Sans_Mono/NotoSansMono-VariableFont_wdth\,wght.ttf) format('truetype');
}

:root {
  --etch-red: #ED2027;
  --etch-yellow: #FFF301;
}

/* Main */

main {
  display: flex;
  flex-direction: column;
  margin: auto auto;
  background-color: var(--etch-red);
  border-radius: 7px;
}

.title {
  font-family: 'Great Vibes', cursive;
  font-size: 3.5rem;
  color: var(--etch-yellow);
  text-align: center;
  padding: 15px;
}

.container-middle {
  display: flex;
}

/* Tabs */

.tab-left,
.tab-right {
  width: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

/* Buttons */

[type='color'],
button {
  cursor: pointer;
  width: 85px;
  height: 30px;
  border-radius: 3px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

[type='color']:active,
button:active,
.selected {
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

[type='color'] {
  background-color: white;
  border: 1px solid black;
}

button {
  font-family: 'Noto Sans Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  background-color: var(--etch-yellow);
  border: 1px solid var(--etch-yellow);
}

.canvas {
  height: 400px;
  aspect-ratio: 1 / 1;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(32, 1fr);
  grid-template-rows: repeat(32, 1fr);
  cursor: pointer;
}

[for='resize'] {
  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  font-weight: 700;
  color: var(--etch-yellow);
}

/* Range */

[type="range"] {
  width: 125px;
}

[type="range"] {
  -webkit-appearance: none;
  background-color: var(--etch-red);
}

[type="range"]:focus {
  outline: none;
}

[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  cursor: pointer;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
  background-color: var(--etch-yellow);
  border-radius: 5px;
  border: 1px solid rgb(255, 215, 0);
}

[type="range"]::-webkit-slider-thumb {
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
  border: 1px solid black;
  height: 35px;
  width: 10px;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}

.container-bottom {
  display: flex;
  justify-content: space-between;
}

/* Knobs */

.knob-left,
.knob-right {
  height: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: whitesmoke;
  margin: 15px;
}

.knob-left {
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}

.knob-right {
  box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}

/* Footer */

footer {
  margin-top: 0;
}