html {
  font-family: "Lugrasimo", cursive;
  font-weight: 400;
  color: var(--text);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--linkHover);
}

a:active {
  color: var(--linkActive);
}

input,
textarea,
select {
  box-sizing: border-box;

  font-family: sans-serif;
  font-size: 0.85em;
}

button {
  box-sizing: content-box;
  vertical-align: top;

  aspect-ratio: 150 / 36;
  width: 140px;

  margin: 0;
  border: 0;
  padding: 2px 0;

  background-color: unset;
  background-image: url('button-normal.png');
  background-size: contain;

  font-family: "Lugrasimo", cursive;
  font-size: 0.8em;
  color: var(--link);

  cursor: pointer;
}

button:hover {
  color: var(--linkHover);
}

button:active {
  padding: 4px 0 0;

  color: var(--linkActive);

  background-image: url('button-down.png');
}

button.disabled,
button.disabled:hover,
button.disabled:active {
  padding: 2px 0;

  color: var(--oldText);

  background-image: url('button-disabled.png');
}

.fullscreen {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  margin:           0;

  overflow: clip;
}

.topTitle {
  margin-top: 0;
}

.hidden {
  display: none;
}

.centre {
  text-align: center;
}

.justify {
  text-align: justify;
}

.error {
  color: red;
}

.dropDown {
  box-sizing: content-box;

  margin: 0;
  border: 0;

  color: var(--link);

  cursor: pointer;
}

.dropDown:hover {
  color: var(--linkHover);
}

.dropDownContent {
  display: none;
}

.dropDown:hover + .dropDownContent,
.dropDownContent:hover {
  display: block;
}