@font-face {
    font-family: Roboto;
    src: url(fonts/RobotoCondensed-Regular.ttf);
}

@font-face {
    font-family: TechMono;
    src: url(fonts/ShareTechMono-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;
}

h1, h2, p, a {
  font-family: Roboto, sans-serif;
  color: #707070;
  font-weight: normal;
}

h1 {
  font-size: 3vw;
}

h2 {
  font-size: 2.5vw;
  margin-bottom: 10px;
  margin-top: 30px;
}

p, a {
  font-size: 1.1vw;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
}

.hacked {
  font-family: TechMono, monospace;
}





/* HEADER */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;

  background-color: rgba(255, 255, 255, 1);

  display: flex;
  flex-direction: row;
  align-items: center;

  z-index: 3;
}

.logo-head {
  height: 50%;
  margin-left: 60px;
}

.logo-head:first-of-type {
  height: 45%;
  margin-left: 100px;
}

.logo-head-img {
  height: 100%;
}




/* HERO */
.heroContainer {
  width: 100%;
  height: 70vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#hero0 .hero {
  width: 100%;
  transform: translate(-10%, -10%);
  z-index: 1;
}

#hero1 .hero {
  width: 90%;
  transform: translate(40%, -10%);
  z-index: 1;
}

.heroTitle {
  position: absolute;
  right: 5%;
  bottom: 5%;
  z-index: 5;
}

.heroSubtitle {
  position: absolute;
  right: 5%;
  bottom: 0%;
  z-index: 5;
}

.heroParagraph {
  position: absolute;
  left: 100px;
  top: 40px;
  z-index: 5;
  width: 33%;
}

#hero0 {
  margin-top: 10vh;
}

#hero1 {
  margin-top: 20vh;
}

.skewOverlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
}

#skO_0 {
  transform: skewX(-30deg) translate(70%, 0);
  background: rgba(255, 255, 255, 0.2);
}

#skO_1 {
  transform: skewX(30deg) translate(80%, 0);
  background: rgba(255, 255, 255, 0.2);
}

#skO_2 {
  transform: skewX(30deg) translate(85%, 0);
  background: rgba(255, 255, 255, 0.5);
}

#skO_3 {
  transform: skewX(-30deg) translate(75%, 0);
  background: rgba(255, 255, 255, 1);
}

#skO_4 {
  transform: skewX(-30deg) translate(-45%, 0);
  background: rgba(255, 255, 255, 0.2);
}

#skO_5 {
  transform: skewX(30deg) translate(-50%, 0);
  background: rgba(255, 255, 255, 0.2);
}

#skO_6 {
  transform: skewX(30deg) translate(-55%, 0);
  background: rgba(255, 255, 255, 0.5);
}

#skO_7 {
  transform: skewX(-30deg) translate(-50%, 0);
  background: rgba(255, 255, 255, 1);
}




/* PARAGRAPHS */

.grid {
  display: grid;
  grid-column-gap: 10%;
  grid-template-columns: 45% 45%;

  grid-row-gap: 10vh;
  grid-template-rows: 45% 45%;

  margin: 20vh 100px;
}

#para0 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

#para1 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#para2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#para3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  height: 100%;
}




/* IMPRESSUM */

#impr {
  margin: 300px 0 100px 100px;
  color: #aaaaaa;
}




/* SCROLL PROMPT */

.scrollPrompt {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  z-index: 10;
}

.prompt-wrapper {
  height: 80%;
  text-align: center;
}

.prompt-text {
  height: 20%;
  text-align: center;
}

.prompt-img {
  height: 30%;
}

.overlay {
  display: none;
}



@media (max-width:1500px) {
  h1 {
    font-size: 3.5vw;
  }

  h2 {
    font-size: 3vw;
  }

  p, a {
    font-size: 1.6vw;
  }

  header {
    justify-content: center;
  }

  .logo-head {
    margin-left: 60px;
  }

  .logo-head:first-of-type {
    margin-left: 0;
  }

  #hero0 .hero {
    height: 150%;
    width: auto;
    transform: translate(-20%, -10%);
  }

  #hero1 .hero {
    height: 150%;
    width: auto;
    transform: translate(10%, -10%);
  }

  #para3 {
    height: 50%;
  }
}

@media (max-width:1000px) {
  h1 {
    font-size: 5.5vw;
  }

  h2 {
    font-size: 3.5vw;
  }

  p, a {
    font-size: 2.5vw;
  }

  .heroTitle {
    position: absolute;
    right: 5%;
    bottom: 5%;
  }

  .heroSubtitle {
    position: absolute;
    right: 5%;
    bottom: 0%;
  }

  .heroParagraph {
    position: absolute;
    left: 100px;
    top: auto;
    bottom: 0px;
    width: 80%;
  }

  #hero0 .hero {
    height: 150%;
    width: auto;
    transform: translate(-30%, -18%);
  }

  #hero1 .hero {
    height: auto;
    width: 150%;
    transform: translate(-15%, -15%);
  }

  #hero1 {
    height: 100vh;
  }

  #skO_0 {
    transform: skewY(-20deg) translate(0, 70%);
  }

  #skO_1 {
    transform: skewY(20deg) translate(0, 80%);
  }

  #skO_2 {
    transform: skewY(20deg) translate(0, 85%);
  }

  #skO_3 {
    transform: skewY(-20deg) translate(0, 75%);
  }

  #skO_4 {
    transform: skewY(-20deg) translate(0, 35%);
  }

  #skO_5 {
    transform: skewY(20deg) translate(0, 40%);
  }

  #skO_6 {
    transform: skewY(20deg) translate(0, 45%);
  }

  #skO_7 {
    transform: skewY(-20deg) translate(0, 40%);
  }


}

@media (max-width:800px) {
  #hero1 {
    height: 90vh;
  }

  #hero1 .hero {
    height: auto;
    width: 150%;
    transform: translate(-15%, -10%);
  }

  .heroParagraph {
    width: 70%;
  }
}

@media (max-width:700px) {
  h1 {
    font-size: 7.5vw;
  }

  h2 {
    font-size: 5.5vw;
  }

  p, a {
    font-size: 4vw;
  }

  #hero1 {
    height: 140vh;
  }

  #hero0 .hero {
    height: 130%;
    width: auto;
    transform: translate(-35%, -15%);
  }

  #hero1 .hero {
    height: 50%;
    width: auto;
    transform: translate(-20%, -10%);
  }

  .heroTitle {
    position: absolute;
    bottom: 7%;
  }

  #skO_4 {
    transform: skewY(-20deg) translate(0, 25%);
  }

  #skO_5 {
    transform: skewY(20deg) translate(0, 30%);
  }

  #skO_6 {
    transform: skewY(20deg) translate(0, 35%);
  }

  #skO_7 {
    transform: skewY(-20deg) translate(0, 30%);
  }

  .heroParagraph {
    left: 10%;
    width: 80%;
  }

  .grid {
    grid-template-columns: 100%;

    grid-row-gap: 5vh;
    grid-template-rows: 25% 25% 25% 25%;

    margin: 10vh 10% 30vh 10%;
  }

  #para0 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  #para1 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  #para2 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  #para3 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    height: auto;
    width: 100%;
  }

  .scrollPrompt {
    height: 10%;
  }

  .prompt-img {
    height: 20%;
  }
}


@media (max-width:500px) {
  #hero1 {
    height: 120vh;
  }
}