styles.css

/*
 * styles.css - Style lives here.
 */

@font-face {
  font-family: "silkscreen";
  src: url("fonts/silkscreen.ttf") format("truetype");
}

@font-face {
  font-family: "open-sans-semibold";
  src: url("fonts/open-sans-semibold.ttf") format("truetype");
}

@font-face {
  font-family: "open-sans-light";
  src: url("fonts/open-sans-light.ttf") format("truetype");
}

:root {
  --body-font-color: white;
  --body-font-family: "open-sans-semibold";
  --header-font-color: #f9e512;
  --header-font-family: "silkscreen";
  --header-font-size: 8vw;
  --mobile-about-offset: 150vw;
  --mobile-faq-offset: 340vw;
  --mobile-schedule-offset: 530vw;
  --mobile-workshops-offset: 715vw;
  --mobile-projects-offset: 845vw;
  --mobile-footer-offset: 985vw;
  --mobile-height: 1020vw;
  /* If world-height is updated, update the media query
    * at bottom of file too. */
  --world-height: 60vw;
}

/*** MOBILE **/
html,
body {
  margin: 0;
}

a {
  color: var(--body-font-color);
  text-decoration: underline;
}

.mobile {
  display: initial;
}

.desktop {
  display: none;
}

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/** MOBILE - GENERAL **/

#mlh-trust-badge {
  position: absolute;
  right: 2vw;
  top: 0;
  width: 10vw;
  z-index: 11;
}

#mobile-container {
  height: var(--mobile-height);
  display: block;
  overflow: hidden;
  position: absolute;
  width: 100vw;
}

.mobile-background {
  z-index: 0;
}

.mobile-background embed {
  display: block;
  height: auto;
  overflow: hidden;
  width: 100vw;
}

.blk {
  margin: 0;
}

.subblk {
  margin: 0;
}

/** MOBILE - LANDING **/

#mobile-landing-img1 {
  right: 0vw;
  overflow: hidden;
  position: absolute;
  top:0vw;
  width: 101vw;
  z-index: 1;
}

#mobile-landing-img2 {
  left: 4vw;
  overflow: hidden;
  position: absolute;
  top: 70vw;
  width: 92vw;
  z-index: 1;
}

#mobile-landing-txt1 {
  color: var(--body-font-color);
  font-family: var(--header-font-family);
  font-size: 10vw;
  left: 0vw;
  overflow: hidden;
  position: absolute;
  text-align: center;
  display: none;
  top: 62vw;
  z-index: 1;
}

#mobile-landing-txt2 {
  color: var(--body-font-color);
  font-family: var(--header-font-family);
  font-size: 6vw;
  left: 32vw;
  overflow: hidden;
  position: absolute;
  top: 100vw;
  z-index: 1;
}

#mobile-landing-txt3 {
  color: var(--body-font-color);
  font-family: var(--header-font-family);
  font-size: 6vw;
  left: 34.8vw;
  overflow: hidden;
  position: absolute;
  text-decoration: underline;
  top: 116vw;
  z-index: 1;
}

/** MOBILE - ABOUT **/

#mobile-about-img1 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: var(--mobile-about-offset);
  width: 80vw;
  z-index: 1;
}

#mobile-about-img2 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-about-offset) + 55vw);
  width: 8vw;
  z-index: 1;
}

#mobile-about-txt1 {
  font-family: var(--header-font-family);
  color: var(--header-font-color);
  font-size: var(--header-font-size);
  left: 12vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-about-offset) + 70vw);
  z-index: 1;
}

#mobile-about-txt2 {
  color: var(--body-font-color);
  font-family: var(--body-font-family);
  font-size: 4vw;
  left: 16vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-about-offset) + 80vw);
  width: 70vw;
  z-index: 1;
}

/** MOBILE - FAQ **/

#mobile-faq-img1 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: var(--mobile-faq-offset);
  width: 80vw;
  z-index: 1;
}

#mobile-faq-img2 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-faq-offset) + 47vw);
  width: 8vw;
  z-index: 1;
}

#mobile-faq-txt1 {
  color: var(--header-font-color);
  font-family: var(--header-font-family);
  font-size: var(--header-font-size);
  left: 12vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-faq-offset) + 62vw);
  z-index: 1;
}

#mobile-faq-blk1 {
  color: var(--body-font-color);
  font-family: var(--body-font-family);
  font-size: 4vw;
  height: 100vw;
  left: 10vw;
  overflow: auto;
  position: absolute;
  top: calc(var(--mobile-faq-offset) + 76vw);
  width: 80vw;
  z-index: 1;
}

/** MOBILE - SCHEDULE **/

#mobile-schedule-img1 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: var(--mobile-schedule-offset);
  width: 80vw;
  z-index: 1;
}

#mobile-schedule-img2 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-schedule-offset) + 65vw);
  width: 8vw;
  z-index: 1;
}

#mobile-schedule-txt1 {
  color: var(--header-font-color);
  font-family: var(--header-font-family);
  font-size: var(--header-font-size);
  left: 12vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-schedule-offset) + 79vw);
  z-index: 1;
}

#mobile-schedule-blk1 {
  color: var(--body-font-color);
  font-family: var(--body-font-family);
  font-size: 4vw;
  height: 125vw;
  left: 10vw;
  overflow: auto;
  position: absolute;
  top: calc(var(--mobile-schedule-offset) + 95vw);
  width: 80vw;
  z-index: 1;
}

/** MOBILE - WORKSHOPS **/

#mobile-workshops-img1 {
  left: 2vw;
  overflow: hidden;
  position: absolute;
  top: var(--mobile-workshops-offset);
  width: 100vw;
  z-index: 1;
}

#mobile-workshops-img2 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-workshops-offset) + 75vw);
  width: 8vw;
  z-index: 1;
}

#mobile-workshops-txt1 {
  font-family: var(--header-font-family);
  color: var(--header-font-color);
  font-size: var(--header-font-size);
  left: 12vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-workshops-offset) + 90vw);
  z-index: 1;
}

#mobile-workshops-txt2 {
  color: var(--body-font-color);
  font-family: var(--body-font-family);
  font-size: 4vw;
  left: 16vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-workshops-offset) + 100vw);
  width: 70vw;
  z-index: 1;
}

/** MOBILE - PROJECTS **/

#mobile-projects-img1 {
  right: 0vw;
  overflow: hidden;
  position: absolute;
  top: var(--mobile-projects-offset);
  width: 85vw;
  z-index: 1;
}

#mobile-projects-img2 {
  left: 10vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-projects-offset) + 75vw);
  width: 8vw;
  z-index: 1;
}

#mobile-projects-txt1 {
  font-family: var(--header-font-family);
  color: var(--header-font-color);
  font-size: var(--header-font-size);
  left: 12vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-projects-offset) + 90vw);
  z-index: 1;
}

#mobile-projects-txt2 {
  color: var(--body-font-color);
  font-family: var(--body-font-family);
  font-size: 4vw;
  left: 16vw;
  overflow: hidden;
  position: absolute;
  top: calc(var(--mobile-projects-offset) + 100vw);
  width: 70vw;
  z-index: 1;
}

/** MOBILE - FOOTER **/

#mobile-footer-img1 {
  overflow: hidden;
  position: absolute;
  top: var(--mobile-footer-offset);
  width: 12vw;
  left: 44vw;
  z-index: 1;
}

/*** DESKTOP ***/
@media (min-device-width: 800px) and (min-width: 800px) {
  html,
  body {
    margin: 0;
  }

  .desktop {
    display: initial;
  }

  .mobile {
    display: none;
  }

  #mobile-container {
    height: 0;
  }

  #desktop-container {
    height: var(--world-height);
    display: block;
    margin: 0;
    overflow: scroll;
    position: absolute;
    width: 100vw;
  }

  #backdrop-container {
    height: var(--world-height);
    display: block;
    margin: 0;
    overflow: hidden;
    position: absolute;
    width: 100vw;
  }

  #backdrop {
    display: block;
    margin: 0;
    position: absolute;
    width: 100vw;
    z-index: 0;
  }

  #world-container {
    height: var(--world-height);
    display: block;
    margin: 0;
    overflow: hidden;
    position: absolute;
    width: 100vw;
  }

  #world {
    /* left: -76vw; */
    margin: 0;
    position: absolute;
    /* top: -39vw; */
    width: 100vw;
    z-index: 1;
  }

  #sketchpad {
    margin: 0;
    position: absolute;
    width: 100vw;
    z-index: 9;
  }

  #mlh-trust-badge {
    display: block;
    max-width: 75px;
    position: absolute;
    right: 5vw;
    top: 0;
    width: 6vw;
    z-index: 10;
  }

  /** Headers **/

  .header-text {
    color: #7096A9;
    font-family: var(--header-font-family);
    font-size: 1.8vw;
    position: absolute;
    z-index: 2;
  }

  .subhead {
    color: var(--body-font-color);
    font-family: var(--body-font-family);
    font-size: 1.3vw;
    position: absolute;
    z-index: 2;
    letter-spacing: 2px;
    /* right: 37.5vw; */
    left: 4vw;
    top: 15vw;
  }

  /* .info-text {
    color: var(--header-font-color);
    font-family: var(--header-font-family);
    font-size: 2.2vw;
    position: absolute;
    z-index: 2;
    text-shadow: 1px 2px rgba(0, 0, 0, 0.15);
  } */

  #main-text {
    font-size: 3.2vw;
    /* right: 21vw; */
    left: 1vw;
    top: 4.2vw;
    text-shadow: none;
  }

  #main-text-img {
    font-size: 3.2vw;
    /* right: 21vw; */
    left: 3.7vw;
    top: 6.5vw;
    width: 18vw;
    text-shadow: none;
  }

  #faq-text {
    left: 56.8vw;
    top: 20.2vw;
  }

  #register-text {
    left: 76.2vw;
    top: 45.2vw;
  }

  #schedule-text {
    left: 32.2vw;
    top: 45.2vw;
  }

  #sponsors-text {
    /* not relevant for makes */
    right: 1vw;
    top: 12vw;
  }

  #about-text {
    right: 77.8vw;
    top: 35.2vw;
  }

  #workshops-text {
    left: 32.7vw;
    top: 20.2vw;
  }

  #projects-text {
    right: 1.8vw;
    top: 20.2vw;
  }

  /** PINS **/

  .pin {
    position: absolute;
    width: 2.2vw;
    z-index: 2;
  }

  #pin1 {
    /* faq */
    left: 49.8vw;
    top: 18vw;
  }

  #pin2 {
    /* register */
    left: 80.8vw;
    top: 47vw;
  }

  #pin3 {
    /* schedule */
    left: 37.8vw;
    top: 47.3vw;
  }

  #pin4 {
    /* sponsor --> not relevant for makes */
    right: 6.5vw;
    top: 14.3vw;
  }

  #pin5 {
    /* about */
    right: 89.3vw;
    top: 32.2vw;
  }

  #pin6 {
    /* workshops */
    left: 27.3vw;
    top: 18.7vw;
  }

  #pin7 {
    /* projects */
    right: 24.3vw;
    top: 18.5vw;
  }

  /*** CHARACTERS ***/
  .character {
    position: absolute;
    z-index: 2;
  }

  #character1 {
    /* lighthouse - faq */
    left: 10.3vw;
    top: 28vw;
    width: 2.2vw;
  }

  #character2 {
    /* mayor - registration */
    left: 42.9vw;
    top: 17.5vw;
    width: 2.2vw;
  }

  #character3 {
    /* resident - about */
    left: 77.2vw;
    top: 39.5vw;
    width: 2.6vw;
  }

  #character4 {
    /* mapshop - schedule */
    left: 47.83vw;
    top: 42.15vw;
    width: 2.366vw;
  }

  #banner {
    margin: 0;
    position: absolute;
    width: 100vw;
    height: 17vw;
    z-index: 12;
    font-size: 6px;
  }

  #drape {
    margin: 0;
    position: absolute;
    width: 100vw;
    z-index: 12;
    font-size: 6px;
  }

  #help {
    margin: 0;
    position: absolute;
    width: 3.2vw;
    height: 3.2vw;
    left: 3.5vw;
    top: 34.5vw;
    z-index: 1;
  }
}

/* Backdrop should fill height. So, if the display height
 * exceeds the world height. */
@media (min-device-width: 800px) and (min-width: 800px) and (min-height: 60vw) {
  #desktop-container {
    height: 100vh;
  }

  #backdrop-container {
    height: 100vh;
  }

  #world-container {
    height: 100vh;
  }
}

#makes2023 {
  width: 100%;
  background: #ea7754;
  font-size: 2rem;
  font-family: open-sans-semibold;
  text-align: center;
  color: white;
  cursor: pointer;
  display: block;
}