@font-face {
  font-family: PPNeueMachina;
  src: url("PPNeueMachina-Ultrabold.otf") format("opentype");
}


html,
body {
  font-family: PPNeueMachina;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: calc(10px + 1vmin);
  color: #000;
  overflow: hidden; /* disable scrollbars */
}

h1 {
  font-size: 4vmin;
  margin-bottom: 5vmin;
  line-height: 0.5vmin;
}

p {
  font-size: 2.5vmin;
  padding: 0;
  margin: 0;
  padding-bottom: 10px;
  line-height: 4.5vmin;  
}

ul {
  font-size: 2.5vmin;
  padding: 0;
  margin: 0;
  line-height: 3.5vmin;
}



/* default background setup */
.scene {
  display: flex;
  box-sizing: border-box;
  border: calc(10px + 3vmin) solid white;
  height: 100%;
  background-color: #4892f0;
  align-items: center;
  justify-content: center;
}

/* draws figma handles around element */
.figma_handles {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border: 1px solid #18a0fb;
}

.figma_handles_TL {
  top: -4.5px;
  left: -4.5px;
}

.figma_handles_TR {
  top: -4.5px;
  right: -4.5px;
}

.figma_handles_BL {
  bottom: -4.5px;
  left: -4.5px;
}

.figma_handles_BR {
  bottom: -4.5px;
  right: -4.5px;
}

.ct_border {
  position: absolute;
  border: 1px solid #18a0fb;
  height: 100%;
  width: 104%;
  margin: -4px;
  top: 0;
  z-index: -1;
}

/* mouse pointer defaults */
.mouse_pointer {
  position: absolute;
  top: 0;
  left: 0;
  width: 7vmin;
  height: auto;
}









/* content starts */



/* first page */


/* CONTENT BLOCK hello logo */
.ct_logohello {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vmin;
  height: auto;
  transform: translate(-50%, -50%);
}

.logohello {
  width: 100%;
  height: 100%;
}

.mp_logohello {
  transform: translate(400%, 100%);
  top: 30vmin;
  left: -20vmin;
}


/* CONTENT BLOCK swatches */

.ct_swatches {
  position: absolute;
  bottom: 0vmin;
  right: -40vmin;
  width: 12vmin;
  height: auto;
  z-index: 1;
}

.swatches {
  width: 100%;
  height: 100%;
}

.mp_swatches {
  transform: translate(50%, 50%);
}


/* CONTENT BLOCK logo80 */

.ct_logo80 {
  position: absolute;
  top: -55%;
  left: 60%;
  width: 60vmin;
  height: auto;
  transform: translate(-50%, -90%);
}

.logo80 {
  width: 100%;
  height: 100%;
}

.mp_logo80 {
  transform: translate(300%, 300%);
}

/* CONTENT BLOCK 1 product designer */

.ct_content_1 {
  position: absolute;
  bottom: 30vmin;
  left: -100vmin;
  padding: 2px;
  z-index: 1;
}

.ct_content_1 h1 {
  color: #df72f0;

}

.ct_content_1 p {
  color: #d1f76c;
}

.ct_content_1 a {
  color: #d1f76c;
  font-size: 2.5vmin;
  text-decoration: none;
}

.ct_content_1 a:visited {
  font-size: 2.5vmin;
  text-decoration: none;
  line-height: 4.5vmin;
}

.ct_content_1 a:hover {
  color: #4892f0;
}

.mp_content_1 {
  transform: translate(200%, 250%);
}




/* second page */

/* CONTENT BLOCK avatar */

.ct_bw_avatar {
  position: absolute;
  top: -20vmin;
  right: -80vmin;
  width: 50vmin;
}

.bw_avatar {
  width: 100%;
}

.mp_avatar {
  transform: translate(300%, 300%);
}

/* CONTENT BLOCK 2 about */

.ct_content_2 {
  position: absolute;
  top: 15vmin;
  left: -80vmin;
  /* 10 */
  padding: 2px;
  max-width: 60vmin;
}

.ct_content_2 h1 {
  color: #FFF;
}

.ct_content_2 p {
  color: #D1F76C;

}

.mp_content_2 {
  transform: translate(555%, 235%);
}

/* CONTENT BLOCK 3 principles */

.ct_content_3 {
  position: absolute;
  bottom: 20vmin;
  left: -80vmin;
  padding: 2px;
  max-width: 60vmin;
}

.ct_content_3 h1 {
  color: #FFF;
}

.ct_content_3 ul {
  color: #4892F0;
}

.ct_content_3 li {
  background: transparent url(bullet.svg) no-repeat 0 0.9vmin;
  background-size: 2vmin;
  padding-left: 3.5vmin;
  padding-top: 0.3vmin;
  list-style-type: none;
}

.mp_content_3 {
  transform: translate(300%, 220%);
}


/* CONTENT BLOCK 4 personal */

.ct_content_4 {
  position: absolute;
  bottom: 0vmin;
  right: -80vmin;
  padding: 2px;
  max-width: 70vmin;
}

.ct_content_4 h1 {
  color: #FFF;
  font-size: 3vmin;
  margin-bottom: 0vmin;
  line-height: 3vmin;
}

.ct_content_4 p {
  color: #DF72F0;
  font-size: 2vmin;
}

/* bottom position fix */
.ct_content_4 p:last-of-type {
  padding-top: 2vmin;
  padding-bottom: 1.5vmin;
  line-height: 0;
}

.mp_content_4 {
  transform: translate(180%, 300%);
}




/* third page */

.ct_content_5 {
  position: absolute;
  top: -20vmin;
  left: 20vmin;
  padding: 2px;
  max-width: 60vmin;
}

.ct_content_5 h1 {
  color: #FFF;
}

.testimonials_border {
  width: 108%;
  height: 75%;
  margin-left: -10px;
}

.mp_content_5 {
  top: 0vmin;
  left: 0vmin;
  transform: translate(230%, 30%);
  z-index: 1;
}


.ct_content_6 {
  position: absolute;
  padding: 2px;
  max-width: 60vmin;
}

.ct_content_6 h1 {
  color: #D1F76C;
  font-size: 2.75vmin;
  line-height: 4vmin;
  margin-bottom: 0;
  padding-bottom: 4vmin;
  margin-top: 3vmin;
  display: inline;
}

.ct_content_6 h2 {
  color: #4892F0;
  font-size: 2vmin;
  margin-bottom: 0vmin;
  line-height: 3vmin;
}

.ct_content_6 .friend {
  width: 20vmin;
  float: left;
  padding-right: 2vmin;
}

.ct_content_6 a {
  color: #4892F0;
  text-decoration: none;
}

.ct_content_6 a:hover {
  color: #DF72F0;
}

.testimonials {
  display: flex;
  align-items: center;
}

.ct_content_6_zimo {
  top: 10vmin;
  left: -70vmin;
}

.mp_content_6_zimo {
  transform: translate(310%, 160%);
}

.zimo_border {
  width: 95%;
  margin-left: -10px;
  padding-bottom: 7px;
}

.ct_content_6_zimo_patch {
  top: 42vmin;
  left: -25vmin;
}

.mp_zimo_patch {
  z-index: 10;
  /* needed fix for border stacking */
  transform: translate(60%, 130%);
}

.zimo_patch {
  width: 10vmin;
  left: 0vmin;
  /* -40vmin to move out */
}

.ct_content_6_karin {
  top: -28vmin;
  right: -10vmin;
}

.mp_content_6_karin {
  transform: translate(170%, 100%);
}

.karin_border {
  width: 97%;
  margin-left: -10px;
  padding-bottom: 7px;
}

.ct_content_6_karin_patch {
  top: 60vmin;
  right: -36vmin;
}

.mp_karin_patch {
  z-index: 10;
  transform: translate(60%, 130%);
}

.karin_patch {
  width: 10vmin;
  left: 0vmin;
  /* -40vmin to move out */
}

.ct_content_6_janine {
  bottom: -38vmin;
  left: 0vmin;
}

.mp_content_6_janine {
  transform: translate(230%, 120%);
}

.janine_border {
  width: 105%;
  margin-left: -10px;
  padding-bottom: 7px;
}

.ct_content_6_janine_patch {
  bottom: -20vmin;
  left: 70vmin;
}

.mp_janine_patch {
  z-index: 10;
  transform: translate(60%, 40%);
}

.janine_patch {
  width: 10vmin;
  left: 0vmin;
}


/* last page */

.endscreen {
  position: absolute;
  color: #fff;
  display: flex;
  height: 40vmin;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  opacity: 0;
  /* transform: translate(0%, -200%); */
}

.social_logos svg {
  width: 10vmin;
}
.social_logos a {
  display: inline-block;
  padding-right: 2vmin;  
}
.social_logos a:last-child {
  padding-right: 0;
}
.endscreen_twitter_fill {
  fill: #DF72F0;
}
.endscreen_twitter:hover .endscreen_twitter_fill {
  fill: #D1F76C;
}
.endscreen_linkedin_fill {
  fill: #DF72F0;
}
.endscreen_linkedin:hover .endscreen_linkedin_fill {
  fill: #D1F76C;
}

.last_updated {
  padding-top: 10vmin;
  font-size: 1.8vmin;
  font-family: Helvetica, sans-serif;
  color: #000;
}



.mp_solo {
  top: 30vmin;
  left: -30vmin;
}



.diamond {
  fill: #E3793E;
}

.letter_schaffer {
  fill: #D1F76C;
}

.letter_jozsef_J {
  fill: #DF72F0;
}

.letter_jozsef_O {
  fill: #DF72F0;
}

.letter_jozsef_S {
  fill: #DF72F0;
}

.letter_jozsef_Z {
  fill: #DF72F0;
}

.letter_jozsef_E {
  fill: #DF72F0;
}

.letter_jozsef_F {
  fill: #DF72F0;
}







/* safari only styling */

@media not all and (min-resolution:.001dpcm) { 

      h1 {   -webkit-text-stroke: 0.55vmin #000;
        text-shadow: 0.3vmin 0.3vmin #000;
        paint-order: stroke;
      }

      p {
        -webkit-text-stroke: 0.4vmin #000;
        text-shadow: 0.2vmin 0.2vmin #000;
        paint-order: stroke;
            
      }

      ul {
        -webkit-text-stroke: 0.4vmin #000;
        text-shadow: 0.2vmin 0.2vmin #000;
        paint-order: stroke;
      
      }

      .ct_content_1 a:visited {
        -webkit-text-stroke: 0.4vmin #000;
        text-shadow: 0.2vmin 0.2vmin #000;
        paint-order: stroke;
      }

      .ct_content_4 h1 {
        -webkit-text-stroke: 0.45vmin #000;
        text-shadow: 0.3vmin 0.3vmin #000;
        paint-order: stroke;
      }
      .ct_content_4 p {
        -webkit-text-stroke: 0.35vmin #000;
        text-shadow: 0.2vmin 0.2vmin #000;
        line-height: 4.5vmin;
      }
      .ct_content_6 h1 {
        -webkit-text-stroke: 0.35vmin #000;
        text-shadow: 0.2vmin 0.2vmin #000;
      }
      .ct_content_6 h2 {
        -webkit-text-stroke: 0.35vmin #000;
        text-shadow: 0.2vmin 0.2vmin #000;
        paint-order: stroke;
      }
      .ct_content_6 a {
        -webkit-text-stroke: 0.35vmin #000;
        /* apparently this is needed */
      }
}


/* chrome only styling */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    h1 {
      text-shadow: 4px 4px 0 #000, 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 5px 5px 0 #000;
    }
    p {
      text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      1.25px 1.25px 0 #000, -1.25px -1.25px 0 #000, -1.25px 1.25px 0 #000, 1.25px -1.25px 0 #000,
      1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000,
      4px 4px 0 #000, 3.5px 3.5px 0 #000, 3px 3px 0 #000, 2.5px 2.5px #000;
    }
    ul {
      text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      1.25px 1.25px 0 #000, -1.25px -1.25px 0 #000, -1.25px 1.25px 0 #000, 1.25px -1.25px 0 #000,
      1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000,
      4px 4px 0 #000, 3.5px 3.5px 0 #000, 3px 3px 0 #000, 2.5px 2.5px #000;
    }
    .ct_content_1 a:visited {
      text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      1.25px 1.25px 0 #000, -1.25px -1.25px 0 #000, -1.25px 1.25px 0 #000, 1.25px -1.25px 0 #000,
      1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000,
      4px 4px 0 #000, 3.5px 3.5px 0 #000, 3px 3px 0 #000, 2.5px 2.5px #000;
    }
    .ct_content_4 h1 {
      text-shadow: 4px 4px 0 #000, 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 5px 5px 0 #000;
    }
    .ct_content_4 p {
      text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      1.25px 1.25px 0 #000, -1.25px -1.25px 0 #000, -1.25px 1.25px 0 #000, 1.25px -1.25px 0 #000,
      1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000,
      4px 4px 0 #000, 3.5px 3.5px 0 #000, 3px 3px 0 #000, 2.5px 2.5px #000;
    }
    .ct_content_6 h1 {
      text-shadow: 4px 4px 0 #000, 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 5px 5px 0 #000;
    }
    .ct_content_6 h2 {
      text-shadow: 4px 4px 0 #000, 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 5px 5px 0 #000;
    }
    .ct_content_6 a {
      text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      1.25px 1.25px 0 #000, -1.25px -1.25px 0 #000, -1.25px 1.25px 0 #000, 1.25px -1.25px 0 #000,
      1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000,
      4px 4px 0 #000, 3.5px 3.5px 0 #000, 3px 3px 0 #000, 2.5px 2.5px #000;
    }

}


/* mobile styling */

@media screen and (max-width: 375px) {

  /* TODO */

}