@font-face {
  font-family: dpcomic;
  src: url(fonts/dpcomic.ttf);
}

@font-face {
  font-family: medodica;
  src: url(fonts/MedodicaRegular.otf);
}

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

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

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


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

#menu {
background:#74c2e0;
line-height:1;
width:100%;
text-align:center;
margin-top: 20px;
margin-bottom: 20px;
font-family: dpcomic;
font-size: 1.7em;
}
nav li{
display:inline-block;
position:relative;
height:2em;
line-height:2em; 
}
nav li a,nav li span{
color:#ffffff;
display:block;
padding:0 5px;
text-decoration:none
}
nav li a:hover,nav li span:hover{
background: #abe4fa;
transition:.6s;
}

.sub-menu{
background: #74c2e0;
position:absolute;
width:180px;
z-index:20
}
.sub-menu li{
display:block;
visibility:hidden;
overflow:hidden;
height:0;
width:100%;
}
nav li:hover .sub-menu li{
visibility:visible;
overflow:visible;
height:3em;line-height:3em;
transition: .5s;
width: 100%;
}
#open{display:none}

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

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

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


#main{
background-color: #fff;
width: 670px;
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: #8fd6e7;  
}

    /* 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;
}