@import url(https://fonts.googleapis.com/css?family=Architects+Daughter:regular);

brightGreenTheme {
  --green-primary-color: #64d6cd;

  --green-secondary-color: #e1f5ee;

  --green-tertiary-color: #22aaa1;

  --green-quaternary-color: #dedede;
}

lightTheme {
  --light-primary-color: #e1f5ee;

  --light-secondary-color: #29bbb1;

  --light-tertiary-color: #c3c5cf;

  --light-quaternary-color: #3c3f49;
}

darkTheme {
  --dark-primary-color: #3c3f49;

  --dark-secondary-color: #29bbb1;

  --dark-tertiary-color: #6c6f7c;

  --dark-quaternary-color: #e1f5ee;
}

body {
  background-color: #64d6cd;
}

.container {
  background-color: #e1f5ee;
  border-radius: 1pc;
  max-width: 600px;
  margin: auto;
  padding: 10px;
  position: relative;
  margin-bottom: 40px;
  box-shadow: 4px 2px 2px rgba(0, 0, 0, 0.3);
}

h1 {
  text-align: center;
  font-size: 500%;
  background-color: #22aaa1;
  border-radius: 1pc;
  max-width: 700px;
  margin: auto;
  padding: 10px;
  margin-bottom: 40px;
  margin-top: 40px;
  box-shadow: 4px 3px 3px 2px rgba(0, 0, 0, 0.4);
  font-family: Architects Daughter;
}

.game-area {
  text-align: center;
  background-color: #22aaa1;
  border-radius: 1pc;
  width: 85%;
  margin: auto;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.setup-area {
  text-align: center;
  background-color: #22aaa1;
  border-radius: 1pc;
  width: 85%;
  margin: auto;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  column-count: 2;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

h3 {
  text-align: center;
  font-size: 200%;
  background-color: #22aaa1;
  border-radius: 1pc;
  width: 75%;
  margin: auto;
  padding: 10px;
  font-family: Architects Daughter;
}

.display {
  font-size: larger;
  font-family: Architects Daughter;
}

.range-button {
  text-align: center;
  margin: auto;
}

.game-buttons {
  column-count: 2;
  width: 30%;
  padding-top: 10px;
  margin: auto;
}

textarea {
  resize: none;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
  font-size: 200%;
  text-align: center;
  font-family: Architects Daughter;
  background-color: #dedede;
}

textarea:hover {
  background-color: white;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
}

button:hover {
  background-color: #64d6cd;
}

button {
  cursor: pointer;
  font-size: 15px;
  border-radius: 1pc;
  font-family: Architects Daughter;
}