:root {
  /* --mainHeaderColor: [HeaderBackColor];
  --mainHeaderTextColor: [HeaderTextColor];
  --subHeaderColor: [SubHeadBackColor];
  --subHeaderTextColor: [SubHeadTextColor];
  --lessonHeadlineColor: [LessonHeadBackColor];
  --lessonHeadlineTextColor: [LessonTextColor];
  --footerColor: [FooterBackColor];
  --footerTextColor: [FooterTextColor]; */
  --mainHeaderColor: #185886;
  --mainHeaderTextColor: #FFFFFF;
  --lessonHeadlineColor: #54647d;
  --lessonHeadlineTextColor: #FFFFFF;
  --subHeaderColor: #2a3e5e;
  --subHeaderTextColor: #FFFFFF;
  --footerColor: #2a3e5e;
  --footerTextColor: #FFFFFF;
  --cornerRadius: 0%;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
}

img {
  align-self: center;
  max-width: 100%;
}

.mainContainer{
  display:flex;
  flex-direction: row;
  min-height: calc(100vh - 50px);
}

.headerWrapper{
  display: flex;
  flex-direction: column;
}

.mainHeader {
  display: flex;
  background-color: var(--mainHeaderColor);
  width: 100%;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.contentWrapper{
  display: flex;
  flex-direction: row;
  gap: 1.5em; 
}

.subHeader {
  display: flex;
  background-color: var(--subHeaderColor);
  color: var(--subHeaderTextColor);
  width: 100%;
  height: 3.5rem;
  /* padding-left: 1.5em; */
}

.logo{
  padding-left: .5em;
}

#topBtn{
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 20%;
  background: var(--mainHeaderColor);
  color: var(--mainHeaderTextColor);
  outline: none;
  border: none;
  cursor: pointer;
  font-weight: 400;
  visibility: hidden;
}

.footer {
  display: flex;
  background-color: var(--footerColor);
  color: var(--footerTextColor);
  height: 1.5rem;
  /* width: 100%; */
  font-size: 1.5rem;
  padding: 1em;
} 

.footer a{
  color: inherit;
  text-decoration: inherit; 
}

.contentContainer{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.menuToggleLabel{
  height: auto;
  font-size:40px;
  width: 3.5rem;
  padding-right: 1.5rem;
  cursor: pointer;
  color: var (--subHeaderTextColor);
  padding-left: .5em;
}

#menuToggleBtn{
  display:none;
}

.menuToggleButton {
  float: right;
  display: none;
}

.hideMenu{
  Display:none;
}

.sideBar {
  z-index: 1000;
  width: 300px;
  max-width: 300px;
  padding-left: 1.5em;
  transition: ease-in-out 0.5s;
} 

.sideBar.show{
  position: absolute;
  max-width: 100%;
  width: 100% !important;
  height: 100%;
  background-color: white;
  transform: translateX(0);
  transition: 0.2s linear;
  content: "&#127335";
}

.sideBar.hide{
  width: 0px;
  transform: translateX(-350px);
  transition: 0.2s linear;
  content: "&#9776";
}

.sideBarHideImg{
  content: "&#9776";
}

/* Lessons css */
.mainContent{
  --mainTranslate-x: 0px;
  transition: 0.5s all ease-in;
  transform: translateX(var(--mainTranslate-x));
  min-height: calc(100vh - 50px);
}

.sectionContainer{
  margin-top: 15px;
  margin-bottom: 100px;
  border-top-left-radius: var(--cornerRadius);
  border-top-right-radius: var(--cornerRadius);
  border-bottom-left-radius: var(--cornerRadius);
  border-bottom-right-radius: var(--cornerRadius);
  background-color:var(--mainHeaderColor);
  box-shadow: 3px 4px 12px 0px rgba(0,0,0,0.42);
      -webkit-box-shadow: 3px 4px 12px 0px rgba(0,0,0,0.42);
      -moz-box-shadow: 3px 4px 12px 0px rgba(0,0,0,0.42);
}

.lessonContainer{
  max-width: 80%;
}

.lessonHeadline{
  font-family: 'Open Sans', sans-serif;
  /* width: 100%; */
  font-size: 1.5rem;
  padding-bottom: 20px;
  padding-top: .5em;
  padding-left: 1em;
  color:var(--lessonHeadlineTextColor);
}

.lessonSubHeadline{
  font-size: 1.5rem;
  font-weight: bold;
}

.lessonContent{
  background-color:white;
  padding: 1.5em;
  padding-bottom: 3.5em;
}

.stepContainer{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1.5em;
  padding-bottom: 3.5em;
  background-color:white;
  align-items: center;
}

.stepContainer img{
  padding-bottom: 2em;
}


.stepHeadline{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  text-align: center;
  padding-top: 2em;
  padding-bottom: 1em;
}

.videoContainer{
	position: relative;
  height: 100%;
  width: 100%;
	overflow: hidden;
  align-items:center;
}


.youtubeContainer{
	margin: 20px auto;
	max-width: 500px;
}

/*  Media queries */

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

  .lessonHeadline{
    font-size: 1rem;
  }

  .lessonContent span{
    font-size: 1rem !important;
  }

  .stepHeadline{
    font-size: 1rem;
  }

  .stepContainer span{
    font-size: 1rem !important;
  }

  .sectionContainer{
    max-width: 90%;
    min-width: 90%;
  }

  .mainContainer > *:nth-child(1){
    width: 0px;
  }

  .sideBar{
    transform: translateX(-350px);
    transition: 0.2s linear;
  }

  .videoContainer{
    max-width: 90%;
    min-width: 90%;
  }

}


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

  /* .mainContent img{
    max-width: 75%;
  } */

  .lessonHeadline{
    font-size: 1.5rem;
  }

  .lessonContent span{
    font-size: 1.5rem !important;
  }

  .stepHeadline{
    font-size: 1.5rem;
  }

  .stepContainer span{
    font-size: 1.5rem !important;
  }

  .sectionContainer{
    max-width: 90%;
    min-width: 90%;
  }

  .mainContainer > *:nth-child(1){
    width: 0px;
  }

  .mainContainer > *:nth-child(2){
    flex: 1 1 80%;
    /* padding-left:3em; */
    justify-content: center; 
  } 
}

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

  .sideBar{
    transform: translateX(0px);
    transition: 0.2s linear;
  }
  .subHeader{
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.2s ease;
  }
  .lessonHeadline{
    font-size: 1.5rem;
  }

  .stepHeadline{
    font-size: 1.5rem;
  }
  
  .sectionContainer{
    max-width: 75%;
    min-width: 75%;
  }

  .mainContainer > *:nth-child(1){
    flex: 1 1 30%;
    justify-content: center; 
    /* padding-left: 3em; */
  }

  .mainContainer > *:nth-child(2){
    width: 70%;
    justify-content: center; 
  } 

}