/*Standaard instellingen*/
body {
  margin: 0px;
  font-family: sans-serif;
  background-color: #ffd65a;
  width: 100%;
  height: 100%;
}

.main {
  margin: 0px;
}

/*----------Hoofdpagina----------*/

/*Navigatie*/
nav {
  background-color: #ff9d23;
  margin: 0px;
  border: 3px solid black;
  padding: 10px;
  border-left: 0px;
  border-right: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index:1000;
}

.knop {
  margin-left: 30px;
  margin-right: 30px;
  background-color:#20e194;
  padding: 10px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 20px;
}

a:link, a:visited {
  color: black;
  text-decoration: none;
}

/*Topolevels*/
.topoknop{
  background-color:#20e194;
  padding: 10px;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 30px;
  margin-top: 15px;
  margin-right: 100px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
}

/*Header*/
header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #f93827;
}

.headertext, .hoofdtext, .inlogtext {
  align-self: center;
  font-family: "League Spartan";
  font-size: 15px;
}


/*Dividers*/
.rightside, .leftside {
  background-color: #ffd65a;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.rightside{
  flex: 1;
  border-left: 3px solid black;
}

.leftside{
  flex: 2;
  padding-left: 50px;
  padding-right: 50px;
}

/*----------Inlogpagina----------*/

/*Dividers*/
.inlogcontainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inlogbox {
  width: 300px;
  padding: 00px;
  border: 3px solid;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #ff9d23;
}

/*Tekst*/
.inlogtext {
  font-size: 24px;
  text-align: top;
  font-weight: bold;
  background-color: #f93827;
  border-bottom: 3px solid;
  width: 100%;
  display:flex;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top-right-radius: calc(8px - 3px);
  border-top-left-radius: calc(8px - 3px);
}

/*Interactie*/
.inlogbox input {
  padding: 10px;
  border: 2px solid;
  border-radius: 4px;
  margin-left:30px;
  margin-right:30px;
  border-radius:8px
}

.inlogbox button {
  padding: 10px;
  border: 2px solid;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  background-color: #20e194;
  margin-left:30px;
  margin-right:30px;
  margin-bottom: 30px;
}

.terugknop {
  position: absolute;
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  background-color: #20e194;
  text-align: top;
  font-weight: bold;
  padding: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

/*Interactie*/
#navbalk {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.icon {
 display:none;
}
/*Voor smallere schermen*/
@media (max-width: 729px) { 
  .container { 
    flex-direction: column-reverse;
  } 
  .rightside {
    border: 3px solid black;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    padding-bottom: 45px;
  }

  #navbalk {
    display: none;
    width: 30%;
    flex-direction: column;
    align-items: left;
    margin-right: auto;
  }

  .icon {
    display: block;
    font-size: 28px;
    cursor: pointer;
    margin-right: auto;
  }

  nav {
    justify-content: flex-start; 
    align-items:left;
   
  }

  .knop {
    margin: 10px 0;
  }
}