@font-face {
  font-family: "rugles";
  src: url('https://squids-world.neocities.org/Fonts/Daydream%20DEMO.otf');
}

@font-face {
  font-family: "alte";
  src: url('https://squids-world.neocities.org/Fonts/VCR_OSD_MONO_1.001.ttf');
}

html {
    image-rendering: pixelated;
    background: url('https://squids-world.neocities.org/Library/Images/Library%20Background%2011.png') no-repeat; background-size: cover;
    width: 100%;
    aspect-ratio: 1/2;
    overflow-y: scroll;
    scrollbar-color: darkblue lightblue;
    scrollbar-width: thin;
}

body {
     text-align: center;
     height: 100%;
}

.mainbody {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 5%;
}
.logo {
    margin: 20px auto;  
    width: 60%;
    
}
.spacer {
    height:5%;
    width:100%;
}

.stickynotetabs {
    width: 20%;
    background-color: transparent;
}

.bookstack {
    width: 80%;
    height: fit-content;
    background-color: transparent;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.bookrec {
    background: url('https://squids-world.neocities.org/Library/Images/Green%20Sticky.png') no-repeat; background-size: contain;
    width: 100%;
    aspect-ratio: 294/304;
    font-family: 'rugles';
    font-size: .7vw;
    padding-top: 8%;
}

.bookrec p{
    margin-right: 8%;
    margin-left: 8%;
}

.rn {
    background: url('https://squids-world.neocities.org/Library/Images/Sticky%20Note%20blue.png') no-repeat; background-size: contain;
    width: 100%;
    aspect-ratio: 294/304;
    font-family: 'rugles';
    font-size: .7vw;
    padding-top: 8%;
    color: white;
}

.rn p{
    margin-right: 8%;
    margin-left: 8%;
}



.book:hover
{

}







/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  color: white;
  cursor: pointer;
  padding: 40px;
  width: 100%;     /* or max-width: 300px; etc */
  height: auto;
  padding: 0px;
  text-align: left;
  border: none;
  outline: none;
  transition: 1s;
  background-color: transparent;
  margin: auto;
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: transparent;
  transform: scale(1.1); /* Scale up the button */
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: #2b1c66CC;
  display: none;
  overflow: hidden;
  width: 75%;
  color:white;
  text-align: left;
  font-family: "alte";
  font-size: .8vw;
  border: 10px dotted lightblue;
    border-image: url('https://squids-world.neocities.org/border%20template%20blue.png') 3% round;
    border-image-outset: 2px;
border-radius:8px;
overflow-y: scroll;
}


.panel p, {
    font-family:'alte'; 
    
}
.panel h1 {
  text-align: left;
  display: block;
  margin: 0;                   /* or margin-top/bottom you need */
    font-family:'rugles'; 
    margin-top: 2%;
letter-spacing: 1.5px;
font-size: 120%;
}

.panel h2, .panel h3, .panel img {
  text-align: left;
  display: block;
  margin: 0;                   /* or margin-top/bottom you need */
    font-family:'rugles'; 
    letter-spacing: 1.5px;
    font-size: 80%;



.panelwrapper {
    display: flex;
    margin: 10px;
}