index.css

* {  
 box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0; 
  background: url('images/library-header copy.jpg') no-repeat center center fixed;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover; 
  background-size: cover;
}

body {
  font: 'Source Sans Pro', sans-serif;
}

h1, h2 {
  font: "Playfair Display", serif;
}

fieldset {
  border: none;
}

.start_page {
  width: 100%; 
}

.start_page_h1 {
  text-align: center;
  margin-top: 20%;
  font-size: 1.5em;
  color: #BF7417; 
  text-shadow: 
		-3px -3px 0  #402708,
		3px -3px 0  #402708,
		-3px 3px 0  #402708,
		3px 3px 0  #402708;
}

.start_test, .start_page, .question_page,
.answer_page, .results_page,
.answer_field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   
}

.question_page_h1, .answer_page_h1, .results_page_h1 {
  margin-top: 50px; 
  margin-left: 5px; 
  text-align: left;
  font-size: 1.2em; 
  color: #BF7417; 
  text-shadow: 
		-2px -2px 0  #402708,
		2px -2px 0  #402708,
		-2px 2px 0  #402708,
		2px 2px 0  #402708;
}

.start_page_h2, .answer_page_h2, .results_page_h2 { 
  color: #004D73;
  font-size: 1em;
  text-shadow: 3px 3px 4px #05F2BF;
  text-align: center; 
  margin-bottom: 15px; 
  background-color: rgba(255, 165, 56, 0.5);
  width: 100%; 
}

.start_button {
  width: 200px;
  height: 60px;
  border-radius: 25px;
  font-size: 20px;
  border: 1px solid #BF7417;
  background-color: #FFA538;
  color: #402708; 
  margin-top: 70px; 
}

.question_form {
  margin: 0; 
}

span {
  display: inline-block; 
  padding: 10px 5px 10px 10px; 
}

.answer {
  margin-bottom: 15px; 
}

.option, .answer {
  display: flex; 
}

input {
  align-self: center; 
  margin-left: 5px;
  margin-right: 5px;  
}

label {
  margin: 10px 0px 10px 0px; 
  cursor:pointer; 
}

.option, .answer {
  font-size: 18px;
}

label:hover {
  background-color: rgba(5, 242, 191, 0.5);
}

.light, .answer {
  background-color: rgba(255, 165, 56, 0.80)
}

.dark {
  background-color: rgba(191, 116, 23, 0.80); 
}

.question_page_button:focus, 
.start_button:focus,
.next_button:focus,
.restart_button:focus,
.question_page_button:hover,
.start_button:hover,
.next_button:hover,
.restart_button:hover {
  background-color: #CC9F0E;
}

.question_page_button, .next_button, .restart_button {
  margin-top: 15px; 
  width: 150px;
  height: 40px;
  border-radius: 25px;
  font-size: 15px;
  border: 1px solid #BF7417;
  background-color: #FFA538;
  color: #402708; 
}

.next_button {
  margin-top: 35px; 
}

.restart_button {
  margin-top: 50px; 
}

input {
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none; 
  border: 2px solid white; 
  border-radius: 50%; 
  height: 12px; 
  width: 12px; 
  transition: 1s ease; 
}

input:checked {
  border: 6px solid #004D73; 
}

.button_container {
  text-align: center; 
}

.image {
  -moz-box-shadow: 8px 8px 4px 1px rgba(64, 39, 8, 0.5);
  -webkit-box-shadow: 8px 8px 4px 1px rgba(64, 39, 8, 0.5);
  box-shadow: 8px 8px 4px 1px rgba(64, 39, 8, 0.5);
}

img {
  object-fit: cover; 
  height: 255px;
  width: 175px; 
  display: block;
}

table {
  border-spacing: 0px 10px;
  margin-left: 10px; 
  margin-right: 10px; 
}

th, td {
  font-size: 20px; 
  padding: 10px;
}

.col_1 {
  color: #004D73;
  font-weight: bold; 
  text-align: center; 
}


@media only screen and (min-width: 375px) {

  .question_answer_form {
    margin-top: 0px; 
  }

  .start_test {
    margin-top: 80px; 
  }

  .start_button {
    margin-top: 110px; 
  }

  .start_page_h2, 
  .answer_page_h2, 
  .results_page_h2 {
    margin-top: 40px; 
    margin-bottom: 30px; 
  }
}

@media only screen and (min-width: 700px) {

  .question_answer_form {
    margin-top: 0px;
  }
  
  .start_page_h1 {
    margin-top: 0px;
    font-size: 2em; 
  }

  .answer_page_h1, .answer_page_h2 {
    margin-top: 0px; 
  }

  .question_page_h1, 
  .answer_page_h1, 
  .results_page_h1 {
    margin-left: 15px; 
  }

  .start_page_h2, 
  .answer_page_h2, 
  .results_page_h2 {
    font-size: 1.5em; 
    padding-left: 15px;
    padding-right: 15px; 
  }

  .start_page_h2 {
    margin-bottom: 0px; 
  }

  .start_button {
    margin-top: 80px;
  }

  span {
    font-size: 25px; 
  }

  input {
    height: 20px;
    width: 20px; 
  }

  input:checked {
    border: 10px solid #004D73;
  }

  img {
    height: 315px; 
    width: 200px; 
    display: block;
    margin-right: auto;
    margin-left: auto;  
  }

  th, td {
    font-size: 30px; 
  }

  .question_page .button_container {
    margin-top: 40px; 
  }

  .question_page_button, .next_button, 
  .restart_button {
    width: 200px;
    height: 60px;
    border-radius: 25px;
    font-size: 20px;
    border: 1px solid #BF7417;
    background-color: #FFA538;
    color: #402708;  
  }   
}

@media only screen and (min-width: 1250px) {

  .question_page_h1, .answer_page_h1, .results_page_h1 {
    margin-left: 80px;
  }
}