body{
background-color: #fff395;
background-image: url('img/backgrounds/wanderbg.gif');
background-size: cover;
color: #23262e;
font-family: 'medodica';
}

#container{
width: 850px;
margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  margin: 15px;
  }


h1{
font-family: dpcomic;
text-align: center;
font-size: 45px;
font-weight: normal;
color: #74c2e0;
margin: 0px;
}

#menu {
line-height:1;
width:100%;
text-align:center;
margin: 20px;
padding: 20px;
font-family: dpcomic;
font-size: 1em;
}


ul{
text-align: center;
padding: 0px;
margin: 0px;
}

li{
list-style-type: none;
display: inline;
margin: 10px;
}

a{
text-decoration: none;
color: #ffffff;
}


#main{

width: 850px;
height: 700px;
padding: 15px;
text-align: justify;
overflow-y: auto;
}


#left{
position: absolute;
left: 20%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 215px;
height: 600px;
}

#leftnav{
background-color: #ffffff;
width: 185px;
height: 260px;
padding: 15px;
margin-top: 5px;
text-align: center;
overflow: scroll;
overflow-x: hidden;
font-family: 'medodica';
}

#leftnav a {
  font-size: 45px;
  color: #74c2e0;
  font-family: dpcomic;
}

::-webkit-scrollbar{
width: 8px; 
}
    
::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #68404f;  
}

    /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;

}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(96, 186, 221);
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 3px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}