body {
  font-family: Arial, sans-serif;
  background-color: #36454f;
  text-align: center;
  color: #d3d3d3;
  font-size: 4vmin;
}

a {
  color: #457e82;
}

h1 {
  font-family: "H1Font", sans-serif;
  font-size: 16vmin;
  margin: 2vmin 1vmin 1vmin 1vmin;
  color: #457e82;
  text-shadow: 2px 2px 8px #040720;
}

.letter-square,
.small-letter-square {
  border-style: solid;
  align-content: center;
  text-align: center;
  aspect-ratio: 1;
}

#boggle-container > .letter-square {
  font-size: 13vmin;
}

#big-boggle-container > .small-letter-square {
  font-size: 10vmin;
}

#countdown-container > .letter-square {
  font-size: 8vw;
}

#word-squares-container > .letter-square {
  font-size: 16vmin;
}

#random-letter-container > .letter-square {
  font-size: 50vmin;
}

.game-container {
  display: grid;
  aspect-ratio: 1;
  width: 70vw;
  max-height: 70vmin;
  max-width: 70vmin;
  margin: 1vmin auto;
}

#boggle-container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

#big-boggle-container {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  display: none;
}

#countdown-container {
  display: flex;
  justify-content: center;
}

#countdown-container > div {
  aspect-ratio: 1;
  width: 10vw;
}

#word-squares-container {
  grid-template-columns: 1fr 1fr 1fr;
}

#button-container {
  margin: 3vmin;
}

#radio-container {
  display: inline-block;
  text-align: left;
  margin: 1vmin;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3c6e71;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: #d3d3d3;
  text-align: center;
  padding: 1vmin 2vmin;
  text-decoration: none;
}

nav li a:hover {
  background-color: #457e82;
}

.dropdown:hover .submenu {
  display: block;
}

.submenu {
  display: none;
  position: absolute;
  z-index: 1;
}

.submenu li {
  float: none;
}

button {
  font-size: 4vmin;
  background-color: #3c6e71;
  border: solid;
  border-radius: 3vmin;
  color: #d3d3d3;
  margin: 2vmin;
}

button:hover {
  background-color: #457e82;
  cursor: pointer;
}

.text-area {
  width: 70vw;
  height: 30vh;
  margin: 2vmin;
  background-color: #d3d3d3;
}

input {
  margin: 1vmin;
  background-color: #d3d3d3;
}

#output-area {
  margin: 2vmin;
  height: 55vh;
  text-align: left;
  font-size: 5vmin;
  column-count: 3;
  column-fill: auto;
  overflow: auto;
  padding: 1vmin;
}

@media (orientation: portrait) {
  #output-area {
    column-count: 2;
  }
  #game-and-timer {
    flex-direction: column;
  }
}

#square {
  border: solid;
}

#circle {
  border: solid;
  border-radius: 50%;
}

#game-and-timer {
  display: flex;
  margin: 5vmin;
}

#timer {
  margin: 2vmin;
}

#timer-numbers {
  font-size: 26vmin;
}

#game-and-buttons {
  flex-grow: 2;
  margin: 2vmin;
}

.large-btn {
  font-size: 6vmin;
}

.adjust-timer-label {
  font-size: 3vmin;
}

.timer-input {
  width: 12vmin;
  height: 3vmin;
  font-size: 3vmin;
}

#countdown-timer-container {
  column-count: 2;
  column-gap: 0;
}

#scattergories-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.scattergories-section {
  width: 60vmin;
}

#random-letters-btn {
  margin: 1vmin;
}

#category-list {
  font-size: 5vmin;
}

.category {
  text-align: left;
}

#hard-category {
  display: none;
  margin-top: 0;
}

#easy-category {
  margin-bottom: 0;
}

#underscores-checkbox-container {
  display: none;
}

#random-word-container {
  font-size: 20vmin;
  border: solid;
}

#random-word-categories {
  font-size: 6vmin;
  margin: 2vmin;
}

select {
  font-size: 4vmin;
}

@font-face {
  font-family: "TracingFont";
  src: url(./tracing-font.ttf);
}

@font-face {
  font-family: "H1Font";
  src: url(./h1-font.ttf);
}

.tracing-font {
  font-family: "TracingFont", sans-serif;
  font-size: 5vmin;
}

#manual-font-size {
  display: none;
  font-size: 4vmin;
}

#rules-container {
  display: none;
}

#a1-list-container,
#a2-list-container,
#b1-list-container {
  display: none;
}

 textarea{
  font-size: 4vmin;
}

input[type="checkbox"] {
  width: 3vmin;
  height: 3vmin;
}