/* 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;
}


.scrollbox{
  background-image: url("backgrounds/leopprint.jpg");
    border: 5px solid #ffd4e5;
    border-style: ridge;
    border-radius: 12px;
    padding: 25px;
    height: 975px;/* Gives the container initial structure */
  overflow-y: scroll;
  
  }
  

/* --- 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;
}

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%;
}

.scrollbox::-webkit-scrollbar {
            width: 12px;
        }
        
.scrollbox::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #95a5a6;
            border: 1px solid #cacaca;
        }
        
.scrollbox::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #2c3e50;
        }