body {
  background-color: #d5dbb8;
  font-family: 'Georgia', sans-serif;
  color: #1f1a1b;
  
}

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  background-color:grey;
  
}

li {
  float:left;
}

a {
color: #4eb587;
}
a:hover{
text-shadow: 0px 0px 3px #6ecca3;
}

p1 {
  background-color: #dbc38a;
  color: #170d29;
  position: relative;
  max-width:900px;
  padding: 20px;
  border-top: 2px solid #ba9f61;
  border-left: 2px solid #ba9f61;
  border-right: 2px solid #ba9f61;
}

p {
  background-color:#d5dbb8;
  position: relative;
  max-width:900px;
  padding: 20px;
  border: 2px solid #ba9f61;
  float: left;
  }
  
#container{
display: flex;
justify-content: center;
align-items: center;
margin-left: 100px;
margin-right: 100px;
border: 3px solid #ba9f61;
padding: 3px;
background-image: linear-gradient(#dbc38a,#d6ac7e,#838787);
}


#header{
border-top: 2px solid #ba9f61;
border-bottom: 2px solid #ba9f61;
letter-spacing: 2px;
margin-top:30px;
}



#header h1{
  text-align: center;
  background-color: #dbc38a;
  padding:5px;
}

#nav{

display: flex;
justify-content: center;
margin-top: 40px;
margin-left: 100px;
text-align: left;
width:500px;

}



#main{
  text-align: left;
  margin:0px;
}


#imageContainer{
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
padding: 3px;
text-align: center;
object-fit: contain;
}




/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #dbc38a; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ba9f61; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #6ecca3; 
}