/* Fonts */
@font-face {
    font-family: "Open Sans";
    src: url(fonts/OpenSans/OpenSans-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "Open Sans Light";
    src: url(fonts/OpenSans/OpenSans-Light.ttf) format("truetype");
}
@font-face {
    font-family: "Morsal";
    src: url(fonts/Morsal.ttf) format("truetype");
}
@font-face {
    font-family: "Bodoni";
    src: url(fonts/Bodoni.ttf) format("truetype");
}
@font-face {
    font-family: "Five Years Old";
    src: url(fonts/Fiveyearsold.ttf) format("truetype");
}
@font-face {
    font-family: "Briberra";
    src: url(fonts/Briberra.otf) format("truetype");
}

/* Defaults */
html, body {
  margin: 0;
  margin-top: 0;
  padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 28px;
  background-color: #d1d1d1;
}
h1 {
  font-family: 'Open Sans', sans-serif;
  color: #2A324B;
  text-align: center;
  font-size: calc(10px + 10vw);
  font-weight: 700;
  line-height: calc(10px + 10vw);
}
p {
  margin: 75px 0;
}

/* Parallax */
.MainContainer {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
.ContentContainer {
  position: relative;
  display: block;
  background-color: white;
  z-index: 1;
}
.Content {
  max-width: 750px;
  margin: 0 auto;
  padding: 75px 0;
}
.ParallaxContainer {
  display: flex;
  flex: 1 0 auto;
  position: relative;
  z-index: -1;
  height: 100vh;
  justify-content: center;
  align-items: center;
  transform: translateZ(-1px) scale(2);
  background-color: #d1d1d1;
}
.imgContainer {
  display: absolute;
  width: 100%;
  height: auto;
}
.desktop {
  position: absolute;
  width:100%;
}
#genre-container {
  display: none;
  width: 100%;
  padding-bottom: 10vw;
}
#static-container {
  display: none;
  width: 100%;
  padding-top: 10vw;
}
#static-container h1 {
  color: #DB5461;
  display: none;
  -webkit-animation-duration: .5s;
  -webkit-animation-delay: .1s;
}
#arrow-container {
  display: none;
  position: absolute;
  width: 50%;
  bottom:3vw;
}
#arrow-container img {
  width: 10%;
  display: block;
  margin: auto;
}
#start-container {
  display: none;
  width: 100%;
  padding-top: 30vw;
}
#start-container h1 {
  font-size: calc(3px + 3vw);
  line-height: calc(2px + 2vw);
  text-align: center;
  display: none;
}

/*Opening Animation */
#desk-plant {
  top:0;
  image-rendering: -webkit-optimize-contrast;
  -webkit-animation-duration: .4s;
  -webkit-animation-delay: .2s;
}
#desk-notebook {
  bottom:0;
  image-rendering: -webkit-optimize-contrast;
  -webkit-animation-duration: .4s;
  -webkit-animation-delay: .4s;
}
#desk-arm {
  bottom:0;
  image-rendering: -webkit-optimize-contrast;
  -webkit-animation-duration: .5s;
  -webkit-animation-delay: .5s;
}
#desk-text {
  width:50%;
}
#genre-1 {
  display: none;
  font-family: 'Morsal', serif;
  font-size: calc(8px + 8vw);
}
#genre-2{
  display: none;
  font-family: 'Bodoni', serif;
  font-size: calc(8px + 8vw);
}
#genre-3{
  display: none;
  font-family: 'Five Years Old', serif;
  font-size: calc(8px + 8vw);
}
#genre-4{
  display: none;
  font-family: 'Briberra', serif;
  font-size: calc(12px + 12vw);
}
#genre-5{
  display: none;
  color: #DB5461;
}
.genres {
  -webkit-animation-duration: .5s;
  -webkit-animation-delay: .1s;
}
.stat {
  -webkit-animation-duration: .2s;
  -webkit-animation-delay: .1s;
}
.arrow {
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 3s;
  -webkit-animation-iteration-count: 10;
}
.colorUp {
    -webkit-animation:colorchange 3s infinite alternate;
}