.colored-square{
  width: 500px;
  height: 500px;
  background-color: lightblue;
position: absolute;
  top: 90px;
  z-index: 1;
  padding: 20px;
  left: 40px;
  
  /* The magic fixers */
  box-sizing: border-box; 
  overflow-x: scroll; /* Use 'scroll' instead of 'auto' to keep the bars consistent */
  overflow-y: hidden;
}
.square{
   width: 180px;
  height: 300px;
  background-color: lightblue;
  position: fixed;
  top: 90px;
  z-index: 1;
  padding: 20px;
  left: 600px;
  
    /* The magic fixers */
  box-sizing: border-box; 
  overflow-x: scroll; /* Use 'scroll' instead of 'auto' to keep the bars consistent */
  overflow-y: hidden;

}
/* grid that flows horizontally with 2 rows */
.book-row {
  display: grid;
  grid-auto-flow: column;

  grid-template-rows: auto; /* shrink rows to content */
  column-gap: 20px;
  row-gap: 20px; /* controls vertical spacing between rows */
  
}


/* book covers */
.book-row a img {
  height: 200px;
  width: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.book-row a img:hover {
  transform: scale(1.05);

  }
  
   @font-face {
  font-family: 'prstart'; /* A name to be used later */
  src: url('prstart.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional, helps with performance */
}
   @font-face {
  font-family: 'saturno'; /* A name to be used later */
  src: url('saturno.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional, helps with performance */ 
 }
   @font-face {
  font-family: '712serif'; /* A name to be used later */
  src: url('712serif.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Optional, helps with performance */

  }
/* Default color for unvisited links */
a:link {

  text-decoration: none; /* Optional: removes the default underline */
  font-family:"prstart";
  font-weight:bold;
}

/* Color for visited links */
a:visited {
  color: #9a47b8;
}

/* Color when the user mouses over the link */
a:hover {
  text-transform: uppercase;
  font-family: "saturno";
  font-weight:bold;
}

  body{
    overflow-Y:hidden;
    
 
    }
    #title{
      position:fixed;
      top:550px;
      left:18px;
      color:white;
      font-family:"saturno";
      font-weight:bold;
       font-size:5rem;
    }
    #footer{
      position:fixed;
      top:750px;
      left:50px;
      color:white;
      font-family: "prstart";
      font-weight:bold;
      font-size:1rem;
    } 
   #backhome{
    position:fixed;
      top:43px;
      left:33px;
      color:white;
      font-family: "prstart";
      font-weight:bold;
      font-size:1.5rem;
    }
#recently-read {
  margin: 0 0 10px 0;  /* small spacing above the books */
  font-family: "saturno";
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
}

#currently-read {
  margin: 0 0 10px 0;  /* small spacing above the books */
  font-family: "saturno";
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
}
   #tbr{
   position: absolute;
      top:450px;
      left:605px;
      color:white;
      font-family: "prstart";
      font-weight:bold;
      font-size:1.5rem;
}
 .link-box {
    position: absolute;
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.45); /* translucent */
    border-radius: 0px; /* sharp corners */
    backdrop-filter: blur(5px); /* optional: glassy look */
    transition: background-color 0.25s ease, color 0.25s ease;
    z-index: 10;
  }