/* ========================
   Notebook / Post-it Theme FINAL
   ======================== */

/* GLOBAL: BODY BACKGROUND */
body {
  font-family:'Comic Neue', cursive, sans-serif;
  margin:0;
  padding:0;

  /* Fallback background color */
  background-color:#fdf6e3;

  /* Optional background image - replace the URL to customize */
  background-image: url("x");
  background-size: cover;        /* Cover entire viewport */
  background-repeat: no-repeat;  /* Prevent tiling */
  background-position: center;   /* Center the image */

  color:#333;
}

/* HEADER */
header{
  text-align:center;
  padding:1rem;
  background:#fff8dc;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

/* NAVIGATION BAR BELOW HEADER WITH HIGHLIGHTED TEXT */
.nav-bar{
  display:flex;
  justify-content:center;
  gap:0.5rem;
  padding:0.5rem;
  flex-wrap:wrap;
}
.nav-bar .nav-item{
  text-decoration:none;
  font-weight:bold;
  border-radius:5px;
}
.nav-bar .nav-item .highlight{
  padding:0.2rem 0.4rem;
  border-radius:2px;
}
.highlight.yellow{background-color:#fff59d;}
.highlight.blue{background-color:#80deea;}
.highlight.pink{background-color:#ffab91;}
.highlight.green{background-color:#c5e1a5;}
.nav-bar .nav-item:hover .highlight{
  filter: brightness(1.2);
}

/* MAIN CONTAINER */
.main-container{
  display:flex;
  max-width:1200px;
  margin:1rem auto;
  gap:1rem;
  padding:0 1rem;
}

/* SIDEBAR POST-IT STACK */
aside{
  width:250px;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* POLAROID STYLE PROFILE PHOTO */
.profile-photo{
  background:#fff;
  padding:10px 10px 20px 10px;
  border:1px solid #ccc;
  box-shadow:3px 3px 10px rgba(0,0,0,0.2);
  text-align:center;
  aspect-ratio:1/1; /* square */
}
.profile-photo img{
  width:100%;
  object-fit:cover;
  border-radius:3px;
}

/* POST-IT NOTES */
.postit{
  padding:1rem;
  border-radius:10px;
  box-shadow:2px 2px 5px rgba(0,0,0,0.2);
  aspect-ratio:1/1; /* square */
  overflow-y:auto;   /* scroll if text overflows */
}
.postit.yellow{background:#fff176;}
.postit.green{background:#b9f6ca;}
.postit.pink{background:#ffcccb;}
.postit h2{margin-top:0;}
.postit ul{list-style:none; padding:0; margin:0;}
.postit ul li{margin:0.5rem 0;}
.postit ul li a{color:#333; text-decoration:none; font-weight:bold;}

/* CONTENT AREA */
.content{flex:1;}

/* BLOG BOX: college-ruled notebook */
.blog-post{
  border:2px solid #d2b48c;
  margin-bottom:1rem;
  height:700px; /* double height for more text */
  padding:0.5rem;
  border-radius:10px;
  position:relative;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  background-color:white;
  background-image:
    repeating-linear-gradient(
      white 0px, 
      white 27px, 
      #add8e6 28px 30px
    ); /* blue notebook lines */
  background-size:100% 28px;
}
.blog-post h2{
  margin:0 0.5rem 0.5rem 0.5rem;
  padding:0.3rem;
  text-align:center;
  background:#fffacd;
  border-radius:5px;
}

/* INDIVIDUAL BLOG PAGES */
.blog-page{
  display:none;
  padding:1rem;
  height:calc(100% - 50px);
  overflow-y:auto;
  border-radius:5px;
  position:relative;
}
.blog-page::after{
  content:attr(data-page);
  position:absolute;
  bottom:5px;
  right:10px;
  font-size:0.8rem;
  color:#888;
}
.blog-page::before{
  content:"✎";
  position:absolute;
  top:5px;
  left:10px;
  font-size:1rem;
  color:#ccc;
  transform:rotate(-20deg);
}

/* PAGE CONTROLS */
.page-controls{
  position:absolute; 
  bottom:10px; 
  right:10px; 
  display:flex; 
  gap:5px;
}
.page-controls button{
  border:1px solid #d2b48c;
  border-radius:5px;
  padding:0.4rem 0.7rem;
  cursor:pointer;
  font-weight:bold;
  transition:background 0.2s;
}
.page-controls button:hover{opacity:0.9;}

/* GALLERY BOX */
.gallery-box{margin-bottom:1rem;}
.gallery-box h2{margin-bottom:0.5rem;}
.photo-gallery{
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); 
  gap:1rem;
}
.polaroid{
  background:#fff;
  padding:10px 10px 20px 10px;
  border:1px solid #ccc;
  box-shadow:3px 3px 10px rgba(0,0,0,0.2);
  text-align:center;
  transform:rotate(-1deg);
}
.polaroid img{width:100%; border-radius:3px;}

/* FOOTER */
footer{
  background:#fff8dc;
  text-align:center;
  padding:0.5rem;
  font-size:0.9rem;
  position:relative;
  border-top:1px solid #d2b48c;
}
footer .made-by{
  position:absolute; 
  right:1rem; 
  top:50%; 
  transform:translateY(-50%);
}
footer .made-by img{width:32px; height:32px; border-radius:50%; border:2px solid #d2b48c;}

/* MOBILE */
@media(max-width:768px){
  .main-container{flex-direction:column;}
  aside{width:100%; margin-bottom:1rem;}
  .content{width:100%;}
  footer .made-by{position:static; display:block; margin:0.5rem auto 0; transform:none;}
  .nav-bar{justify-content:space-around;}
}