:root{
    --teal: rgb(10, 187, 167);
    --deepTeal: rgb(0, 42, 51);
    --lightTeal: rgb(209, 255, 207);
    --lowOpacityTeal: rgba(67, 238, 185, 0.5);
    --zeroOpacityTeal: rgba(67, 238, 185, 0);
}

@keyframes backgroundAnimation{
    0% {background-image: url(../woodsImages/stream1.jpg);}
    33% {background-image: url(../woodsImages/stream2.jpg);}
    66% {background-image: url(../woodsImages/stream3.jpg);}
    100% {background-image: url(../woodsImages/stream1.jpg);}
}

body{
    animation-name: backgroundAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    background-size:cover;
    background-repeat:no-repeat;
    background-color: rgba(128,128,128,0.8);
    background-blend-mode: color;
    margin:0;
}

#content{
    width: 90%;
    min-height: 100vh;
    margin-left:auto;
    margin-right:auto;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--teal) 15%,
        var(--teal) 85%,
        transparent 100%
    );
}