body{
  font-family: "Avenir Next", "Avenir", sans-serif;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-color:#AEE3DD;
  overflow:hidden;
}
#backimg1{ 
  top:0vh;
  position:absolute;
  left:-2vw;
  width:102%;
  height:100vh;
  opacity:0.4;
  z-index: -1;}
#backimg2{ 
  position:absolute;
  top:100vh;
  left:-2vw;
  width:104%;
  height:100vh;
  opacity:0.4;
  z-index: -1;}
#backimg3{ 
  position:absolute;
  top:200vh;
  left:-2vw;
  width:104%;
  height:100vh;
  opacity:0.3;
  z-index: -1;}
#backimg4{ 
  position:absolute;
  top:300vh;
  left:-2vw;
  width:104%;
  height:100vh;
  opacity:0.3;
  z-index: -1;}
#backimg5{ 
  position:absolute;
  top:400vh;
  left:-2vw;
  width:104%;
  height:100vh;
  opacity:0.3;
  z-index: -1;}

#containertitle {
  top:33vh; left:2vw; 
  width:40vw; height:4vw; 
  position:relative; 
}
#title{ 
  position:absolute;
  top:0vw; left:5vw;
  font-family: 'Satisfy', cursive;
  font-size: 5.5vw; text-align: center; 
  font-weight: light; color:#FFC08F;  
  transition: all 2s;
  z-index: 1;
  text-shadow: 0.5vw 0.5vw #240E32;
}

.navbar {
  position:fixed;
  top:0vw;
  left:0vw;
  overflow: hidden;
  background-color: #240E32;
  font-family: Arial;
  width:100vw;
  z-index:3;
}
.navbar a {
  float: left;
  font-size: 2vw;
  color: #FFF2C1;
  text-align: center;
  padding: 1vw 5.75vw;
  text-decoration: none;
  border-left: 0.2vw solid #240E32;
  border-right: 0.2vw solid #240E32;
}
.navbar a:hover {
  border-left: 0.2vw solid #FFF2C1;
  border-right: 0.2vw solid #FFF2C1;
}

button{
  font-size:1.5vw;
  width: 7vw;
  height:5vw;
  margin-left: 1vw;
  margin-bottom: 1vw;
  padding: 0.3vw;
  transition: all 5s;
  text-align: center;
  background-color: #240E32;
  line-height: 2vw;
  border: solid #240E32;
}
.button:hover{
  background-image: linear-gradient(315deg, #240E32 20%, black 95%);
}
#back{
  position:fixed;
  left:0vw; 
  bottom:0vw;
  border-radius: 1vw;
}
a{text-decoration:none;
  color:white;
}

.polaroid {
  height: 13vw;
  margin: 0px;
}
.fig {
  float: left;
  position: relative;
  background-color: #FFF2C1;
  text-align: center;
  font-family: 'Nanum Pen Script', cursive;
  font-size: 2vw;
  padding: 1vw;
  margin: 2vw;
  box-shadow: 1px 2px 3px black;
}

#pic1 {
  position:absolute;
  top:13vh;
  left:60vw;
  -webkit-transform: rotate(-10deg);
  z-index: 1;
}
#pic2 {
  position:absolute;
  top:28vh;
  left:73vw;
  -webkit-transform: rotate(15deg);
  z-index: 2;
}
#pic3 {
  position:absolute;
  top:38vh;
  left:55vw;
  -webkit-transform: rotate(-25deg);
  z-index: 1;
}
#pic4 {
  position:absolute;
  top:56vh;
  left:70vw;
  -webkit-transform: rotate(8deg);
  z-index:2;
}
.polaroid:hover{
  height: 30vw;
}
#pic1:hover{
  z-index:4;
  -webkit-transform: rotate(0deg);
  top:20vh;
  left:50vw;
}
#pic2:hover{
  z-index:4;
  -webkit-transform: rotate(0deg);
  top:20vh;
  left:50vw;
}
#pic3:hover{
  z-index:4;
  -webkit-transform: rotate(0deg);
  top:20vh;
  left:50vw;
}
#pic4:hover{
  z-index:4;
  -webkit-transform: rotate(0deg);
  top:20vh;
  left:53vw;
}

#airplane{
  top:80vh; left:-10vw; 
  width:8vw; height:8vw; 
  position:absolute;
  animation: move 10s linear;
}
 @keyframes move {
   0%{
    position: absolute;
    top: 70vh;
    left: -10vw;
    transform: rotate(10deg);
   }
    25%{
    transform: rotate(25deg);
  }
  50%{
    transform: rotate(20deg);
  }
   75%{
    transform: rotate(15deg);
  }
   100%{
    position: absolute;
    top: 10vh;
    left:110vw;
   }
}

#illia{ 
  position:absolute;
  top:103vh; width:100vw;
  font-family: 'Cabin Sketch', cursive;
  font-size: 4.5vw; text-align: center; 
  font-weight: light; color:#240E32;  
  transition: all 2s;
  z-index: 1;
  text-shadow: 0.5vw 0.5vw #FFC08F;
}
#list{ 
  position:absolute;
  left:18vw;
  top:123vh; width:70vw;
  font-family: 'Gochi Hand', cursive;
  font-size: 2vw; text-align: left;  
}
li{padding-bottom: 1vw;}
li:hover{text-decoration:underline;}
video{
  top:1.5vw; left:-6.5vw;
  width:27vw; height:15vw;  
  position:relative; z-index: 1;
  border-radius: 15px 15px 15px; 
  filter: drop-shadow(1vw 1vw 1vw black);
  display: block; margin: 0 auto;
  transition: all 2s;
}
video:hover {
  box-shadow: 3px 3px 3px;
  transform: scale(1.3);
}

#future{ 
  position:absolute;
  top:202vh; width:100vw;
  font-family: 'Audiowide', cursive;
  font-size: 5vw; text-align: center; 
  font-weight: light; color:#240E32;  
  transition: all 2s;
  z-index: 1;
  text-shadow: 0.5vw 0.5vw #FFC08F;
}

.loader-wheel {
  top:245vh;
  position:absolute;
  animation: spin 1s infinite linear;
  border: 2px solid rgba(30, 30, 30, 0.2);
  border-left: 2px solid black;
  border-radius: 50%;
  height: 7vw;
  margin-bottom: 2vw;
  width: 7vw;
  left: 47vw;
}

.loader-text {
  position:absolute;
  top:260vh;
  width:100%;
  color:black;
  font-family: arial, sans-serif;
  text-align: center;
}

.loader-text:after {
  content: 'Loading';
  animation: load 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    content: 'Future is loading';
  }
  33% {
    content: 'Future is loading.';
  }
  67% {
    content: 'Future is loading..';
  }
  100% {
    content: 'Future is loading...';
  }
}


#random{width:20vw; position:absolute; 
font-family: 'Londrina Solid', cursive;
font-size: 4vw;
left:8vw;
animation: neon 10s linear infinite;
top:325vh;
}

@keyframes neon {
0%,100%{text-shadow:0 0 40px #06C678; color:#06C678;}
  25% {text-shadow:0 0 40px #C63206;
color:#C63206;}
  50% {text-shadow:0 0 40px #C3150A;
color:#C3150A;}
  75% {text-shadow:0 0 40px #3707AD;
color:#3707AD;}
}
.main {
  width: 30%;
  height: 60%;
  position:absolute; 
  top:322vh;left:37vw;
  margin: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.box {
  background: black;
  width: 15%;
  height: 24%;
  float: left;
  margin: 1vw 0 0 1vw;
}
.play:hover {
  opacity: 0.7;}
img {
  width: 100%;
  
}
#state {
  background:#efb810 ;
  background-size: 250%;
  width: 70%;
  line-height: 100%;
  float: left;
  margin: 1vw 0 0 1vw;
  padding: 0 1vw;
  color: black;
  font-size: 2vw;
}

#time::after {
  content: " sec /";
}
#score::after {
  content: " points";
}

.hidden {
  display: none !important;
}

#themes {
  margin: auto;
  height:10%;
  width:10%;
  left:46%;
  top:350vh;
  background-color: white;
  color:black;
  font-size: 100%;
  position:absolute;
  text-align:center;
}
#post {
  position: absolute;
  top: 300vh;
  left: 0;
  height: 80vh;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

#post > div {
  width: 20vw;
  background: white;
  color: black;
}

#post p:first-child, 
#post #final {
  font-weight: bold;
  letter-spacing: 0.5vw;
  margin: auto;
  padding: 1vw 2vw;
}

#post #again {
  color: black;
  text-decoration: none;
  margin: auto;
  padding: 1vw 2vw;
  width: 20vw;
  border: solid 0.5vw;
}

#post #again:hover {
  background: #6186aa;
  color: white;
}

#gallery{ 
  position:absolute;
  top:400vh; width:100vw;
  font-family: 'Splash', cursive;
  font-size: 5vw; text-align: center; 
  font-weight: light; color:#240E32;  
  transition: all 2s;
  z-index: 1;
  text-shadow: 0.5vw 0.5vw #FFC08F;
}

#carousel {
  position:absolute;
  top:425vh;
  perspective: 120vw;  
  padding-top: 10vh; 
  overflow: hidden;
  left:1vw;
  width:100vw;}

#spinner { 
  transform-style: preserve-3d; 
  height: 40vw; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
#spinner img { 
  width: 30vw; 
  position: absolute; left: 30vw;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
#spinner img:nth-child(2) { transform: rotateY(-45deg); }
#spinner img:nth-child(3) { transform: rotateY(-90deg); }
#spinner img:nth-child(4) { transform: rotateY(-135deg); }
#spinner img:nth-child(5){ transform: rotateY(-180deg); }
#spinner img:nth-child(6){ transform: rotateY(-225deg); }
#spinner img:nth-child(7){ transform: rotateY(-270deg); }
#spinner img:nth-child(8){ transform: rotateY(-315deg); }
#carousel ~ span { 
  margin: 7.5vw; 
  display: inline-block;  
  font-size: 6vw; 
  transition: 0.6s color; 
  position: relative; 
  top: 460vh;  
  color:black;}
#carousel ~ span:hover { color: #888; cursor: pointer; }