html {
    font-size: 40px;
}

@media (max-width: 1024px) {
  html {
    font-size: 35px; /* Tablet */
  }
}

@media (max-width: 768px) {
  html {
    font-size: 30px; /* Mobile */
  }
}

@media (max-width: 576px) {
  html {
    font-size: 20px;
  }
}

body {
    background-color: #212831;
    color: #eeeeee;
}

.title {
    color: #ffc65d;
}

.colorChoiceBtn {
    cursor: pointer;
}

button {
    border: 1px solid #eeeeee;
    background-color: #101720;
    color: #eeeeee;
    padding: 0.2rem;
    border-radius: 0.2rem;
    transition: all 0.2s ease;
}

button:hover, .active{
  color: #ffc65d;
  border-color: #ffc65d;
  box-shadow: 0 0 10px #ffc65d;
  transform: translateY(-2px);
}

button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 0 5px #ffc65d;
}

.footer {
    background-color: #101720;
}

.footer a {
    color: #ffc65d;
}

.sketchBoard {
    background-color: antiquewhite;
}