/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
    box-sizing:border-box;  
  }
  
  button, summary {
      cursor: pointer;
  }
  
  * {
      padding: 0;
      margin: 0;
  }
  
  
  
  /*********************/
  /* CUSTOM PROPERTIES */
  /*********************/
  :root {
      /* startje */
      --color-text: #e5e5e5;
      --color-background: #141414;
  }
  
  
  
  
  
  /****************/
  /* JOUW STYLING */
  /****************/
  
  /* jouw code */
  
  body {
    color:var(--color-text);
    background-color:var(--color-background);
    font-family: Arial, Helvetica, sans-serif;
  }
  
  body.toonMenu {
      overflow: hidden;
  }
  
  body li{
      list-style-type: none;
  }
  
  
  
  /**************/
  /* NAVIGATION */
  /**************/
  
  nav {
      display: flex;
      background-color: var(--color-background);
      padding-bottom: 1em;
  }
  
  nav div {
      position: relative;
  }
  
  nav div input {
  
      background: #141414;
      border: none;
      font-size: 1.1em;
      padding: 10px 44px 10px 10px;
      width: 1.3em;
      transition: all .2s ease-in-out;
      cursor: pointer;
      border-radius: 16px;
      color: #141414;
      margin-top: 1em;
  }
  
  nav div input:focus {
      width: 8em;
      border: solid 2px red;
      outline: 0;
      color: rgb(195, 195, 195);
      background-color: rgb(117, 117, 117);
      z-index: -1;
  }
  
  nav div img {
      position: absolute;
      right: 5%;
      top: 30%;
      transform: translateY(-50%);
      pointer-events: none;
  }
  
  nav img{
      height: 28px;
      margin-top: 1.3em;
  }
  
  
  nav h1{
      margin: auto;
  }

  /*************/
  /* OPEN MENU */
  /*************/
  
  nav div button{
      margin: 1.2em 0 0 1em;
      padding: .4em;
      font-size: 18px;
      font-family: Arial, Helvetica, sans-serif;
      background-color: #e50914;
      color: white;
      border-radius: .5em;
      border-style: none;
  }

  /**************/
  /* SLUIT MENU */
  /**************/
  
  nav ul button{
      padding: .5em;
      margin: .4em 0 .5em -.3em;
      background-color: #141414;
  }
  
  nav div ul{
      z-index: 2;
      padding: 1em;
    
      display: grid;
      align-content: start;
      gap: 1em;
      background-color: red;
  
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  
      transform: translatex(-100%);
  
      transition: transform .3s;
  }
  
  body.toonMenu nav ul {
      transform: translatex(0);
  }



/********/
/* MAIN */
/********/

main{
    position: relative;
}

main > img{
    width: 3em;
    position: absolute;
    top: -3.5%;
    z-index: 1;
    transform: translatex(-100%);
}

main div video{
    width: 21.5em;
    margin: 1em 0;
    border-radius: 1em;
}

main div:nth-of-type(1){
    position: relative;
}

main div h2{
    font-size: 1.7em;
    text-shadow: 2px 2px 8px black;

    position: absolute;
    top: 5em;
    left: .5em;
}

main div button{
    padding: .4em;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	border-radius: .5em;
	border-style: none;
    box-shadow: 5px 5px 8px;

    position: absolute;
    top: 17.5em;
    left: 1.5em;
}


main div article img{
    width: 2em;
}

main div, section{
    margin: 1em;
}

main div h3{
    margin-top: .5em;
}



main div:nth-of-type(2){
    display: grid;
    grid-template-columns:2fr 1fr;
    font-size: 15px;
}


main div:nth-of-type(3) h4{
margin-top: 1em;
}


main section article{
    display: grid;
    grid-template-columns:1fr 2fr;
    border-bottom: solid 1px gray;
}

main section article img{
    width: 8em;
    margin: auto;
}
main section article h4{
    margin-bottom: 1em;
}







/**********/
/* FOOTER */
/**********/




footer ul {
	color: #808080;
	display: flex;
	flex-wrap: wrap;
	margin-left: 1em;
    margin-top: 1em;
}

footer li{
	flex-basis: 50%;
}

footer p {
	color: #808080;
	font-size: small;
	margin-left: 1em;
	margin-bottom: 1em;
}

footer a {
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline white;
}

footer button{
	margin: 0 0 1.3em 1em;
	padding: .5em;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	color: #141414;
	border-radius: .5em;
	border-style: none;
}


.light_mode{
	color: #141414;
	background-color: white;
}

.light_mode footer button{
	color: white;
	background-color: #141414;
}
.light_mode main div article img{
    background-color: #141414;
    padding: 1em;
}

.light_mode main h2{
    color: white;
}



  /**************/
  /* BLINGBLING */
  /**************/
  a:focus{
    outline-width: 3px;
    outline-style: dashed;
    outline-color: red;
}


/************/
/* Animatie */
/************/

@keyframes zombie_walk {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
        transform: translatex(0%);
    }
}

main > img{
    animation: linear alternate;
    animation-name: zombie_walk;
    animation-duration:5s;
}