.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "navside-l logo logo logo logo overons overons contact contact dropdown dropdown dropdown navside-r"
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games ."
    ". games games games games games games games games games games games .";
}

::-webkit-scrollbar {
  display: none;
}

.overlay a {
  text-decoration: none;
}

@font-face {
  font-family: "main";
  src: url('fonts/Montserrat-Light.ttf');
}

@font-face {
  font-family: "subhead";
  src: url('fonts/BebasNeue-Regular.ttf');
}

@font-face {
  font-family: "mainhead";
  src: url('fonts/square_sans_serif_7.ttf');
}

@font-face {
  font-family: "maintext";
  src: url('fonts/Montserrat-Light.ttf');
}

body {
  overflow-y: scroll;
  margin: 0;
  background-image: url(images/glowing-stars-background-transformed.png);
  background-size: 50%;
  overflow-y: scroll;
}
body::-webkit-scrollbar {
  display: none;
}
.logo .contact .overons .dropdown .navside-r .navside-l  {
  height: 100px;
}

.logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  height: 7rem;
}

.contact {
  grid-area: contact;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  height: 7rem;
}

.contact a:hover {
  color: #00B4A2;
}

.overons a:hover {
  color: #00B4A2;
}

.overons {
  grid-area: overons;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  height: 7rem;
}

.games {
  padding-top: 1rem;
  grid-area: games;
  width: 100%;
  height: 100%;
  
}

#mainlogo {
  width: 100%;
  height: auto;
}

.contact a {
  color: white;
  text-decoration: none;
  font-family: "subhead";
  font-size: 25pt;
}

.overons a {
  color: white;
  text-decoration: none;
  font-family: "subhead";
  font-size: 25pt;
}

.navside-r {
  grid-area: navside-r;
  height: 7rem;
}

.navside-l {
  grid-area: navside-l;
  height: 7rem;
}

.pijltje-l {
  grid-area: pijltje-l;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pijltje-r {
  grid-area: pijltje-r;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown {
  grid-area: dropdown;
  position: relative;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  height: 7rem;
}

.dropdownbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdownbtn:hover {
  background-color: #ffffff;

}

.dropbtn:hover {
  cursor: pointer;
  color: #00B4A2;
}

.dropdown-content {
  /* display: none; */
  position: absolute;
  background-color: #00000086;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 100%;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
}

.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-family: subhead;
  font-size: 15pt;
  margin-top: 2%;
  margin-bottom: 2%;
  transition: ease 0.5s;
}

.dropdown-content a:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: #00B4A2;
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: scaleY(1);
  transition: all 0.5s;
}

.dropdown:not(:hover) .dropdown-content {
  opacity: 0;
  transform: scaleY(0);
  transition: all 0.5s;
}

.dropdown:hover .dropdownbtn {
  background-color: #3e8e41;
}

.dropbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  background-color: #ffffff00;
  color: white;
  font-family: subhead;
  font-size: 25pt;
  border: 0;
}

.dropbtn:hover img {
  width: 5.5%;
  height: auto;
  transform: rotate(180deg) scale(1.1);
}

.pijltje-l {
  background-color: rgba(0, 0, 0, 0.5);
}

.pijltje-r {
  background-color: rgba(0, 0, 0, 0.5);
}

.navside-l {
  background-color: rgba(0, 0, 0, 0.5);
}

.navside-r {
  background-color: rgba(0, 0, 0, 0.5);
}

#pijltje {
  width: 5.5%;
  height: auto;
  transition: 0.5s;
}

#pijltje:hover .dropdown-content {
  width: 5.5%;
  height: auto;
  transform: rotate(180deg) scale(1.1);
}

.overonspage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.4fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "overons-titel"
    "overons-tekst";
  color: white;
}

.overons-titel h1 {
  grid-area: overons-titel;
  font-family: "subhead";
  font-size: 25pt;
}

.overons-tekst {
  grid-area: overons-tekst;
  font-family: "main";
  font-size: 13pt;
  width: 70%;
}

.overons-tekst p {
  margin: 0;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "form cnt-info";
  width: 100%;
  height: 100%;
}

.frm {
  grid-area: form;
  color: white;
}

#email-form {
  display: flex;
  height: 40%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.contact-titel h1 {
  font-family: subhead;
  font-size: 25pt;
}

label {
  display: flex;
  flex-direction: column;
  font-family: maintext;
  height: 100%;
  width: 90%;
  margin-bottom: 20px;
}

#message {
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

.frm button[type="submit"] {
  background-color: #00B4A2;
  color: white;
  border: none;
  cursor: pointer;
  width: 8rem;
  height: 15%;
  font-size: 15pt;
  font-family: maintext;
  ;
}

.frm button[type="submit"]:hover {
  background-color: #00d6c0;
}

.cnt-info {
  grid-area: cnt-info;
  display: flex;
  flex-direction: column;
}

.cnt-info h1 {
  font-family: subhead;
  color: white;
  margin-bottom: 20px;
  font-size: 25pt;

}

.cnt-info h2 {
  font-family: maintext;
  color: white;
  margin-bottom: 20px;
}

.cnt-info p {
  font-family: maintext;
  color: white;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 15pt;
}

.tile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  padding-top: 5rem;
}

.tile {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: white solid 0.1rem;
  margin: 10px;
}

.tile img {
  width: 100%;
  height: auto;
  transition: filter 0.5s;
}

.tile:hover img {
  filter: blur(10px);
}

.overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
}

.tile:hover .overlay {
  opacity: 1;
}

.overlay p {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.tile {
  height: 450px;
  width: 450px;
  cursor: pointer;
}

.tile p {
  font-size: 25pt;
  font-weight: bold;
  margin: 0;
  font-family: main;
  cursor: pointer;
  text-wrap: nowrap;
}

.tile h3 {
  font-size: 12pt;
  margin: 0;
  margin-bottom: 1rem;
  font-family: main;
  color: white;
  cursor: pointer;
  width: 70%;
}

.container-mb {
  display: none;
}










.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu>li {
  margin: 0.5em 0;
  overflow: hidden;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #ffffff;
  position: absolute;
  height: 0.20rem;
  width: 2.3rem;
  /* border-radius: 0.1rem; */
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked+.menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked+.menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked+.menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}


* {
  box-sizing: border-box;

}

/* body {
  margin: 0;
  padding: 0;
  font-family: 'Saira', sans-serif;
  font-size: 10px;
 
} */

@font-face {
  font-family: "main";
  src: url('fonts/Montserrat-Light.ttf');
}

@font-face {
  font-family: "subhead";
  src: url('fonts/BebasNeue-Regular.ttf');
}

@font-face {
  font-family: "mainhead";
  src: url('fonts/square_sans_serif_7.ttf');
}

@font-face {
  font-family: "maintext";
  src: url('fonts/Montserrat-Light.ttf');
}

.gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 45px 45px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header header header header header header header"
    "header header header header header header header header header header"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent"
    "gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent gameContent";
  height: 100vh;
  /* width: 100vw; */
  overflow-y: hidden;
  overflow-x: hidden;
}

#canvas {
  grid-area: gameContent;
  width: 100%;
  height: 100%;
  background-image: url('images/starBG.jpg');
  border: white solid 0.1rem;
}

/* ALS MEERDERE MENSEN DEZELFDE CANVAS ID GEBRUIKEN KOMEN ER PROBLEMEN DE STYLING VAN DE CANVAS */

.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1rem;
}

.header h1 {
  color: #000000;
  font-family: 'main', sans-serif;
  letter-spacing: 1rem;
  font-size: 3rem;
  width: 100%;
  display: flex;
  margin-left: 1rem;
}

.gameContent {
  grid-area: gameContent;
}

.navbar {
  grid-area: header;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navbar a {
  color: #ffffff;
  font-family: 'main', sans-serif;
  /* font-size: 1.5rem; */
  width: 100%;
  display: flex;
  text-decoration: none;
}

.navbar ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}

nav button {
  margin-right: 1rem;
  padding: 0.6rem;
  font-family: main;
  font-size: 1rem;
  text-wrap: nowrap;
  background-color: #00B4A2;
  color: white;
  border: none;
  cursor: pointer;
  
}

nav button:hover {
  background-color: #00d6c0;
}


.manualContent {
  color: #ffffff;
  width: 50%;
  margin-left: 1.2rem;
}

.manualContent h1 {
  font-family: 'subhead', sans-serif;
  font-size: 25pt;
  margin-top: 1rem;
}

.manualContent h2 {
  font-family: 'main', sans-serif;
  font-size: 1.5rem;
  margin-top: 1rem;
}

.manualContent p {
  font-family: 'maintext', sans-serif;
  font-size: 13pt;
  margin-top: 1rem;
}

.manualContent li {
  font-family: 'maintext', sans-serif;
  font-size: 13pt;
  margin-top: 1rem;
}

#logo {
  width: 26rem;
  height: auto;
  margin-left: 1rem;
}

.clrAccent {
  color: #00B4A2;
}

#canvas {
  display: block;
}






/* Mobile */

@media (max-width: 1023px) {

  .gridContainer {
    display: block;
    grid-area: content-mb;
  }

  .contact {
    display: none;
  }

  .overons {
    display: none;
  }

  .logo {
    display: none;
  } 

  .navside-l {
    display: none;
  }

  .navside-r {
    display: none;
  } 

  .pijltje-l {
    display: none;
  }

  .pijltje-r {
    display: none;
  }

  .dropdown {
    display: none;
  }

  .overonspage {
    display: none;
  }

  .contact-form {
    display: none;
  }

  .tile-container {
    display: none;
  }

  .manualContent {
    display: none;
  }

  .container {
    height: 0;
  }

  nav button {
    font-size: 0.7rem;
  }

  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
  }

  nav ul {
    margin: 0;
    padding: 0;
  }

  nav button {
    margin-right: 0!important;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border: #00B4A2 0.1rem solid;
  }

  .navbar {
    width: 100%;
  }

  .ul {
    width: 100%;
    display: flex;
    justify-content: space-between!important;
  }

  #logo {
    display: none;
  }

  #canvas {
        height: 90%;
  }

  .manualContent-mb {
    color: #ffffff;
    width: 90%;
    /* margin: 0 1rem; */
  }
  
  .manualContent-mb h1 {
    font-family: 'subhead', sans-serif;
    font-size: 25pt;
    margin-top: 1rem;
  }
  
  .manualContent-mb h2 {
    font-family: 'main', sans-serif;
    font-size: 16pt;
    margin-top: 1rem;
  }
  
  .manualContent-mb p {
    font-family: 'maintext', sans-serif;
    font-size: 13pt;
    margin-top: 1rem;
  }
  
  .manualContent-mb li {
    font-family: 'maintext', sans-serif;
    font-size: 13pt;
    margin-top: 1rem;
  }



  .container-mb {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 5rem 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "header-mb"
      "content-mb";
    /* height: 100vh; */
    width: 100vw;
  }

  .header-mb {
    grid-area: header-mb;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 95%;
  }

  #mainlogo-mb {
    width: 80%;
    height: auto;
    margin-left: 1rem;
  }

  .hamburger-menu {
    height: 100%;
    width: 100%;
    /* margin-right: 0.75rem;   */
  }

  .menu-button-container {
    /* float: right; */
    /* justify-self: center; */
    display: flex;
    width: 100%;
  }

  .menu {
    position: absolute;
    top: 5rem;
    right: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle~.menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked~.menu li {
    height: 4rem;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-top: #ffffff solid 0.1rem;
  }

  #menu-toggle:checked~.menu .gm-mb {
    height: 4rem;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-bottom: #ffffff solid 0.25rem;
  }

  #menu-toggle:checked~.menu .gmsEnd-mb {
    height: 4rem;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-bottom: #ffffff solid 0.35rem;
  }

  .menu>li {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background-color: rgba(0, 31, 63, 0.9);
    font-size: 1.75rem;
    text-decoration: none;
    z-index: 778;
  }

  .menu a {
    color: #ffffff;
    height: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: subhead;
  }

  .gms-mb a {
    color: #00B4A2;

  }

  .gmsEnd-mb a {
    color: #00B4A2;
  }

  .content-mb {
    grid-area: content-mb;
    display: flex;
  }

  .tile-mb a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
  }

  .tile-mb h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: main;
    font-size: 16pt;
    margin: 0;
    margin-top: 0.2rem;
  }

  #tile1-mb {
    width: 70%;
    height: auto;
    border: white solid 0.1rem;
  }

  #tile2-mb {
    width: 70%;
    height: auto;
    border: white solid 0.1rem;
  }

  #tile3-mb {
    width: 70%;
    height: auto;
    border: white solid 0.1rem;
  }

  #tile4-mb {
    width: 70%;
    height: auto;
    border: white solid 0.1rem;
  }

  #tile5-mb {
    width: 70%;
    height: auto;
    border: white solid 0.1rem;
  }



  .contact-form-mb {
    display: flex;
    flex-direction: column-reverse;
    /* align-items: center; */
    width: 90%;
  }

  .content-container-mb {
    display: flex;
    justify-content: center;
    width: 100%;
  }



  .frm-mb {
    grid-area: form;
    color: white;
    /* width: 100vw; */
  }

  #email-form-mb {
    display: flex;
    height: 40%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .contact-titel-mb h1 {
    font-family: subhead;
    font-size: 25pt;
  }

  label {
    display: flex;
    flex-direction: column;
    font-family: maintext;
    height: 100%;
    width: 100%;
    margin: 0;
    margin-bottom: 0.5rem;
    /* padding-right: 1rem; */
  }

  #message-mb {
    height: 7rem;
    width: 100%;
    margin-bottom: 40px;
  }

  .frm-mb button[type="submit"] {
    background-color: #00B4A2;
    color: white;
    border: none;
    cursor: pointer;
    width: 8rem;
    font-size: 15pt;
    font-family: maintext;
  }

  .cnt-info-mb {
    grid-area: cnt-info;
    display: flex;
    flex-direction: column;
  }

  .cnt-info-mb h1 {
    font-family: subhead;
    color: white;
    margin-bottom: 20px;
    font-size: 25pt;

  }

  .cnt-info-mb h2 {
    font-family: maintext;
    color: white;
    /* margin-bottom: 20px; */
    margin: 0;
  }

  .cnt-info-mb p {
    font-family: maintext;
    color: white;
    margin-bottom: 20px;
    font-size: 15pt;
  }

  .frm-mb h1 {
    margin: 0;
    margin-bottom: 1rem;
  }


  body {
    /* padding: 0 1rem; */
    width: 100vw;
    height: 100%;
  }

  .overonspage-mb {
    color: white;
    width: 90%;
    display: flex;
    flex-direction: column;
  }

  .overons-titel-mb h1 {
    grid-area: overons-titel;
    font-family: "subhead";
    font-size: 25pt;
  }

  .overons-tekst-mb {
    grid-area: overons-tekst;
    font-family: "main";
    font-size: 13pt;
  }

  .overons-tekst-mb p {
    margin: 0;
    margin-bottom: 1rem;
  }

}

/* Game Job */
#gameCanvas {
  grid-area: gameContentjob;
  background-image: url("image/star.gif");
  background-size: cover;
  border: 2px solid white;
}

.gameContentjob {
  grid-area: gameContentjob;
  display: flex;
  justify-content: center;
  align-items: center;
}
#startScreen {
  position: absolute;
  top: 30rem	;
  left: 0;
  width: 100%;
  height: -50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#startButton {
  padding: 10px 20px;
  font-family: main;
  text-wrap: nowrap;
  background-color: #00B4A2;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
}

#startbutton:hover {
  background-color: #00d6c0;
}

#gameOverScreen {
  position: absolute;
  top: 30rem	;
  left: 0;
  width: 100%;
  height: -50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  display: none;
  /* background-color: red; */
}

#restartButton {
  padding: 10px 20px;
  font-family: main;
  text-wrap: nowrap;
  background-color: #00B4A2;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
}

#restartbutton:hover {
  background-color: #00d6c0;
}