* {
   box-sizing: border-box;
   font-family: "montserrat", sans-serif;
   font-style: normal;
 }

 body {
   margin: 0;
   padding: 1rem;
   background-image: url("img/Background.png");
   margin: 0;
   padding: 0;
 }

 .lang-dropdown {
position: absolute;
  display: inline-block;
  right: 30px;
  margin-top: 110px;
 }

 .lang-btn {
   cursor: pointer;
   background: none;
   border: none;
   background: #1a171b;
   color: white;
   padding: 6px 10px;
   font-size: 1.3em;
 }

 .lang-menu {
   position: absolute;
   top: 100%;
   left: 0;
   list-style: none;
   margin: 0;
   padding: 0;
   border: 1px solid #ccc;
   background: white;
 }

 .lang-menu.hidden {
   display: none;
 }

 .lang-menu li {
   padding: 6px 10px;
   cursor: pointer;
 }

 .lang-menu li:hover {
   background: #eee;
 }

 .creditsText {
   font-style: italic;
   font-size: .7em;
 }

 #samenvatting_buttons {
   display: flex;
   gap: 10px;
   flex-direction: column;
   flex-grow: 0;
   order: 1;
 }

 #IntoText {
   font-size: .85em;
 }

 #header {
   top: 0;
   background-size: auto;
   position: absolute;
   width: 100%;
   height: 370px;
   background-image: url("img/Header.png");
 }

 #logo {
   position: relative;
   left: -85px;
   top: 14px;
   height: 190px;
 }

 #bottomBar {
   background-image: url("img/Bottom.png");
   background-size: auto;
   position: absolute;
   width: 100%;
   height: 170px;
 }

 #content {
   min-height: 100vh;
   position: relative;
   width: calc(100% - 25vw);
   margin: 0px 20vw;
   padding: 200px 20px;
   border-style: none none none solid;
   border-width: 6px;
   border-color: #1a171b;
   margin-bottom: -170px;
   z-index: 5;
 }

 #flexContent {
   display: flex;
 }

 #flexContent div {
   padding: 50px;
   flex-grow: 1;
   flex-basis: 0;
 }

 #photos {
   padding: 0px 50px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
 }

 .photo {
   width: 120px;
 }

 .photo img {
   width: 120px;
 }

 .photo p {
   font-size: .65em;
 }

 .moduleButton {
   position: relative;
   overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 48px;
   border: none;
   background-color: #649b8d;
   color: white;
   cursor: pointer;
 }

 .buttonDisabled {
   background-color: #3e3e3e;
   cursor: not-allowed;
   color: white;
 }

 .buttonWatching {
   background-color: #006674;
   color: white;
 }

 .label {
   color: white;
   font-weight: bold;
   position: relative;
   z-index: 1;
   /* keep text above the fill */
 }

 .moduleButton .fill {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 0%;
   /* will be set dynamically */
   background: #4caf50;
   /* your progress color */
   z-index: 0;
   transition: width 0.25s linear;
 }

 .videoPanel {
   flex-grow: unset !important;
   flex-basis: unset !important;
   padding: 10px !important;
 }

 .videoPanel p {
   width: 300px;
 }

 #email {
   width: 300px;
   height: 50px;
   margin-top: 20px;
 }

 .toggleBoxDiv {
   padding-top: 20px;
 }

 #privacyErrorText {
   margin-bottom: 0px;
 }

 #emailErrorText {
   margin-bottom: 0px;
 }

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

   .lang-dropdown {
  margin-top: 190px;
 }

   #content {
     width: calc(100% - 140px);
     margin: 0px 70px -170px 70px;
   }
 }

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

   * {
     font-size: 1em;
   }

   
 .lang-dropdown {
  margin-top: 110px;
 }

   .photo p {

     font-size: .9em;
   }

   .label {
     font-size: .4em;
   }

   .moduleButton {
     font-size: 2.5em;
   }

   #email {
     width: auto;
     height: 70px;
     margin-top: 20px;
     font-size: 1.5em;
     padding: 20px;
   }

   #logo {
     position: relative;
     left: -8%;
     top: -13px;
     width: 90%;
     height: unset;
   }

   #header {
     height: 210px;
     background-size: cover;
   }

   #content {
     width: calc(100% - 50px);
     margin: 0px;
     margin-left: 50px;
     margin-bottom: -170px;
     padding: 122px 20px 172px 20px;
     border-width: 3px;
   }

   #flexContent {
     flex-direction: column;
     padding-top: 190px;
   }

   #flexContent div {
     padding: 0px 50px;
   }

   #IntoText {
     flex-grow: 0;
     order: 2;
   }

   #photos {
     padding: unset;
     padding-left: 50px;
   }

 }