html {
    font-family: 'Oswald', sans-serif;
}

body{
    font-family: 'Oswald', sans-serif;
}

.container{
    display: flex;
    
}

.fa-chevron-down{
    
    animation: pulse 2s infinite;
}

.fa-chevron-up{
    animation: pulse 3s infinite;
}

.fa-heart{
    animation: pulse 3s infinite;
}

img{
    max-width: 100%;
    margin-top: 5rem;
    margin-bottom: 5rem;
    border-style: solid;
    border-color: whitesmoke;
    border-width: 2px;
}

.font1{
    font-family: 'Courier Prime', monospace;
    
}

.first-text{
    text-align: center;
    color: red; 
    padding-top: 27vh;
}

.second-text{
    text-align: center;
    color: white;
    padding-top: 40vh;
}

.chapter-title{
    text-align: center;
    color: white;
    margin-top: 10vh;   
}



.third-text{
    text-align: center;
    color: white;
    margin-top: 45vh;
}



.text-left{
    margin: auto;
    text-align: left;
    
}

.text-right{
    margin: auto;
    text-align: rightt;
}

.bg-hero-1{
    background: linear-gradient(rgba(125, 95, 255,0.7), rgba(125, 95, 255,0.7)),
    url('../images/02-unsplash-sfw.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.bg-hero-1.scrolled{
    background: transparent;
}

.bg-hero-2{
    background: linear-gradient(rgba(224, 86, 253,0.7),rgba(224, 86, 253,0.7)),
    url('../images/02-unsplash-sfw.jpg');
    background-size: cover;
    background-attachment: fixed;
}


.bg-hero-3{
    background: linear-gradient(rgba(46, 204, 112, 0.7), rgba(46, 204, 112, 0.7)),
    url('../images/02-unsplash-sfw.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.bg-hero-4{
    background: linear-gradient(rgba(244, 1, 0, 0.7),rgba(244, 1, 0, 0.7)),
    url('../images/02-unsplash-sfw.jpg');
    background-size: cover;
    background-attachment: fixed;

}

.bg-hero-5{
    background: linear-gradient(rgba(255, 242, 0,0.7), rgba(255, 242, 0,0.7)),
    url('../images/02-unsplash-sfw.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.chapter{
    border-top: 2px solid #ffffff;
}

sup {
    vertical-align: super;
    font-size: smaller;
}


@keyframes pulse {
    0% {
        transform: scale(0.75);
    }
    20% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.75);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(0.75);
    }
    100% {
        transform: scale(0.75);
    }

}