body{
  background-image: url("https://file.garden/Z79xk6Elunno9B45/backgrounds/greenstripesbg.png");
  background-repeat: no-repeat;
  }

nav{
  border: 5px solid;
  border-color: #0f43ff;
  width: 205px;
  background: #000357;
  padding: 10px;  
  border-radius: 25px 25px 25px 25px;
  position: absolute;
  left: 50px;
  top: 250px;
  }
  
      a{text-decoration: none; color: inherit;}
      a:visited{text-decoration: none; color: inherit;}
      
  .navbutt{transition: 0.3s;}
  .navbutt:hover{transform: scale(1.1);}
      
#stickynote{
  width: 100px;
  height: 130px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #ffec80;
  border: 5px solid #b56e04;
  font-family: handwriting;
  overflow: auto;
  position: absolute;
  top: 50px;
  left: 300px;
  rotate: -10deg;
  
}      
      
.paperinfo{
  position: absolute;
  top: 125px;
  left: 350px;
  height: 550px;
  width:600px;
  overflow: auto;
  }
#paper{
  position: absolute;
  top: 80px;
  left: 350px;
  z-index: -100;
}


.bookshelf{
/* height: 650px;
width: 350px;
overflow: auto;
background-color: #ab6543;
border: 5px solid #6b4430;
position: absolute;
top: 58px;
left: 950px; */

  background-color: #ab6543;
  border: 5px solid #6b4430;
  /*display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;*/
  align-content: center;
  height: 600px;
  width: 350px;
  overflow: auto;
  position: absolute;
  top: 58px;
  left: 950px;
  padding-top: 75px;
  padding-bottom: 50px;
}


/* Style the tab */
.tab {
 /* display: flex;
  justify-content: space-evenly;
  background-color: #6b4430;
  width: 160px;
  height: 300px;
  rotate: -90deg;
  margin-top: 25px; */

  background-color: #6b4430;
  height: 300px;
  width: 160px;
  rotate: -90deg;
  margin-top: -100px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

/* Style the buttons inside the tab */
.tab button {
 /* background-color: inherit;
  border: inherit;
  cursor: url('https://calzonie.neocities.org/linkcursor.gif'), auto;
  transition: 0.3s;
 
  width: 130px;
  height: 50px;
  margin-top: 50px;*/

 background-color: inherit;
  border: inherit;
  cursor: url('https://file.garden/Z79xk6Elunno9B45/cursors/robloxcursor2.png'), auto; 
  margin: 5px;
  width: 130px;
  height: 50px;
  
  transition: 0.3s; 
}

/* Change background color of buttons on hover */
.tab button:hover {
  border: none;
  transform: translate(10px,0px);
}

/* Create an active/current tablink class */
.tab button.active {
 
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding-left: 25px;
  padding-right: 25px;
/*  border: 2px dotted; */
  margin-left: 50px;
  width: 400px;
  }
  
  
  /*flipping album cover animation........ i got this from w3schools btw its not mine*/
  
  .flip-card {
  background-color: transparent;
  /*width: 300px;
  height: 200px; */
  border: 1px solid #f1f1f1;
  perspective: 1000px;   
  cursor: url('https://file.garden/Z79xk6Elunno9B45/cursors/robloxcursor2.png'), auto;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;  /*Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: black;
}

/* Style the back side */
.flip-card-back {
  color: white;
  transform: rotateY(180deg);
}