body,
html {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "italiana", sans-serif;
}

@font-face {
  font-family: "italiana";
  src: url(../fonts/Italiana-Regular.ttf);
}
.container {
  width: 100%;
  height: 100%;
}
.container nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0.6em;
  margin-bottom: 2em;
}
.container nav li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.8em;
  padding-right: 0.8em;
  list-style-type: none;
  border: 1px solid #D90000;
  border-radius: 0.2em;
  color: black;
  padding: 0.5em;
  min-width: 9em;
  height: 2em;
  text-align: center;
  margin-right: 1em;
  transition: 0.8s;
  font-weight: bolder;
  font-size: 1.05em;
}
.container nav li:hover {
  transform: scale(1.05);
  transition: 0.4s;
  background-color: #D90000;
}
.container nav li:hover a {
  color: whitesmoke;
}
.container nav a {
  text-decoration: none;
  color: black;
  font-size: 0.9em;
}

.homepage {
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  color: white;
}
section:nth-of-type(1) {
  background-color: #ffffff;
}
section:nth-of-type(2) {
  background-color: #f3fdf3;
}
section:nth-of-type(3) {
  background-color: #ffffff;
}
section:nth-of-type(4) {
  background-color: #f2f8ff;
}
section:nth-of-type(5) {
  background-color: #ffffff;
}
section:nth-of-type(6) {
  background-color: #f2f8ff;
}
section h1 {
  font-family: "italiana", sans-serif;
  font-size: 3em;
}
section p {
  font-family: "italiana", sans-serif;
}

.introductie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.introductie #mijnLogo {
  max-height: 80vh;
  min-width: 23vw;
  display: flex;
}
.introductie .scrollArrow {
  margin-top: 4em;
  width: 0.65em;
  opacity: 0;
  animation: scrollArrow 4s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: translateY(0em);
  }
  100% {
    opacity: 0.8;
    transform: translateY(4em);
  }
}
.stories {
  display: flex;
  justify-content: center;
}
.stories img {
  height: 45vh;
  width: auto;
}
.stories article {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-left: 1em;
}
.stories article h1 {
  margin: 0;
  padding: 0;
}
.stories article p {
  font-size: 1.3em;
  max-width: 60vw;
  color: black;
  padding: 0.3em;
  margin: 0;
}
.stories article span {
  color: rgb(20, 20, 20);
  padding: 0.3em;
  margin-bottom: 0.3em;
}
.stories article a {
  transition: 0.8s ease-in;
}
.stories article a:hover {
  transform: scale(1.05);
  transition: 0.4s ease-in-out;
}

.storiesText {
  color: #D90000 !important;
}

.art {
  display: flex;
  justify-content: center;
}
.art article {
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: center;
  margin-left: 1em;
}
.art article h1 {
  padding: 0;
  margin: 0;
  color: #D90000;
}
.art article p {
  font-size: 1.3em;
  max-width: 27em;
  color: black;
  padding: 0.3em;
  margin: 0;
}
.art span {
  color: rgb(20, 20, 20);
  padding: 0.3em;
  margin-bottom: 0.3em;
}
.art a {
  transition: 0.8s ease-in;
}
.art a:hover {
  transform: scale(1.05);
  transition: 0.4s ease-in-out;
}

.ghostbusters {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.ghostbusters img {
  height: 45vh;
  width: auto;
}
.ghostbusters article {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-left: 1em;
}
.ghostbusters article h1 {
  color: #D90000;
  margin: 0;
  padding: 0;
  max-width: 13em;
}
.ghostbusters article p {
  font-size: 1.4em;
  max-width: 30em;
  color: black;
  padding: 0.3em;
  margin: 0;
}
.ghostbusters article span {
  color: rgb(20, 20, 20);
  padding: 0.3em;
  margin-bottom: 0.3em;
}
.ghostbusters article a {
  transition: 0.8s ease-in;
}
.ghostbusters article a:hover {
  transform: scale(1.05);
  transition: 0.4s ease-in-out;
}

.livecrowd {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.livecrowd img {
  height: 45vh;
  width: auto;
}
.livecrowd article {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-left: 1em;
}
.livecrowd article h1 {
  color: #D90000;
  margin: 0;
  padding: 0;
  max-width: 13em;
}
.livecrowd article p {
  font-size: 1.4em;
  max-width: 30em;
  color: black;
  padding: 0.3em;
  margin: 0;
}
.livecrowd article span {
  color: rgb(20, 20, 20);
  padding: 0.3em;
  margin-bottom: 0.3em;
}
.livecrowd article a {
  transition: 0.8s ease-in;
}
.livecrowd article a:hover {
  transform: scale(1.05);
  transition: 0.4s ease-in-out;
}

.contactForm {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.contactForm svg {
  max-height: 80vh;
  opacity: 0;
  transform-origin: center;
}
.contactForm #whappIcon, .contactForm #mailIcon {
  transition: 0.8s;
}
.contactForm #whappIcon:hover, .contactForm #mailIcon:hover {
  transform: scale(1.05);
  transform-origin: center;
  transition: 0.4s ease-in-out;
}

.logoIntro {
  animation: logoIntro 1s ease-in-out forwards;
  transform-origin: center;
}

@keyframes logoIntro {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.storiesIntro {
  animation: storiesIntro 1s ease-in-out forwards;
}

#CraftureLogo {
  opacity: 0;
}

.craftureIntro {
  animation: craftureIntro 3s ease-in-out forwards;
  animation-delay: 0.5s;
}

@keyframes craftureIntro {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.storiesIntro {
  animation: storiesIntro 1s ease-in-out forwards;
}

@keyframes storiesIntro {
  0% {
    transform: scale(1.2);
    opacity: 0.5;
    color: #005ed8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    color: black;
  }
}
.artIntro {
  animation: artIntro 1.4s ease-in-out forwards;
}

@keyframes artIntro {
  0% {
    transform: scale(0.9) perspective(200px) rotateX(-10deg) translateY(-10em);
    color: red;
  }
  60% {
    transform: scale(0.9) perspective(200px) rotateX(0deg) translateY(0);
    color: white;
  }
  100% {
    transform: scale(1) perspective(200px) rotateX(0deg) translateY(0);
    color: white;
  }
}
.ghostLogo {
  opacity: 0;
}

.ghostIntro {
  animation: ghostIntro 1s ease-in-out forwards;
  animation-delay: 0.6s;
}

@keyframes ghostIntro {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.ghostTekstIntro {
  animation: ghostTekstIntro 1s ease-in-out forwards;
}

@keyframes ghostTekstIntro {
  0% {
    transform: scale(0.9) perspective(200px) rotateX(-10deg) translateY(-10em);
    color: red;
  }
  100% {
    transform: perspective(200px) rotateX(0deg) translateY(0);
    color: white;
  }
}
.livecrowdIntro {
  animation: livecrowdIntro 1.6s ease-in-out forwards;
}

@keyframes livecrowdIntro {
  0% {
    transform: translateX(-3em);
    opacity: 0;
  }
  100% {
    transform: translateX(0em);
    opacity: 1;
  }
}
.contactIntro {
  animation: contactIntro 1s ease-in-out forwards;
  animation-delay: 0.3s;
}

@keyframes contactIntro {
  0% {
    transform: translateY(13em);
    opacity: 0;
  }
  100% {
    transform: translateY(0em);
    opacity: 1;
  }
}
@media screen and (max-width: 808px) {
  .homepage {
    height: 100vh;
  }
  .introductie {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .introductie #mijnLogo {
    max-height: 80vh;
    min-width: 50vw;
  }
  .introductie .scrollArrow {
    margin-top: 4em;
    width: 0.65em;
    opacity: 0;
    animation: scrollArrow 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  .stories {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    text-align: center;
    height: 100vh;
  }
  .stories img {
    margin-top: 4em;
  }
  .stories article {
    justify-content: flex-start;
  }
  .stories article p {
    max-width: 100vw;
  }
  .stories article span {
    margin-top: 2em;
  }
  .art {
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    height: 100vh;
  }
  .art img {
    margin-top: 4em;
  }
  .art article {
    justify-content: flex-start;
  }
  .art article span {
    margin-top: 2em;
  }
  .ghostbusters {
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
    height: 100vh;
  }
  .ghostbusters img {
    margin-top: 4em;
  }
  .ghostbusters article {
    justify-content: flex-start;
  }
  .ghostbusters article span {
    margin-top: 2em;
  }
  .livecrowd {
    flex-direction: column;
    text-align: center;
    height: 100vh;
    justify-content: flex-start;
  }
  .livecrowd img {
    margin-top: 4em;
  }
  .livecrowd article {
    justify-content: flex-start;
  }
  .livecrowd article span {
    margin-top: 2em;
  }
  .contactForm {
    display: flex;
    justify-content: flex-start;
    height: 100vh;
  }
  .contactForm svg {
    margin-top: 4em;
    max-width: 90vw;
  }
  @keyframes artIntro {
    0% {
      transform: scale(0.9) perspective(200px) rotateX(-10deg) translateY(10em);
      color: red;
    }
    60% {
      transform: scale(0.9) perspective(200px) rotateX(0deg) translateY(0);
      color: white;
    }
    100% {
      transform: scale(1) perspective(200px) rotateX(0deg) translateY(0);
      color: white;
    }
  }
}
@media screen and (max-width: 440px) {
  .introductie #mijnLogo {
    max-width: 80vw;
  }
  .container nav ul {
    flex-direction: column; /* Makes the items stack vertically */
  }
  nav li {
    margin: 5px 0; /* Adds some space between the items */
  }
  section h1 {
    max-width: 90vw;
    font-size: 2.6em;
  }
  section p {
    max-width: 90vw;
    font-size: 1em !important;
  }
  section span {
    font-size: 0.85em;
  }
  .art img {
    max-width: 88vw;
    justify-content: center;
    margin: 0 auto;
    margin-top: 3em;
  }
  .ghostbusters article {
    max-width: 100vw;
    margin: 0 auto;
  }
  .ghostbusters img {
    max-width: 70vw;
    justify-content: center;
    margin: 0 auto;
    margin-top: 3em;
  }
  .livecrowd article {
    max-width: 100vw;
    margin: 0 auto;
  }
  .livecrowd img {
    max-width: 70vw;
    justify-content: center;
    margin: 0 auto;
    margin-top: 3em;
  }
  .contactForm svg {
    margin-top: 3em;
  }
}/*# sourceMappingURL=style.css.map */