html {
  background-image: url("https://hajewil.neocities.org/Images/Gingham%20Background.jpg");
  font-family: monospace;}

h1 {
  font-family: monospace;
  font-weight: bold;
  font-size: 2em;
  color: #024b36;
  border-bottom: 4px dotted #654321;
  }

em {
  color: darkgreen;
  font-weight: bold;}

ul {
  line-height: 17px;}

#disclaimer {
  position: fixed;
  width: 150px;
  height:100px;
  background: #ededed;
  border: 2px solid black;
  left:1025px;
  top:300px;
  padding: 5px;
  font-size:10.5px;
  list-style-position: inside;
  z-index: -1;
  font-weight: bold;
  }

#highlight {
  background: darkgreen;
  border-radius: 10px;
  color: white;
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  }

#divider {
  border-bottom: 2px solid black;
  margin-left: 50px;
  margin-right: 50px;
  opacity: 0.15;}
  
#contentcontainer {
  position: absolute;
  padding-left: 20px;
  padding-right: 15px;
  display: block;
  margin-left: 250px;
  margin-top: 80px;
  background: #f6ddc7;
  width: 700px;
  height: 500px;
  box-shadow: 10px 10px 5px brown;
  border-radius: 10px;
  z-index: 1;}

#scrollablecontent {
  position: relative;
  width: 600px;
  height: 400px;
  z-index: 2;
  overflow-y: scroll;
  left: 50px;
  }

#scrollablecontentimg {
  display: flex;
  }
  
#sidebar {
  position: absolute;
  display: flex;
  width: 100px;
  height: 120px;
  padding: 15px;
  background: #e6e6e6;
  border: 1px solid black;
  border-image: url(https://hajewil.neocities.org/Images/border3.png) 200 round;
  border-image-width: 25px;
  border-image-outset: 10px;
  margin-left: 75px;
  margin-top: 175px;
  z-index: -1;
  }

#navi{
  display: block;
  border: 2px solid darkred;
  border-radius: 10px;
  width: 70px;
  height: 10px;
  padding: 5px;  
  text-align: center;
  background-color: white;
  margin-left: -35px;
  
  }

#headerimage {
  position: absolute;
  width: 300px;
  left: 400px;
  }

#sidebarimage {
  position: absolute;
  width: 155px;
  height: auto;
  left: -12px;
  top: -160px;
  }

#sideimage1 {
  position: absolute;
  left: 1020px;
  width: 150px;
  height: 200px;
  top: 40px;
  }

#sideimage2 {
  position: absolute;
  width: 150px;
  height: 200px;
  left: 80px;
  top: 350px;}
  
 #popup1 {
   border: 2px solid black;
   background: #e6e6e6;
   text-align: right;
   font-size: 10px;
   width: 80px;
   position: relative;
   top: -50px;
  display: none;}
   
  #popup2 {
   border: 2px solid black;
   background: #e6e6e6;
   text-align: right;
   font-size: 10px;
   width: 80px;
   position: relative;
   top: -30px;
  display: none;}
    
#sideimage1 img:hover + #popup1 {
  display: block; }

#sideimage2 img:hover + #popup2 {
  display: block; }
  
#navi a:hover {
  background: darkred;
  opacity: 0.5;
  }

#scrollablecontent h1:hover + #scrollablecontentimg {
  box-shadow: 0px 0px 10px red;
}
::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: darkred; 
  border-radius: 10px;
}

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