/* 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." */

/* ==========================================
   1. REGISTER THE DAYDREAM FONT (MUST BE FIRST)
   ========================================== */
@font-face {
  font-family: 'Daydream';
  src: url('daydream.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   2. MAIN SITE BACKGROUND & CURSOR SETTINGS
   ========================================== */
body {
  cursor: url('cursor.png'), 16 16, auto;
  background-image: url('bg2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 20px;
  font-family: sans-serif; /* Backup font for body text */
  color: #7d5a5a;
}

/* Forces your custom cursor to stay locked over every element */
body, html, div, p, span, b, i, h1, h2, h3, a, button, img, .diary-box, .shrine-item, .shrine-title {
  cursor: url('cursor.png'), auto !important;
}

/* ==========================================
   3. THE MAIN DIARY WRAPPER CARD
   ========================================== */
.diary-box {
  max-width: 650px;
  margin: 40px auto;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 20px;
  border: 3px dashed #ffb7b2;
  box-shadow: 0px 8px 16px rgba(255, 183, 178, 0.3);
}

/* ==========================================
   4. LAYOUT COMPONENT IMAGES
   ========================================== */
.banner-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  border-radius: 12px;
}

.profile-img {
  display: block;
  margin: 25px auto;
  width: 150px;
  border-radius: 15px;
  border: 3px solid #ffcbc1;
}

/* ==========================================
   5. TYPOGRAPHY HEADINGS (USING DAYDREAM)
   ========================================== */
h1 {
  font-family: 'Daydream', sans-serif;
  text-align: center;
  font-size: 1.8rem;
  color: #ff9aa2;
  margin-top: 20px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0px #ffe5ec;
}

h2 {
  font-family: 'Daydream', sans-serif;
  font-size: 1.1rem;
  color: #8ed1b9;
  margin-top: 40px;
  border-bottom: 2px dotted #ffb7b2;
  padding-bottom: 5px;
}

.diary-text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* ==========================================
   6. SHRINE GRID STYLES
   ========================================== */
.shrine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 15px;
  margin-bottom: 30px;
}

.shrine-item {
  background-color: #ffffff;
  border: 2px solid #ffcbd1;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  box-shadow: 2px 2px 0px #ffe5ec;
}

.shrine-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 8px;
}

.shrine-title {
  font-family: sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  color: #ff9aa2;
}

/* ==========================================
   7. DETAILED ABOUT ME BOX STYLES
   ========================================== */
.detailed-about-box {
  max-width: 450px;
  margin: 30px auto;
  border: 3px solid #ffb7b2;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 5px 5px 0px #ffe5ec;
  overflow: hidden;
  color: #7d5a5a;
}

.about-content-scroll {
  padding: 25px;
  text-align: left;
  height: 250px;
  overflow-y: scroll;
/* ==========================================
   6. FIREF0X ONLY SCROLLBAR FILTER
   ========================================== */
@supports not (::-webkit-scrollbar) {
  html, body {
    scrollbar-width: thin;
    scrollbar-color: #ffb7b2 #fff0f5;
  }
}

/* ==========================================
   7. CHROME, SAFARI & EDGE SCROLLBAR ENGINE
   ========================================== */
html::-webkit-scrollbar, 
body::-webkit-scrollbar {
  width: 12px !important;
  display: block !important;
}

html::-webkit-scrollbar-track, 
body::-webkit-scrollbar-track {
  background: #fff0f5 !important;
}

html::-webkit-scrollbar-thumb, 
body::-webkit-scrollbar-thumb {
  background-color: #ffb7b2 !important;
  border-radius: 10px !important;
  border: 3px solid #fff0f5 !important;
}




}

  /* Make sure 'about-bg.jpeg' matches your uploaded background file name! */
  background-image: url('about-bg.jpeg'); 
  background-size: cover;
  background-position: center;
}