/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


 .header-image {
            max-width: 10000px;       /* Adjust size as needed */
            height: 530px;            /* Adjust size even more*/
            margin-bottom: -300px;    /* Adds space between image and text */
}

 .header-container {
            display: flex;
            flex-direction: column; /* Stacks elements vertically */
            align-items: center;    /* Centers elements horizontally */
            text-align: center;     /* Centers the text characters */
            padding: 1px;
}


.topheader {
  font-family: "Della Respira", serif;
  font-size:80px;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color:white;
  text-shadow:0px 0px 10px white,
              0px 0px 20px white,
              0px 0px 40px white,
              0px 0px 80px white,
              0px 0px 100px white;
}


body {
  background-image: url("images/purpleplaid.jpg");
  color: white;
  font-family: Verdana;
}

/* --- Content Boxes --- */
.main-content .content-box {
     background-color: rgba(0, 0, 0, 0.5);
    border: 5px solid #ffd4e5;
    border-style: ridge;
    border-radius: 12px;
    padding: 25px;
    min-height: 400px; /* Gives the container initial structure */
}

/* --- Sidebar Box Container Elements --- */
.sidebar-box {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px dashed #ffb7d0; /* Nostalgic dashed Y2K border line styling */
    border-radius: 8px;
    padding: 15px;
}

.blog-container {
    display: grid;
    grid-template-columns: 260px 1fr 280px; /* Precise column sizing: Left, Center, Right */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.back-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400%;
  background-color: black;
  z-index: -2; /* Pushes it to the back */
  opacity: 0.3;
}

.lace-box3 {
  border: 32px solid transparent;
  border-image-source: url('https://i.ibb.co/20P0cTjp/laceydivborderpurple.png');
  border-image-slice: 32 fill;
  border-image-repeat: round;
  box-sizing: border-box;
}

h2{
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
  
}

p{
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;

}

ul {
  list-style-image: url('images/purplestar.gif');
  font-family: "MedievalSharp", cursive;
  font-weight: 400;
  font-style: normal;
}

.aesthetic{
  border-color:#ffb7d0;
  margin-top:30px; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  border:2px; 
  border-style:dashed; 
  
  }
  
  .blinkie{
  margin-top:30px; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  }
  
    body
  {
    overflow: auto;
  }
  .container
  {
    left: 25em;
    top: 13em;
    z-index:-2;
    transform:scale(0.41);
    margin-right: 500px;
    margin-left:-10px;
  }
  
.borderimg1 { 
  border: 10px solid transparent;
  background-clip: padding-box;
  padding: 15px;
  border-image: url("images/whitelace.png") 25 round;
}

.site-footer {
    color: #fff;
    text-align: center;
    padding: 20px 0;
    width: 100%;
}


.bookshelf {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
   gap: 70px 30px;
   perspective: 1200px; 
  perspective-origin: center;
}


.book-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 20px; 
  transform-style: preserve-3d;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

.book {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book-container:hover .book, 
.book-container:focus .book {
  transform: rotateY(0deg);
}

.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 200px;
  height: 300px;
  transform: translateZ(15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
}

.book-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 300px;
  
  /* Matches the exact depth layer of the front cover cover, 
     plus a tiny fraction (15.1px) so it sits directly on top */
  transform: translateZ(15.1px); 
  
  /* Centers the text layout over the cover */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  pointer-events: none; /* Allows the underlying link to still be clickable */
  
  /* Text Styling */
  color: #ffffff; 
  font-family: sans-serif; /* Change to your preferred font */
}

.book-text h2 {
  font-size: 18px;
  margin: 0 0 8px 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* Helps text pop off your purple banner */
}

.book-text p {
  font-size: 13px;
  margin: 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.book::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 1px;
  width: 28px;
  height: 298px;
  transform: translateX(184px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-15px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}