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



h1 {
  font-size: 54px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
h2 {
  font-size: 20px;
  letter-spacing:2px;
  text-transform: uppercase;
  margin-top:40px;
}
p {
  max-width: 600px;
  line-height: 1.7;
  font-style: italic;
  opacity: 0.85;
}
p {
  max-width: 600px;
  line-height: 1.6;
}

a {
  color: #a13b3b;
  text-decoration: none;
  border-bottom: 1px solid #a13b3b;
}

a:hover {
  color: #d46a6a;
  border-bottom: 1px dashed #d46a6a;
}
ul {
  list-style-type: square;
}
.container {
  max-width: 700px;
  margin: 0 auto;
}

.section {
  margin-top: 50px;
  padding: 20px;
  border-left: 2px solid #a13b3b;
}

.weekly {
  font-style: italic;
  opacity: 0.9;
}.section {
  background-color: rgba(255,255,255,0.03);
}
.favorites {
  margin-top: 50px;
}

.favorites h2 {
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-left: 3px solid #a13b3b;
  padding-left: 10px;
}

.movies-box, .songs-box {
  background-color: rgba(255,255,255,0.03);
  padding: 20px;
  margin-bottom: 20px;
  border-left: 2px solid #a13b3b;
}

.movies-box ul {
  list-style-type: square;
  margin-left: 20px;
}

.song-name {
  font-style: italic;
  opacity: 0.9;
}
.songs-box iframe {
  margin-top: 10px;
  border-radius: 8px;
}
.favorites-container {
  display: flex;
  flex-direction: column; /* vertical stacking by default */
  gap: 20px; /* space between boxes */
  align-items: flex-start; /* align to left */
}

.box {
  width: 200px;   /* square-ish width */
  height: 200px;  /* square-ish height */
  background-color: rgba(255,255,255,0.03);
  padding: 15px;
  border-left: 2px solid #a13b3b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.box ul, .box p {
  font-size: 14px;
  line-height: 1.4;
}
.favorites-container {
  position: relative; /* parent for absolute children */
  width: 50%; 
  height: 500px; /* enough space for scattering */
}

.box {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255,255,255,0.05);
  border-left: 2px solid #a13b3b;
  padding: 15px;
  transform: rotate(-5deg); /* slight tilt */
}
.movies-box { bottom: 20px; right: 50px; transform: rotate(-3deg); }
.songs-box  { bottom: 150px; right: 320px; transform: rotate(4deg); }
.poem-box   { bottom: 300px; right: 30px; transform: rotate(-1deg); }
.box {
  background-size: cover;
  color: #f3eee9;
}
.box {
  border: 2px solid #a13b3b;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
body {
  background-color: #2b0f14;
  color: #f3eee9;
  font-family: "Cormorant Garamond", serif;
  background-size: cover;
  background-attachment: fixed; /* stays in place while scrolling */
}
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(43,15,20,0.6); /* burgundy overlay */
  z-index: -1;
}
body {
 background-image: url('https://skymadeofashes.neocities.org/ashes/b2fe1df2930637e4480c7355c66be88e.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
.box {
  background-image: url('https://skymadeofashes.neocities.org/ashes/31efac0361c392c7c86f9575bdfcf454.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 18px;
  width: 220px;
  min-height: 220px;

  border: 1.5px solid #a13b3b;
  border-radius: 6px;

  color: #f3eee9;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}
.photography {
  margin-top: 50px;
  padding: 20px;
  border-left: 2px solid #a13b3b;
  background-color: rgba(255, 255, 255, 0.03);
}

.photography h2 {
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-left: 3px solid #a13b3b;
  padding-left: 10px;
}

.photography p {
  max-width: 600px;
  line-height: 1.6;
  font-style: italic;
  opacity: 0.85;
  margin-bottom: 20px;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.photo-link {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo {
  width: 100%;
  height: auto;
  max-width: 300px;
  border: 1.5px solid #a13b3b;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-link:hover .photo {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}
/* Commonplace section base */
.commonplace {
  position: relative;
  padding: 6rem 2rem;
  overflow: hidden;
}

/* The floating book image */
.commonplace-book {
  position: absolute;
  top: 50%;
  left: 25%;           /* move book to left */
  width: 520px;        /* larger book feel */
  max-width: 90%;
  transform: translate(-50%, -50%);
  opacity: 0.48;       /* visible but subtle */
  z-index: 0;
  animation: bookFloat 14s ease-in-out infinite;
  pointer-events: none;
}

/* Content stays above the book */
.commonplace-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-left: 180px;  /* move text to the right of book */
  text-align: left;
}

/* Section heading */
.commonplace h2 {
  font-size: 28px;
  letter-spacing: 3px;
  color: #5C4033;
  margin-bottom: 3rem;
}

/* Quote styling */
.commonplace blockquote {
  font-size: 22px;
  line-height: 2;
  color: #5C4033;
  max-width: 620px;
  margin: 0 0 3rem 0;  /* left margin handled by container */
}

.commonplace blockquote span {
  font-size: 16px;
  letter-spacing: 1px;
  opacity: 0.75;
  margin-top: 1rem;
  display: block;
}

/* Floating animation */
@keyframes bookFloat {
  0% {
    transform: translate(-50%, -50%) rotate(-1deg);
  }
  50% {
    transform: translate(-50%, -55%) rotate(1deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-1deg);
  }
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .commonplace-content {
    margin-left: 180px;  /* move text closer to center on smaller screens */
  }
  .commonplace-book {
    width: 400px;
  }
}

@media (max-width: 600px) {
  .commonplace-content {
    margin-left: 0;       /* stack text under book on very small screens */
    text-align: center;
  }
  .commonplace-book {
    width: 300px;
    left: 50%;           /* center book on small screens */
  }
}

.new-rocker-regular {
  font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}