* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
  background-color: rgb(202, 197, 197);
}

.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  padding: 40px;
}

.main-content > .header > h1 {
  font-size: 3rem;
}

.buttons > button {
  margin: 10px;
  font-size: 1rem;
}

.buttons > button:hover {
  background-color: rgba(224, 241, 241, 0.774);
}

#reading_lit2,
#reading_lit3,
#reading_lit4,
#reading_lit5,
#reading_lit6 {
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#result_box {
  margin-top: 15px;
  border: 2px solid black;
  padding: 20px;
  width: 70vw;
  height: 40vh;
  font-size: 2.5rem;
}

#show_button,
#save_button,
#clear_storage_button,
#clear_cerc_button,
#copy_cerc_button,
#copy_storage_button {
  font-size: 1rem;
  margin: 10px;
  padding: 15px;
  cursor: pointer;
  border-radius: 10px;
}

:root {
  --clear-button-background: 179, 37, 37;
  --save-show-button-background: 54, 122, 59;
  --copy-button-background: 172, 221, 250;
}

#clear_storage_button,
#clear_cerc_button {
  background-color: rgba(var(--clear-button-background), 0.432);
}

#clear_storage_button:hover,
#clear_cerc_button:hover {
  background-color: rgba(var(--clear-button-background), 0.632);
}

#save_button,
#show_button {
  background-color: rgba(var(--save-show-button-background), 0.205);
}

#save_button:hover,
#show_button:hover {
  background-color: rgba(var(--save-show-button-background), 0.405);
}

#copy_cerc_button,
#copy_storage_button {
  background-color: rgba(var(--copy-button-background), 0.382);
}

#copy_cerc_button:hover,
#copy_storage_button:hover {
  background-color: rgba(var(--copy-button-background), 1);
}

#save_box {
  border: 2px solid black;
  padding: 20px;
  width: 70vw;
  font-size: 1rem;
  max-height: 200px;
  overflow: auto;
}

#save_box > li {
  margin-bottom: 15px;
}

.claim_color {
  color: black;
  background-color: rgba(54, 122, 59, 0.281);
}
.evidence_color {
  color: black;
  background-color: rgba(241, 241, 65, 0.534);
}
.reasoning_color {
  color: black;
  background-color: rgba(224, 142, 20, 0.887);
}
.transition_color {
  color: black;
  background-color: rgba(172, 221, 250, 0.582);
}
.conclusion_color {
  color: black;
  background-color: rgba(179, 37, 37, 0.555);
}

footer {
  margin-top: 15px;
}

a:visited {
  color: inherit;
}

/* MEDIA QUERIES - TABLETS */

@media screen and (max-width: 1024px) {
}

/*  MEDIA QUERIES - MOBILE PHONES  */

@media screen and (max-width: 600px) {
}