:root {
--color1:pink;
--color2:white;
--color3:#E89EAD;
--artboxcolour: white;
}

body {
  background-color: #9E8067;
  font-family: 'Georgia', sans-serif;
  color: black;
  
}

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

li {
  float:left;
}

a {
color: #8e202a;
}
a:hover{
text-shadow: 0px 0px 3px darkred;
}

p1 {
  background-color: var(--color3);
  color: #8527a8;
  position: relative;
  max-width:900px;
  padding: 20px;
  border-top: 2px solid #1d171e;
  border-left: 2px solid #1d171e;
  border-right: 2px solid #1d171e;
}

p {
  background-image: linear-gradient(var(--color1), var(--color2));
  position: relative;
  max-width:900px;
  padding: 20px;
  border: 2px solid #1d171e;
  float: left;
  }
  
#container{
display: flex;
justify-content: center;
align-items: center;
margin-left: 100px;
margin-right: 100px;
border: 3px solid #1d171e;
padding: 3px;
background-image: linear-gradient(var(--color3),var(--color1));
}


#header{
border-top: 2px solid var(--color2);
border-bottom: 2px solid var(--color2);
letter-spacing: 2px;
margin-top:30px;
}



#header h1{
  text-align: center;
  background-color: var(--color1);
  padding:5px;
  color:black;
}

#nav{

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

}



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


#imageContainer{
background-color: var(--artboxcolour);
justify-content: center;
align-items: center;
margin-top: 40px;
padding: 3px;
text-align: center;
object-fit: contain;
}

img {
  display:block;
  margin:auto;
}

.stampbox {
  margin:auto;
  width: 78%;
  height: 100px;
  margin-top:30px;
  margin-bottom: 30px;
}

.stamps {
  float:left;
  width:20%;
}


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

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: darkred
; 
}