body {
   background-image: url("/images/beanies/beaniebackground.jpg");
  background-color: white;
  color: blue;
  font-family: Courier;
}
 
.nav ul {
  list-style: none;
  background-color: #4d0000;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: comic-sans;
  font-size: 1em;
  line-height: 30px;
  height: 30px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #800000;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

  .div1
    {
      background-color: black;
  width: 500px;
  border: 5px solid red;
  padding: 20px;
  margin: 20px;
  display: inline-block;
    }
    
    .div2
    {
      background-color: black;
  width: 400px;
  border: 5px solid red;
  padding: 20px;
  margin: 20px;
  display: inline-block;
    }
    
      .div3
    {
      background-color: black;
  width: 400px;
  border: 5px solid red;
  padding: 20px;
  margin: 20px;
  display: inline-block;
    }
    
      .div4
    {
      background-color: black;
  width: 400px;
  border: 5px solid red;
  padding: 20px;
  margin: 20px;
  display: inline-block;
    }

p {
  background-color: black;
  width: 400px;
  border: 5px solid red;
  padding: 20px;
  margin: 20px;
}

.ex1 {
  background-color: black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}

.ex2 {
  background-color: none;
  width: 600px;
  height: 400px;
  overflow: scroll;
}

.ex2::-webkit-scrollbar {
  width: 10px;
}

.ex2::-webkit-scrollbar-track {
  background: black; 
}

.ex2::-webkit-scrollbar-thumb {
  background: red; 
}

.ex2::-webkit-scrollbar-thumb:hover {
  background: #6d0606; 
}

.div5 {
background-color: none;
width: 500px;
border: 0px none;
padding: 0px;
margin: 0px;
display: inline-block;
    }


.ex3 {
  background-color: black;
  width: 400px;
  border: 5px solid red;
  padding: 20px;
  margin: 20px;
  display: inline-block;
  }

.ex4 {
   background-color: none;
  width: 200px;
  border: 1px black;
  padding: 1px;
  margin: 1px;
  display: inline-block;
}


.body {
    padding-bottom: 100px;
}