/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap');


body {
  background-color: #edf2f6;
  color: #050316;
  font-family: Verdana;
  margin-right: 10em;
  margin-left: 10em;
}




/* unvisited link */
a:link {
  color: #edf2f6;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #8f8185;
}

/* mouse over link */
a:hover {
  color: #8bcbf9;
}

/* selected link */
a:active {
  color: #0a2461;
}


/* lesson body unvisited link */
.bodylink:link {
  color: #991738;
  text-decoration: underline;
}

/* lesson body visited link */
.bodylink:visited {
  color: #620f24;
  text-decoration: underline;
}

/* lesson body mouse over link */
.bodylink:hover {
  color: #8bcbf9;
}

/* lesson body selected link */
.bodylink:active {
  color: #0a2461;
}



p {
  margin-right: 1em;
  margin-left: 1em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-bottom: 1em;
  
}

.sectionheader {
  font-size: 2em;
  text-align: center;
  
}

.levelbox {
  margin-top: 5em;
  margin-bottom: 5em;
  
}

.buttonbox {
  margin-right: 10em;
  margin-left: 10em;
  border: 0;
  
}

.levelbutton {
  width: 100%;
  font-family: "Libre Baskerville", serif;
  font-size: 2em; 
  background-color: #991738;
  color: #edf2f6;
  text-align: left;
  padding: 0.5em;

}

h1 {
 background-color: #0a2461;
 color: #edf2f6;
 text-align: center;
 font-size: 4em;
 font-family: "Henny Penny";
}

h2 {
 background-color: #0a2461;
 color: #8bcbf9;
 text-align: center;
 font-size: 2em;
 font-family: "Libre Baskerville";
 padding: 0.5em;

}



.menu {
  background-color: #991738;
  width: 20%;
  vertical-align: top;
  
}

.lesson {
  background-color: #edf2f6;
  padding: 0;
  vertical-align: top;
  width: 80%;
  
}

.lessonmenu {
  background-color: #991738;
  color: #edf2f6;
  font-family: "Libre Baskerville";
  font-size: 1.5em;
  border: 0;
  margin: 0;
  width: 100%;
  padding: 0.25em;
  
}

.activelesson {
  background-color: #620f24; 
  color: #8f8185;
  font-family: "Libre Baskerville";
  font-size: 1.5em;
  border: 0;
  margin: 0;
  width: 100%;
  padding: 0.25em;
}

.buttonpara {
  margin: 0;
  padding: 0;
  border: 0;
  
}

.menuprev {
  width: 5em;
  font-family: "Young Serif";
  border: 0;
  margin: 0;
  font-size: 2em;
  color: #991738;
  background-color: #0a2461;
  
  
}


.menunext {
  width: 5em;
  font-family: "Young Serif";
  border: 0;
  margin: 0;
  font-size: 2em;
  color: #991738;
  float: right;
  background-color: #0a2461;
  
}



.lessonheader {
  color: #edf2f6;  
  font-family: "Libre Baskerville", serif;
  font-size: 3em;
  background-color: #0a2461;
  text-align: center;
  padding-bottom: 0;

}


.lessontitle {
  color: #050316;
  font-family: "Libre Baskerville", serif;
  font-size: 2em;
  text-align: center;
  text-decoration: underline;
  background-color: #8bcbf9;
  padding: 1em;
  border: 0;
  margin: 0;
  
}

.definition { 
 color: #0a2461;
 padding: 1em;
  
}


.lessonbody {
 border-top: 3px;
 border-bottom: 0;
 border-left: 0;
 border-right: 0;
 border-style: solid;
/* margin-left: 2em;
 margin-right: 2em;*/
 padding-bottom: 2em;
 padding-top: 2em;
  
}


.video {
  display: flex;
  justify-content: center; /* Centers horizontally */
  padding: 1em;
  float: right;
}


.exercises {
 background-color: #8bcbf9; 
 padding: 1em;
  
}

.exercises-title {
    font-family: "Libre Baskerville", serif;
    font-size: 2em;
    background-color: #0a2461;
    color: #edf2f6;
    margin-top: 2em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 1em;
}

li {
  padding: 1em;
  
  
}

.dottedline {
    border-top-style: dotted;
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
    margin-top: 3em;
    padding-bottom: 1em;
 
  
}

.QuizTitle {
  color: #0a2461;
  font-family: "Libre Baskerville", serif;
  font-size: 2em;
  text-align: center;
  background-color: #8bcbf9;
  padding: 1em;
  border: 0;
  margin: 0;
  
}

.QuizBody {
  background-color: #dceffc;
  margin: 0;
  border: 0;
  
  
}

.Question {
  padding: 1em; 
  border-top-style: none;
  border-bottom-style: dotted;
  border-left-style: none;
  border-right-style: none;
  
}

.Options {
  padding-left: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
  
}

.quizbutton {
  background-color: #0a2461;
  border: 0;
  font-size: 1.2em;
  color: #edf2f6;
  padding: 0.5em;
  border-radius: 0.5em;
 font-family: "Libre Baskerville";
  
  
}

.quizanswer {
  font-size: 1.2em;
  color: #0a2461;
  font-weight: bold;
  padding: 1em;
  
}