body {
    background-color: solid black;

}
.revealLeft{
  opacity: 0;
}
.revealLeft.active{
  opacity: 1;
  animation: 1s slide-right 1s forwards;
  transform:translateX(-110%);
}
@keyframes slide-right{
  to {
    transform:translateX(0);
  }
}

.revealRight{
  opacity: 0;
}
.revealRight.active{
  opacity: 1;
  animation: 1s slide-right 1s forwards;
  transform:translateX(110%);
}
@keyframes slide-right{
  to {
    transform:translateX(0);
  }
}

p {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw;
    font-weight: 900;
    text-decoration: none;
    color: rgb(0, 0, 0);
    display: inline-block;
    background-size: 120% 100%;
    
    animation: .1s shake infinite;
  }
  @keyframes shake {
    0% { transform: skewX(-20deg); }
    5% { transform: skewX(20deg); }
    10% { transform: skewX(-15deg); }
    15% { transform: skewX(15deg); }
    20% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }  
  }

  
 #Nothing1 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(1px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 300px;
    padding-bottom: 50px;
}

#Nothing2 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(2px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#Nothing3 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(3px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#Nothing4 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(4px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Nothing5 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(5px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#Nothing6 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(6px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#Nothing7 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(7px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#Nothing8 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: 6px;
    font-size: 2vw; 
    filter: blur(8px);
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
}

#coffee1 {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}
#coffee2 {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 5px;
    padding-left: 520px;
    padding-right: 20px;}

    #wine1 {
        position: relative;
        text-transform: lowercase;
        font-size: 2vw; 
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(168, 11, 11);
        padding-top: 50px;
        padding-bottom: 50px;
        }
        .container {
            filter: url('#gooey');
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(168, 11, 11);
        }
        
        .liquid-1 {
            position: relative;
        }
        
        span {
            letter-spacing: 10px;
            font-size: 8rem;
        }
        
        .drop {
            position: absolute;
            background: var(--yellow);
            width: 22px;
            height: 22px;
            border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;
            animation: 6s move ease infinite;
        }
        
        .drop:after {
            width: 17px;
            height: 17px;
            content: '';
            position: absolute;
            background: var(--yellow);
            border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;
            left: 25px;
            top: 3px;
            animation: 6s drop_effect ease infinite;
        }
        
        svg {
            position: absolute;
        }
        
        @keyframes move {
            0%, 100% {
                transform: translate(370px);
            }
            
            50% {
                transform: translate(-370px);
            }
        }
        
        @keyframes drop_effect {
            0% {
                left: 0px;
            }
            5% {
                left: 35px;
            }
            45% {
                left: 0px;
            }
            50% {
                left: 0px;
            }
            55% {
                left: -30px;
            }
            95% {
                left: 0px;
            }
            100% {
                left: 0;
            }
        }
.please {
  position: relative;
  text-transform: lowercase;
  font-size: 2vw; 
  display: flex;
  align-items: left;
  justify-content: left;
  padding-top: 5px;
}
.no {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: right;
    justify-content: right;
    padding-top: 5px;
}
.paper {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
    }
.music {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 5px;
  }
.breast {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }
.geza {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 5px;
  }

.thank {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: right;
    justify-content: right;
    padding-top: 5px;
  }

.funny {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
  }
  #knowing {
    position: relative;
    text-transform: lowercase;
    font-size: 28vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 50px;
    padding-bottom: 50px;
    text-decoration: underline red;
 
  }

  #guilty {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    animation: .1s shake infinite;
  }
  @keyframes shake {
    0% { transform: skewX(-20deg); }
    5% { transform: skewX(20deg); }
    10% { transform: skewX(-20deg); }
    15% { transform: skewX(20deg); }
    20% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }  
  }

  #say {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
  }
#anything { 
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 5px;
    padding-right: 600px;
}
#elbows {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
}
#stares1 {position: relative;
    text-transform: lowercase;
    font-size: 8vw; 
    display: flex;
    align-items: right;
    justify-content: right;
  align-items: left;
justify-content: left;
animation: .1s shake1 infinite;
}
@keyframes shake1 {
30% { transform: skewX(-20deg); }
10% {transform: skewY(-70deg);}
  30% { transform: skewX(20deg); }

  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

#anda {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
}

#why {position: relative;
    text-transform: lowercase;
    font-size: 15vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
  filter: blur(2px);
}

#unreel {
    position: relative;
    text-transform: lowercase;
    font-size: 1vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
   
    filter: blur(1px);
}
#place { position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;

}

#change {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
}
#metro {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
    animation: .1s shake2 infinite;
}
@keyframes shake2 {
30% { transform: skewX(-20deg); }
10% {transform: skewY(-70deg);}
  30% { transform: skewX(20deg); }

  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}


#sad {position: relative;
    text-transform: lowercase;
    font-size: 8vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 450px;
    padding-right: 445px;
}
#wrong { position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
    animation: .1s shake infinite;
  }
  @keyframes shake {
    0% { transform: skewX(-20deg); }
    5% { transform: skewX(20deg); }
    10% { transform: skewX(-20deg); }
    15% { transform: skewX(20deg); }
    20% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }  
  }

#voice {position: relative;
    text-transform: uppercase;
    font-size: 4vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 10px;

}
#high {position: relative;
    text-transform: uppercase;
    font-size: 3vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
   
#horsed {position: relative;
    text-transform: uppercase;
    font-size: 2vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1Opx;
    padding-bottom: 10px;
}
#scared {position: relative;
    text-transform: uppercase;
    font-size: 1vw; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1px;
    padding-bottom: 1px;
}
#run {position: relative;
    text-transform: uppercase;
    font-size: 1vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-left: 625px;
    padding-top: 10px;
    padding-bottom: 10px;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

#cry {  position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}
#make {position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}
#sth {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}
#liars {
    position: relative;
    text-transform: lowercase;
    font-size: 2vw; 
    display: flex;
    align-items: left;
    justify-content: left;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}