index.css

body,
html {
  touch-action: none;
  margin: 0;
  border: 0 none;
  padding: 0;
  background-color: wheat;
  width: 100%;
  height: 100%;
}

* {
  font-family: 'Accidental Presidency', monospace;
  font-optical-sizing: none;
  font-size-adjust: calc(2/3);
}

#app {
  padding: 1rem;
}

#credits {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

#settings {
  margin-top: 1rem;
  height: 240px;
}

.wfmenu {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  width: 240px;
  height: 165px;
}

#canvas {
  display: block;
  margin: 0;
  color: white;
}

#canvas:focus {
  outline: none;
}

.godot {
  font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
  color: #e0e0e0;
  background-color: #3b3943;
  background-image: linear-gradient(to bottom, #403e48, #35333c);
  border: 1px solid #45434e;
  box-shadow: 0 0 1px 1px #2f2d35;
}

.wfmenu_button {
  background-color: blanchedalmond;
  border: none;
  border-bottom-style: groove;
  color: rgb(69.5, 42, 19);
  border-color: rgb(139, 69, 19);
  width: 240px;
  font-size: medium;
  height: 100%;
  border-radius: 15px;
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.wfmenu_button:hover {
  background-color: burlywood;
  color: rgb(245, 245, 245);
  height: 200%;
  transition-property: height;
  transition-duration: 0.20s;
  transition-timing-function: ease-out;
}

.wfmenu_button:active {
  background-color: rgb(75, 47, 25);
  border-color: rgb(36, 18, 2);
  border-bottom-style: none;
  border-top-style: groove;
}


input {
  background-color: whitesmoke;
  border-radius: 9px;
  color: rgb(69.5, 42, 19);
  width: 240px;
  border: none;
}


#stuff {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}