@font-face {
  font-family: "5pts";
  src: url(assets/5%E2%82%A75.ttf) format("truetype");
}
#blinkiebox {
  float:right;
  }
  .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#purinheader{
  background-color:#faf1d7;
  border-radius:25px;
  width:100%;
  height:200px;
  }
  #fuckassbox{
      width:100%;
      height:200px;
  }
#shelf {
     background-image: url(assets/emptyshelf.png);
     background-size:100%;
     background-repeat:no-repeat;
     margin:5px;
     padding:10px;
     
 }
.shelfitem {
    height:100px;
    width:100px;
    float:left;
    
 }
 .shelfitem:hover {
    transform: scale(1.3) rotate(360deg);
    overflow:hidden;
    transition: all 0.5s;
 }
#header {
  text-align:left;
}

#menuheader {
  background-color:deeppink;
  border-width:2px;
  border-color:hotpink;
  transform: rotate(10deg);
  }
  .blinkie {
    vertical-align:middle;
  }
#opener {
  background-image: url("assets/notepad.png");
  width:1000px;
  height:1500px;
  margin:5px;
  background-repeat:no-repeat;
  background-size:100%;
  padding:50px;
}
#updatebox{
  padding:30px;
  background-size:100%;
  border-width:5px;
  background-image: url("assets/sticky.png");
  float:right;
  }
#updatebox h1 {
  transform: rotate(-10deg);
}
#updatebox ul {
transform: rotate(-5deg);
}
html {
font-family: '5pts', Fallback, 'Courier';
cursor: url('assets/dreamsiclebite.png'), auto;
}
div {
  font-family: '5pts';
}
a:link {
  color:#ff7300;
}
a:hover {
  color:orange;
}
a:active {
  color:#f7e9d2;
}
#wrapper {
 width:700px; 
  }
.sidenav {
  background-image: url(assets/notebook.png);
    background-repeat:no-repeat;
    width:300px;
    height:600px;
    text-align:center;
    float:left;
    transform: rotate(-5deg);
}
  .sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color:lightpink;
  display: block;
}

.sidenav a:hover {
  color:#8149b8;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
  font-family: '5pts', Fallback, 'Courier';
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;
  color:#d6adff;
  }
  .sidenav a {font-size: 18px;}
}

  #grad1 {
  height:700px;
  background-image: linear-gradient(#ffd66e, white,);
  background-color:#ffd66e;
  }
  .nav {
    overflow: hidden; }
  .nav a {
    float: left;
    margin: 10px;
    display: block; }
  .nav #menu-toggle {
    display: none; }
  @media screen and (max-width: 600px) {
    .nav a:not(:first-child) {
      display: none; }
    .nav a#menu-toggle {
      float: right;
      display: block; } }
  @media screen and (max-width: 600px) {
    .nav.nav--open {
      position: relative; }
    .nav.nav--open #menu-toggle {
      position: absolute;
      right: 0;
      top: 0; }
    .nav.nav--open a {
      float: none;
      display: block;
      text-align: left; } }
  .menu-toggle__bar1, .menu-toggle__bar2, .menu-toggle__bar3 {
    width: 21px;
    height: 3px;
    background-color: #000000;
    margin: 4px 0;
    transition: 0.3s; }
  .menu-toggle--open .menu-toggle__bar1 {
    transform: translate(0, 7px) rotate(-45deg); }
  .menu-toggle--open .menu-toggle__bar2 {
    opacity: 0; }
  .menu-toggle--open .menu-toggle__bar3 {
    transform: translate(0, -7px) rotate(45deg); }