html {
  background-color: #ff00ff;
  color: white;
  font-family: sans-serif;
  padding: 0;
}

body {
  padding: 0;
  margin: 0;
}

#message {
  position: fixed;
  top: 2%;
  left: 2%;
  font-size: large;
  line-height: 250%;
}

#message a {
  cursor: pointer;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background: transparent;
}

.modalContent {
  background-color: var(--accent-vdark);
  max-width: 40ch;
  height: 100%;
  position: relative;
  animation: open 0.3s;
  overflow-y: auto;
  padding-left: 1ch;
  text-align: left;
  border-right: 2px solid var(--accent);
}

.modalContent input[type=color] {
  background-color: transparent;
  border: none;
  display: block;
}

.modalContent input[type=range] {
  appearance: none;
  background: var(--accent);
  height: 2px;
}

.modalContent input[type=range]:disabled {
  background: red;
}

.modalContent input[type=reset] {
  max-width: 18ch;
  background: var(--accent-vvdark);
  border: 2px solid var(--accent-dark);
  color: white;
  transition: border-color 0.25s;
}

.modalContent input[type=reset]:hover {
  border: 2px solid var(--accent);
}

form {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1ch;
}

.hide {
  animation: open reverse 0.3s;
}

@keyframes open{
  from {
    left: -600px;
    opacity: 0;
  }

  to {
    left: 0;
    opacity: 1;
  }
}