/*Main*/
body {
  background-color: black;
  color: white;
  font-family: "Nova Square";
  height: 100vh;
}

/*CONSOLE*/
#opstartscreen p {
  font-family: ubuntu;
  line-height: 1.2rem;
  display: none;
}

#opstartscreen span {
  color: #65da65;
}

/*JS CONSOLE*/
.show {
  display: block !important;
}

/*Front Page*/
#frontpage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#0e1318, #244147, #10191f 95%, transparent);
}

main h2 {
  font-family: corpta;
  font-size: 15vw;
  opacity: 1;
  transition: opacity 1s ease;
}

main p {
  font-family: silkscreen;
  display: none;
}

@keyframes a {
  40% {
    width: 100%;
    height: 0%;
  }
  80% {
    width: 100%;
    height: 100%;
    border: solid white;
  }
  99% {
    width: 100%;
    height: 100%;
    border: solid rgba(255, 255, 255, 0);
  }
  100% {
    width: 100%;
    height: 100%;
    border: unset;
  }
}

/*Info Section*/

section {
  padding: 2rem;
}

#info {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 1s ease;
}
#info * {
  padding: 1rem 0rem;
  text-align: center;
}

section > h2 {
  font-family: "workbench";
  font-style: italic;
  font-size: 3.4rem;
  width: 100%;
}

section a {
  text-decoration: none;
  color: rgb(198, 247, 5);
}

section a:hover {
  text-decoration: underline;
}

#veranderend {
  color: rgb(10, 221, 10);
}

@media (min-width: 550px) {
  /*Main*/

  main h2 {
    font-size: 5rem;
  }

  #info {
    justify-content: center;
    align-items: unset;
  }

  #info * {
    text-align: unset;
  }
  section p {
    text-align: unset;
    width: 400px;
  }
}