#myInput {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  padding: 10px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 16px; /* Increase the font-size */
  position: center;
  text-align:center;
  width: 300px;
  margin: 0 auto;
  display: block;
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 10px 20px 12px 40px;
  margin: 25px;
}
#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

/* id = #, class = . *.
/* id's and classes for HTML designing */
body {
  background-color: #8FBC8F;
  font-family: "Times New Roman", serif;
}

/* id's are usually only used once */
#header {
  background-color:beige;
  color:coral;
  padding:30px;
  text-align:center;
  font-family:"Times New Roman";
  border:5px solid crimson;
  font-size: 75px;
}

.headertext {
  background-color:lightpink;
  color:black;
  padding:15px;
  font-family:"Times New Roman";
  font-size: 30px;
}

.titleHeader {
  padding: 10px;
  text-align: center;
  font-size: 50px;
  font-family: "Times New Roman", serif;
}

/* for mission statement */
#mission {
  background-color:beige;
  color:black;
  padding:30px;
  text-align:center;
  font-family:"Times New Roman";
  border:5px solid crimson;
  font-size: 45px;
}

/* makes gap smaller for hyperlinks */
.hyperlinks {
  font-size: 30px;
  padding:45px;
}

/* javascript css */

.question{
  font-size: 30px;
  margin-bottom: 10px;
}

.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
}

.answers label{
  display: block;
  margin-bottom: 10px;
}

button{
  font-family: 'Work Sans', sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin-bottom: 20px;
  width:100%;
}

button:hover{
  background-color: #38a;
}

.slide{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.active-slide{
  opacity: 1;
  z-index: 2;
}
.quiz-container{
  position: relative;
  height: 200px;
  margin-top: 40px;
}