@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{padding:0;margin:0;box-sizing:border-box;}


body {
  height:100vh;
  width:100vw;
  background-color:#181817;
  position:relative;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display: none;
}

p{
  color:lightgrey;
  font-size:14px;
  display: none;
} 
.text{
  display: block;
  position: absolute;
  padding:10px;
  animation-name: change-position;
  animation-duration:5s;
  animation-iteration-count:infinite;
  animation-timing-function: ease-in-out;
  text-shadow: 5px 5px 0px rgba(0,0,0,0.1);
}
@keyframes change-bg{
  0%{background-color: var(--f-color);}
  25%{background-color: var(--s-color);}
  50%{background-color: var(--t-color);}
  75%{background-color: var(--fr-color);}
  100%{background-color: var(--f-color);}
}
@keyframes change-position{
  0%{transform: translate(0px,0px);
    text-shadow: 5px 5px 0px rgba(0,0,0,0.1);
  }
  15%{
    letter-spacing: 5px;
  }
  25%{
    letter-spacing: 0;
    transform: translate(73vw,0px) scaleX(1.0);
  }
  50%{
    transform: translate(73vw,83vh);
    letter-spacing: 0px;
  }
  65%{
    letter-spacing: 5px;
  }
  75%{
    letter-spacing: 0px;
    transform: translate(0vw,83vh);
  }
  100%{
    transform: translate(0px,0px);
  }
}

body {
    background: #262626;
    color: #333;
    font: 100% Lato, Arial, Sans Serif;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#background-wrap {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

#main-content{
    -webkit-animation: bounce 2s ease-in-out infinite alternate;
    -moz-animation: bounce 2s ease-in-out infinite alternate;
    animation:  bounce 2s ease-in-out infinite alternate;
    background-color: #1c1c1cc4;
    width: 80%;
    color: lightgrey;
    padding: 75px;
    border-radius: 90px;
    margin-top: 10%;
    vertical-align:center;
    margin-left:10%;
    height: fit-content;
}

#swap{
    -webkit-animation: fade 3s linear infinite;
    -moz-animation: fade 3s linear infinite;
    animation: fade 3s linear infinite;
}

#scream{
    -webkit-animation: fade 3s linear infinite;
    -moz-animation: fade 3s linear infinite;
    animation: fade 3s linear infinite;
}

#story-content{
    background-color: #1c1c1cc4;
    width: 80%;
    color: lightgrey;
    padding: 75px;
    border-radius: 90px;
    margin-top: 10%;
    vertical-align: center;
    margin-left: 10%;
    font-size: 10px;
}

#main-content-container{
    height: 90%;
    display: flex;
    background-color: none;
}
/* OBJECTS */

.floating {
    height: 200px;
    position: absolute;
    width: 200px;
    color: #2e2e2e;
    font-size: 42px;
    text-align:center;
    vertical-align:center;  
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.floating:after {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    
    
    content: "";
    height: 180px;
    left: 10px;
    position: absolute;
    width: 180px;
}
/* ANIMATIONS */

.x1 {
    -webkit-animation: animateText 75s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 73s linear infinite;
    -moz-animation: animateText 75s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 73s linear infinite;
    animation: animateText 75s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 73s linear infinite;
    left: -5%;
    top: 5%; 
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}
.x2 {
    -webkit-animation: animateText 70s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 33s linear infinite;
    -moz-animation: animateText 70s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 33s linear infinite;
    animation: animateText 70s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 33s linear infinite;
    
    left: 5%;
    top: 80%;
    
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateText 48s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 43s linear infinite;
    -moz-animation: animateText 48s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 43s linear infinite;
    animation: animateText 48s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 43s linear infinite;
    
    left: 10%;
    top: 40%;
    
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateText 52s linear infinite, sideWays 3s ease-in-out infinite alternate, fade 23s linear infinite;
    -moz-animation: animateText 52s linear infinite, sideWays 3s ease-in-out infinite alternate, fade 23s linear infinite;
    animation: animateText 52s linear infinite, sideWays 3s ease-in-out infinite alternate, fade 23s linear infinite;
    
    left: 20%;
    top: 0;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateText 69s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 293s linear infinite;
    -moz-animation: animateText 69s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 293s linear infinite;
    animation: animateText 69s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 293s linear infinite;
    
    left: 30%;
    top: 50%;
    
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateText 41s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 93s linear infinite;
    -moz-animation: animateText 41s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 93s linear infinite;
    animation: animateText 41s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 93s linear infinite;
    
    left: 50%;
    top: 0;
    
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateText 90s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 53s linear infinite;
    -moz-animation: animateText 90s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 53s linear infinite;
    animation: animateText 90s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 53s linear infinite;
    
    left: 65%;
    top: 70%;
    
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateText 82s linear infinite, sideWays 3s ease-in-out infinite alternate, fade 33s linear infinite;
    -moz-animation: animateText 82s linear infinite, sideWays 3s ease-in-out infinite alternate, fade 33s linear infinite;
    animation: animateText 82s linear infinite, sideWays 3s ease-in-out infinite alternate, fade 33s linear infinite;
    
    left: 80%;
    top: 10%;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateText 39s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 23s linear infinite;
    -moz-animation: animateText 39s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 23s linear infinite;
    animation: animateText 39s linear infinite, sideWays 4s ease-in-out infinite alternate, fade 23s linear infinite;
    
    left: 90%;
    top: 50%;
    
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateText 26s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 13s linear infinite;
    -moz-animation: animateText 26s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 13s linear infinite;
    animation: animateText 26s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 13s linear infinite;

    left: 80%;
    top: 80%;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x11 {
    -webkit-animation: animateText 300s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 300s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 300s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 10%;
    top: 20%;
    font-size:9px;
    
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x12 {
    -webkit-animation: animateText 302s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 302s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 302s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 20%;
    top: 30%;
    font-size:9px;

    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x13 {
    -webkit-animation: animateText 304s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 304s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 304s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 30%;
    top: 40%;
    font-size:9px;

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x14 {
    -webkit-animation: animateText 306s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 306s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 306s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 40%;
    top: 50%;
    font-size:9px;

    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x15 {
    -webkit-animation: animateText 308s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 308s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 308s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 50%;
    top: 60%;
    font-size:9px;

    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x16 {
    -webkit-animation: animateText 310s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 310s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 310s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 70%;
    top: 80%;
    font-size:9px;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.x17 {
    -webkit-animation: animateText 312s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    -moz-animation: animateText 312s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;
    animation: animateText 312s linear infinite, sideWays 2s ease-in-out infinite alternate, fade 280s linear infinite;

    left: 80%;
    top: 90%;
    font-size:9px;

    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
/* KEYFRAMES */
@-webkit-keyframes fade {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
 }
  
@keyframes fade {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}

@-webkit-keyframes animateText {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateText {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateText {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}


@-webkit-keyframes bounce { 
    0% { 
        margin-top:0px;
    }
    100% { 
        margin-top:20px;
    }
}

@-moz-keyframes bounce { 
    0% { 
        margin-top:0px;
    }
    100% { 
        margin-top:20px;
    }
}

@keyframes bounce { 
    0% { 
        margin-top:0px;
    }
    100% { 
        margin-top:20px;
    }
}