:root {
    --offWhite: #F2E4D8;
    --lightBrown: #8C4E2A;
    --tan: #D99C79;
    --brown: #73463C;
    --darkBrown: #402722;
    --title: "Outfit", sans-serif;
    --subHeadings: "Urbanist", sans-serif;
    --text: "Quicksand", sans-serif;
    --textSize: 1.5rem;

}
header{
    
    background-color: var(--tan);
    display: flex;
    padding: 0 20vw;
    align-items: center;
    border-bottom: 5px solid var(--darkBrown);
        h1 {
        font-family: var(--title);
        color: var(--offWhite);
        font-size: 6rem;
        text-align: center;
        letter-spacing: .05em;
        text-shadow: 5px 5px var(--darkBrown);
    }
}

body{
    background: url('images/backgroundFrog.png');
    /*Clker-Free-Vector-Images  https://pixabay.com/vectors/frog-amphibian-tropical-rainforest-46393/*/
    background-blend-mode: luminosity;
    margin: 0;
    background-color: var(--offWhite);
    color: var(--darkBrown);
    font-family: var(--text);
    font-size: var(--textSize);
    letter-spacing: .1rem;
    font-weight: 500;

    .span{
                background-color: var(--offWhite);
                border: 5px solid var(--darkBrown);
                border-radius: 10px;
                
            }
    .row{
        padding: 5vw;
        display: flex;
        justify-content: space-between;
        .col{
            flex-basis: 40%;
            padding: 1vw;
            margin: 0;
            h2{
                font-size: 2rem;
                font-family: var(--subHeadings);
                color: var(--brown);
            }
            img{
                border: 5px solid var(--darkBrown);
                border-radius: 10px;
                width: 100%;
            }
            ul{
                li{
                    list-style: none;
                    line-height: 2.5rem;
                }
            }
        
        }
    }
    .reverse{
        flex-direction: row-reverse;
        img{
            width: 100%;
            height: auto;
        }
    }
    .image{
        display: flex;
        justify-content: center;
        padding: 5vw;
        img
        {border: 5px solid var(--darkBrown);
        border-radius: 10px;
        }
    }
    footer{
     padding: 1.8vw 20vw;
     background-color: var(--tan);
     position: static;
     left: 0;
     bottom: 0;
     width: 100%;
    }
    .fade-in {
    opacity: 0;
    transform: translatex(-75px);
    transition: all 750ms;
    &.in-view {
        opacity: 1;
        transform: translatex(0);
    }
}
}