@font-face {
  font-family: Montserrat;
  src: url(./fonts/Montserrat-SemiBold.ttf);
}

@font-face {
  font-family: Avenir;
  src: url(./fonts//AvenirLTStd-Roman.otf);
}

html ::-webkit-scrollbar {
  width: 0.25rem;
}

html ::-webkit-scrollbar-track {
  background: black;
}

html ::-webkit-scrollbar-thumb {
  background: #c4aedd;
}

body {
  background-image: url(../images/bg.png);
  background-size: 100%;
  background-attachment: fixed;
  margin: 0px auto;
  overflow: hidden;
}

main {
  color: white;
}

main .intro-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-left: 10vh;
  margin-right: 10vh;
  margin-bottom: 10vh;
  font-family: Avenir;
}

main .intro-div .intro-p {
  margin-right: 10vh;
  width: 50vh;
}

main .intro-div img {
  border-radius: 50%;
  width: 50vh;
}

main .intro-div a {
  color: #c4aedd;
  text-decoration: none;
}

main .intro-div h2 {
  font-size: 5vh;
}

main .arrow-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

main .arrow-div .white-arrow {
  width: 10vh;
  -webkit-animation: up-down 1s ease-out infinite alternate;
          animation: up-down 1s ease-out infinite alternate;
}

main .work-div {
  margin-left: 20vh;
  margin-right: 20vh;
  background-color: #282424;
}

main .work-div .work-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

main .work-div .work-category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-family: Avenir;
  font-size: 5vh;
  margin-bottom: 2vh;
}

main .work-div .game-section, main .work-div .illustration-section, main .work-div .model-section, main .work-div .pixel-section {
  margin-top: 10vh;
  margin-bottom: 10vh;
}

main .work-div .image-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

main .work-div .image-container .illustration-content {
  height: 40vh;
}

main .work-div .image-container .model-content {
  height: 50vh;
}

main .work-div .image-container .pixel-content {
  height: 50vh;
}

main .work-div .image-container .game-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

main .work-div .image-container .game-div .game-media {
  width: 80vh;
  height: 45vh;
}

main .work-div .image-container .game-div .game-title {
  width: 30vh;
  margin-top: 5vh;
}

main .work-div .image-container .game-div .game-p {
  margin-left: 10vh;
  width: 50vh;
  font-family: Avenir;
  font-size: 2.5vh;
}

main .work-div .image-container .game-div .game-p a {
  color: #c4aedd;
  text-decoration: none;
}

main .work-div .image-container figcaption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-family: Avenir;
}

main .contact-div {
  font-family: Avenir;
}

main .contact-div form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

main .contact-div form .one-line-input {
  width: 70vh;
  padding: 1vh;
  font-family: Avenir;
  font-size: 2.5vh;
  color: white;
  border-color: white;
  border: 0;
  background-color: #3d3737;
}

main .contact-div form .multi-line-input {
  width: 70vh;
  padding: 1vh;
  font-family: Avenir;
  font-size: 2.5vh;
  color: white;
  border-color: white;
  border: 0;
  background-color: #3d3737;
  height: 30vh;
}

main .contact-div form .button-class {
  width: 15vh;
  height: 5vh;
  border: none;
  border-radius: 4px;
  color: white;
  background-color: #559355;
  font-family: Avenir;
  font-size: 2.5vh;
}

main .contact-div form .button-class:hover {
  background-color: #407654;
}

main .contact-div form h4 {
  margin-bottom: 1vh;
}

main .contact-div form h2 {
  margin: 0.5vh;
  font-size: 5vh;
}

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #1b1b1b;
  color: white;
  font-family: Avenir;
}

footer .social-media-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-left: 5rem;
}

footer .social-media-div a {
  text-decoration: none;
}

footer .social-media-div a .social-icon {
  margin-left: 2.5vh;
  margin-right: 2.5vh;
  margin-bottom: 5vh;
  width: 5vh;
  fill: white;
}

footer p {
  margin-left: 5rem;
}

#loader {
  background: #2b2830;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1000;
}

#loader .loading-gif {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 10vw;
}

@-webkit-keyframes up-down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
  }
}

@keyframes up-down {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(25%);
            transform: translateY(25%);
  }
}

@media only screen and (max-width: 800px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }
  .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .nav-link {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  main {
    margin: 0;
  }
}
/*# sourceMappingURL=style.css.map */