:root {
  --bg-color:#DCE2BD; /* light green */
  --pg-color:#d7f8e5; /* very light green */
  --accent:#7c9b89; /* dark green */
  --accent-2:#8E9B90; /* gray */
   --link-color:#18bc5a;
}

*{
  box-sizing:border-box;
}



html, body {
  margin:0;
  font-size:0.85em;
  /* here is where you'd add a background image */
}
body {
  background-color:var(--bg-color);
background-image:url('https://i.imgur.com/4x108uF.png');
}
#container {
  background-color:var(--pg-color);
  width:60%;
  border-left:100px solid var(--accent);
  border-right:1px solid var(--accent-2);
  position:relative;
}
#outer {
  border-left:4px dotted var(--accent-2);
  margin-left:100px;
}
nav {
  background-color:var(--accent);
  position:absolute;
  top:100px;
  left:50px;
  border:1px solid var(--bg-color);
  width:120px;
  height:200px;
  z-index:9;
}
article { 
padding:50px;
  line-height:1.7em;
  
}
.links {
  list-style-type:'+';
  font-size:16px;
  
}
.links li a {
  color:var(--link-color);
  letter-spacing:1px;
  text-decoration:none;
}
.scrolling-text {
      width: 100%; /* Or a specific width */
      white-space: nowrap; /* Keep text on one line */
      overflow: hidden; /* Hide text that goes beyond the container */
      box-sizing: border-box;
      animation: scroll-left 10s linear infinite; /* Apply animation */
    }

    @keyframes scroll-left {
      0% { transform: translateX(100%); } /* Start offscreen to the right */
      100% { transform: translateX(-100%); } /* Move offscreen to the left */
    }
h2 {
  font-size:15px;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:8px;
}
h3 {
  font-size:15px;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:8px;
}
nav > ul {
  background-color:var(--accent-2);
  margin:20px;
  padding:0;
  list-style:none;
}
nav > ul > li {
  border-bottom:1px solid white;
  text-align:center;
}
nav > ul > li:last-child {
  border-bottom:none;
  text-align:center;
}
nav > ul > li > a {
  font-size:12px;
  padding-top:5px;
  padding-bottom:5px;
  display:inline-block;
  color:white;
}
 @media only screen and (max-width: 850px) {
   nav {
     left:0;
   }
   #container {
     width:100%;
     margin-left:0;
   }
   #outer {
     margin-left:0;
   }
}