@-ms-viewport {
  width: device-width;
}

@font-face {
  font-family: "suisseMono";
  font-weight: 800;
  font-style: normal;
  color: black;
  src: url("../fonts/SuisseEDUIntlMono.woff") format("woff");
}

@font-face {
  font-family: "suisse";
  font-weight: 800;
  font-style: normal;
  color: black;
  src: url("../fonts/SuisseEDUIntl-Medium.woff") format("woff");
}

html {
  left: 5%;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

body {
  padding: 24px;
  position:absolute;
  font-family: "suisse";
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  width: 100%;
  height: 100%;
}

p {
  font-size: 0.5em;
  line-height: 1.2;
  background-color: rgba(255, 255, 255, 0.863);
}

.header {
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  background-color: rgb(0, 255, 0);
  width: 100%;
  padding: 2%;
}
.title {
  color: rgb(255, 255, 255);
  font-size: 14vw;
  width: 100%;
  z-index: -1;
  text-align: center;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  top: 0;
}

.stickyPlane {
  width: 100%;
  position: fixed;
  top: 6%;
  z-index: 1000;
}
.svgPlane {
  width: 11vw;
}

.intro {
  font-size: 4vw;
  line-height: 95%;
  padding-top: 0%;
  padding-bottom: 1%;
  margin-left: 1%;
  margin-right: 1%;
}

.bio{
  margin-top: 20%;
}

.bioTitle {
  font-size: 7vw;
  top: 100px;
  margin: 0;
  padding: 1%;
  color: white;
  background-color: red;
}

.bioSubTitle {
  font-size: 7vw;
  top: 100px;
  margin: 0;
  padding: 1%;
  color: white;
  background-color: blue;
}

.bioLabor {
  font-family: "suisseMono";
  font-size: 2em;
  margin: 1%;
}

.works {
  line-height: 1.1;
  margin-left: 17.5%;
  margin-right: 1%;
}

.workSubTitles {
  font-size: 2vw;
  left: 50%;
  top: 100px;
  height: 2.3vw;
  margin-left: 15%;
  margin-right: 1%;
  padding-top: 0.1vh;
  background-color: chartreuse;
}
.footer{
  margin-top: 300vh
}
.endTitle {
  /* margin-top: 300vh; */
  color:rgb(255, 0, 0);
  font-family: "suisse";
  font-size: 50vh;
  position: absolute;
}

#game {
  position: relative;
  left: 0;
  bottom: 0px;
  animation: endTitleAnim1 5s linear infinite;
}

@keyframes endTitleAnim1 {
  0% {
    left: -100%;
  }
  50% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

#over {
  position: relative;
  left: 0;
  bottom: 0px;
  animation: endTitleAnim2 5s linear infinite;
}

@keyframes endTitleAnim2 {
  0% {
    left: 100%;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.empty {
  height: 1000px;
}

img {
  max-width: 100%;
  height: auto;
  opacity: 1;
  filter: alpha (opacity(100));
}

img:hover {
  max-width: 100%;
  height: auto;
  opacity: 0;
  filter: alpha(opacity=30);
}

.svgAppear {
  opacity: 0;
}

.svgAppear:hover {
  opacity: 1;
}

.svg2 {
  margin: auto;
  position: absolute;
  top: 700vh;
  left: 10vw;
  width: 20vw;
  max-width: 100%;
  height: auto;
}

.svg2_1 {
  height: 1vmin;
  margin: auto;
  position: absolute;
  top: 220vh;
  left: 3.5vh;
  width: 30vh;
}

.svg3 {
  height: 1vmin;
  margin: auto;
  position: absolute;
  top: 450vh;
  left: 1vh;
  width: 100vh;
}

.svg4 {
  height: 1vmin;
  margin: auto;
  position: absolute;
  top: 620vh;
  right: 5vh;
  width: 80vh;
}

.image1 {
  position: absolute;
  top: 100vh;
  left: 10vw;
  width: 30vw;
  filter: drop-shadow(30px 30px 0px rgb(255, 0, 0));
}

.image2 {
  position: absolute;
  top: 200vh;
  left: 50vw;
  width: 32vw;
  filter: drop-shadow(30px 30px 0px rgb(255, 0, 0));
}

.image3 {
  position: absolute;
  top: 300vh;
  left: 15vw;
  width: 30vw;
  filter: drop-shadow(30px 30px 0px rgb(255, 0, 0));
}

.image4 {
  position: absolute;
  top: 400vh;
  left: 50vw;
  width: 40vw;
  filter: drop-shadow(-30px 30px 0px rgb(255, 0, 0));
}

.image5 {
  position: absolute;
  top: 500vh;
  left: 40vw;
  width: 30vw;
  filter: drop-shadow(-30px 30px 0px rgb(255, 0, 0));
}

.image6 {
  position: absolute;
  top: 580vh;
  left: 10vw;
  width: 30vw;
  filter: drop-shadow(30px 30px 0px rgb(255, 0, 0));
}

.image7 {
  position: absolute;
  top: 650vh;
  left: 5vw;
  width: 30vw;
  filter: drop-shadow(30px 30px 0px rgb(255, 0, 0));
}

.image8 {
  position: absolute;
  top: 700vh;
  left: 70vw;
  width: 30vw;
  filter: drop-shadow(-30px 30px 0px rgb(255, 0, 0));
}

.word {
  mix-blend-mode: multiply;
  background-color: rgb(0, 255, 0);
  color: white;
}

.word2 {
  mix-blend-mode: multiply;
  background-color: rgb(0, 0, 255);
  color: white;
}

@media screen and (max-width: 800px) {
  .intro {
    font-size: 8vw;
  }
  .bioLabor {
    font-size: 4vw;
  }
  .workSubTitles {
    font-size: 5vw;
    height: 5vw;
  }
  .image1 {
    left: 10vw;
    width: 40vw;
    filter: drop-shadow(10px 10px 0px rgb(255, 255, 0));
  }
  .image2 {
    left: 30vw;
    width: 45vw;
    filter: drop-shadow(10px 10px 0px rgb(255, 255, 0));
  }
  .image3 {
    left: 40vw;
    width: 40vw;
    filter: drop-shadow(-10px -10px 0px rgb(255, 255, 0));
  }
  .image4 {
    left: 3vw;
    width: 50vw;
    filter: drop-shadow(10px 10px 0px rgb(255, 255, 0));
  }
  .image5 {
    left: 15vw;
    width: 55vw;
    filter: drop-shadow(-10px 10px 0px rgb(255, 255, 0));
  }
  .image6 {
    left: 20vw;
    width: 50vw;
    filter: drop-shadow(10px 10px 0px rgb(255, 255, 0));
  }
  .image7 {
    left: 5vw;
    width: 50vw;
    filter: drop-shadow(-10px 10px 0px rgb(255, 255, 0));
  }
  .image8 {
    left: 30vw;
    width: 50vw;
    filter: drop-shadow(10px 10px 0px rgb(255, 255, 0));
  }
  .footer{
    margin-top: 150vh
  }
  .endTitle {
    font-size: 40vh;
  }


}


@media screen and (max-width: 600px) {
.image1 {
  left: 10vw;
  width: 70vw;
  filter: drop-shadow(10px 10px 0px rgb(0, 0, 255));
}
.image2 {
  left: 23vw;
  width: 55vw;
  filter: drop-shadow(10px 10px 0px rgb(0, 0, 255));
}
.image3 {
  left: 15vw;
  width: 70vw;
  filter: drop-shadow(-10px -10px 0px rgb(0, 0, 255));
}
.image4 {
  left: 3vw;
  width: 70vw;
  filter: drop-shadow(10px 10px 0px rgb(0, 0, 255));
}
.image5 {
  left: 10vw;
  width: 60vw;
  filter: drop-shadow(-10px 10px 0px rgb(0, 0, 255));
}
.image6 {
  left: 14vw;
  width: 70vw;
  filter: drop-shadow(10px 10px 0px rgb(0, 0, 255));
}
.image7 {
  left: 15vw;
  width: 70vw;
  filter: drop-shadow(-10px 10px 0px rgb(0, 0, 255));
}
.image8 {
  left: 12vw;
  width: 50vw;
  filter: drop-shadow(10px 10px 0px rgb(0, 0, 255));
}

.footer{
  margin-top: 90vh
}
.endTitle {
  font-size: 30vh;
}


}

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

  .footer{
    margin-top: 200vh
  }
  .endTitle {
    font-size: 20vh;
  }

}