:root {
  --text-color: white;
  --input-bg: #333;
  --correct-color: #5cb85c;
  --incorrect-color: #d9534f;
  --font-family: "Fira Code", monospace;
  --accent-color: #ffd700;
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#test_container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px;
  font-family: var(--font-family);
  border: 2px solid #ffd700;
}
* {
  box-sizing: border-box;
}

/* overall dark mode theme */
body {
  background-color: #1c1c1c;
  color: #f1f1f1;
  padding: 20px;
}
/* golden accent color */
#test_container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px;
  font-family: var(--font-family);
  border: 2px solid #ffd700;
}

#test_content {
  max-width: calc(
    100vw * 3 / 4
  ); /* keep the content inside to max width of 3/4 of the viewport */
  margin: 0 auto;
  padding: 10px;
  font-family: var(--font-family);
}

#input_area {
  padding: 10px; /* add padding to the text area */
  width: 100%; /* make the textarea full width */
  margin-top: 20px; /* add some top spacing */
  height: 200px; /* increase the height of textarea */
  font-family: var(--font-family);
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 1.2rem;
}

#result {
  font-size: 1.2em; /* make the text a little bigger */
  font-weight: bold; /* make the text bold */
  color: #ffd700; /* set the accent color */
  font-family: var(--font-family);
}

#test_text {
  font-size: 1.5rem;
}

.correct {
  color: var(--correct-color);
}

.incorrect {
  color: var(--incorrect-color);
}

#start_new_test {
  background-color: var(--accent-color);
  color: var(--light-color);
  font-family: var(--font-family);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}