html{
    scroll-behavior: smooth;
}

div#header{
    background: url('img/geert-pieters-8QrPJ3Kfie4-unsplash-dark.jpg') no-repeat center center fixed;
    background-size: cover;

    padding-top: 6rem;
    padding-bottom: 6rem;
}

div#section-lessons{
    background: url('img/zu-photography-pOist9c0-XM-unsplash-blur.jpg') no-repeat center center local;
    background-size: cover;
}

/*div#header.collapsed{
    padding-top: 1rem;
    padding-bottom: 1rem;
}*/

.text-light > .blockquote-footer{
    color: lightgray;
}

.side-image{
    max-width: 20rem;
}

p > b{
    font-size: 1.2rem;
    font-weight: 800;
}

b > a{
    font-size: 1.2rem;
    font-weight: 1000;
    color:black;
}

p{
    font-size: 1.1rem;
}

 p > i {
    color: gray;
}

footer#footer{
    background-color: hsla(249, 10%, 10%);
    color: gray;
}

.rounded > a:hover{
    text-decoration: none;
}

div#start-now{
    animation: pulse 1.5s ease-in-out 0s infinite alternate forwards;
    position: absolute;
    bottom: 1rem;
}

@keyframes pulse{
    from{
        transform: translateY(0);
    }

    to{
        transform: translateY(-1rem);
    }
}

div#start-now-cont{
    position: fixed;
    z-index: 999;
    bottom:0;
    width:100%;
    height: 30%;
    background: linear-gradient(180deg, hsla(0, 0%, 10%, 0), hsla(0, 0%, 10%, 100%));
    transition: transform ease-in-out 0.125s;
}

div#start-now-cont.collapsed{
    transform: translateY(100%);
    
}

.content-row{
    padding: 3rem;
}

#logo-image{
    width: 20rem;
}

@media only screen and (max-width: 576px) {
    /* For mobile phones: */
    #start-now > a{
        font-size: 1.5rem;
    }

    #pagetitle{
        font-size: 3rem;
    }

    .side-image{
        width: 15rem;
    }

    .content-row{
        padding: 0rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
        justify-content: center;
        text-align: center;
    }

    #logo-image{
        width: 10rem;
    }
    
}