body {
margin: 0;
background: url('https://joeldcanfield.com/test/images/BigTreesMacrois-lg.jpg') fixed bottom;
}


.bg1 {
width: 100vw;
background-image: linear-gradient(45deg, rgba(70%, 70%, 0%, 20%), rgba(0%, 0%, 70%, 40%));
  font-family: basic-sans, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125em;
  line-height: 1.6;
  color: #333;
  background-size: 300%;
  animation: bg-animation 13s infinite;
  animation-direction: alternate;
}

.bg2 {
width: 100vw;
  min-height: 100vh;
  background-image: linear-gradient(135deg, rgba(100%, 100%, 100%, 5%), rgba(0%, 60%, 0%, 30%));
  background-size: 300%;
  animation: bg-animation2 11s infinite;
  animation-direction: alternate;
}


@keyframes bg-animation2 {
  0% {background-position: left}
  50% {background-position: right}
  100% {background-position: left}
}

@keyframes bg-animation {
  0% {background-position: right}
  50% {background-position: left}
  100% {background-position: right}
}


.content {
    min-width: 600px;
margin: 32px 20vw 0 20vw;
padding: 1em;
background: rgba(100%, 100%, 100%, 60%);
position: sticky;
top: 0;
height: calc(100vh - 160px);
overflow: scroll;
}