@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Silkscreen:wght@400;700&family=VT323&display=swap');

*{
    margin: 0px;
    padding: 0px;
    float: unset;
}

/* Page Structure */

#quote1 {
    background-color: #ffffff;
    text-align: left;
}

#top_container {
    padding-top: 50px;
    width:960px;
    height:auto;
    margin: auto;
    overflow:hidden;
}

#quote2 {
    padding: 50px;
    background-color: #060707;
    text-align: right;
}

#quote3 {
    padding: 50px;
    background-color: #ffffff;
}

#quote4 {
    padding: 50px;
    background-color: #000000;
}

#quote5 {
    padding: 50px;
    background-color: #ff0000;
}

#quote6 {
    padding: 50px;
    background-color: #ffffff;
}

#quote7 {
    padding: 50px;
    background-color: #080808;
}

#quote8 {
    padding: 100px;
    background-color: #ffffff;
}

#quote9 {
    padding: 50px;
    background-color: #000000;
}

#quote10 {
    padding: 50px;
    background-color: #ffffff;
}

/* Text Hierarchy */

h1 {
    margin-bottom: 0;
    font-family: Courier New;
    font-size:68px;
    text-align: left;
    color: #030303;
}

h2 {
    margin-top: 0;
    text-align: right;
    font-family: Helvetica;
    font-size: 65px;
    color: #FFFFFF;
}

h3 {
    text-align:center;
    font-family: Georgia;
    font-size:65px;
    color: #000000;
    font-weight:normal;
}

h4 {
    font-family: Impact;
    font-size: 70px;
    text-align: right;
    color: #ffffff;
    line-height: 72px;
}

h5 {
    text-align:center;
    font-family: Gill Sans;
    font-size: 72px;
    color: #030302;
    font-weight:lighter;
}

h6 {
    font-family: Baskerville;
    font-size: 30px;
    line-height: 33px;
    text-align: right;
    width: 960px;
    color: #000000;
    padding-top: 30px;
    padding-bottom: 30px;
}

h7 {
    text-align: left;
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
}

h8 {
    text-align: center;
    font-family: 'Roc Grotesk';
    font-size: medium;
    color: rgb(156, 242, 255);
    display: inline-block;
    animation: wave 0.8s ease-in-out infinite;
}

h9 {
    font-family: "VT323", monospace;
    font-size: 80px;
    text-align: center;
    color: #FFFFFF;
}

h10 {
    text-align: right;
    font-family: Impact;
    font-size: 30px;
    color: #ef0004;
    line-height: 50px;
}

.italic1 {
    font-style: italic;
    font-weight:900;
    color: #d30d0deb;
}

.underline {
    text-decoration:underline;
}

.italic2 {
    font-style: italic;
    font-weight:900;
    color: #000000;
}
 
.italic3 {
    font-family: Baskerville;
    font-size: 72px;
    font-weight: lighter;
    font-style: italic;
    line-height: 80px;
    text-transform: none;
    text-align: left;
}

.transparency1 {
    color: rgba(255,255,255,0.90);
}

.transparency2 {
    color: rgba(255,255,255,0.70);
}

.transparency3 {
    color: rgba(255,255,255,0.50);
}
    
.transparency4 {
    color: rgba(255,255,255,0.30)
}

.transparency5 {
    color: rgba(255, 255, 255, 0.136)
}

.GowunBatang{
    font-family: 'Gowun Batang';
    font-size: 32px;
}

.weightlight {
    font-weight:lighter;
}

.weightbold {
    font-weight: bold;
}

.weightnormal {
    font-weight: normal;
}
    
.weightbold2 {
    font-family: "Silkscreen", sans-serif;
    font-weight: 72px;
    font-style: normal;
}

.so {
    font-size: 36px;
    color: #ffff00;
    line-height: 90px;
    animation-delay: 0.2s;
}

.serious {
    font-size: 100px;
    color: #fb1b1b;
    line-height: 72px;
    animation-delay: 0.4s;
}

.white1 {
    font-size: 36px;
    color: #ffffff;
    line-height: 90px;
    display: inline-block;
}

.fredericka {
    font-family: "Fredericka the Great", serif;
    font-weight: 400;
    font-style: normal;
}
.empty {
    font-size: 36px;
    color: #000000;
    line-height: 90px;
    display: inline-block;
    font-size: 80px; /* Adjust font size for emphasis */
    color: #000000;
    animation: seriousAnimation 2s ease-in-out infinite; /* Animate in a loop */

}

/*LINK TO TOP OF PAGE*/

.anchor a:hover{
    text-align: center;
    text-decoration:none;
    color:#8A0F0F;
    padding-bottom: 50px;
}

.anchor a:active{
    text-align: center;
    text-decoration:none;
    color:#660000;
    padding-bottom: 50px;
}

@keyframes color {
    0%   { background: #000000; }
    20%  { background: #5a5555; }
    40%  { background: #949191; }
    60%  { background: #fc0000f1; }
    80%  { background: #f0f2b7; }
    100% { background: #000000; }
}

body {
    background: #f3f5f5;
    animation: color 9s infinite linear;
    text-align: center;
    padding: 2em;
}

.slide-left {
    display: inline-block; 
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

#quote4:hover .slide-left {
    opacity: 1;
    transform: translateX(0);
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Slight upward movement */
    }
    100% {
        transform: translateY(0);
    }
}

/* Individual words with animation */
h8 span {
    display: inline-block;
    animation: wave 3s ease-in-out infinite; 
}