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

body {
  background-color: #efe8dc;
  color: #4a3a2a;
  font-family: 'Varela Round', sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('https://i.ibb.co/gvphfQh/paper-texture.jpg');
  background-size: cover;
  background-attachment: fixed;
  cursor: url('https://cur.cursors-4u.net/cursors/cur-9/cur278.cur'), auto;
}

audio {
  position: fixed;
  bottom: 10px;
  left: 10px;
  opacity: 0.8;
  z-index: 999;
}

/* container */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  background: rgba(255, 250, 240, 0.8);
  border: 2px dashed #c4a484;
  border-radius: 10px;
  box-shadow: 3px 3px 12px #b59d7a;
  position: relative;
}

/* header */
header {
  text-align: center;
  margin-bottom: 2rem;
}

header h1 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 2.8rem;
  color: #5c4938;
  margin-bottom: 0.5rem;
}

blink {
  animation: blink 1.5s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

nav a {
  text-decoration: none;
  color: #6b5744;
  padding: 0 10px;
  font-weight: bold;
}

nav a:hover {
  color: #a47951;
}

/* divider GIFs */
.divider {
  display: block;
  margin: 1.5rem auto;
  width: 300px;
  opacity: 0.9;
}

/* intro */
.intro {
  text-align: center;
  padding: 1.5rem;
  background-color: #f7f0e6;
  border: 1px solid #d5bfa6;
  border-radius: 10px;
  box-shadow: 0 0 10px #d3c2ad;
}

.intro h2 {
  font-family: 'Gloria Hallelujah', cursive;
  color: #4d3928;
}

.intro p {
  color: #3f3227;
  max-width: 600px;
  margin: 1rem auto;
}

.button {
  display: inline-block;
  background-color: #a47951;
  color: #fffbe9;
  padding: 0.7rem 1.4rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
}

.button:hover {
  background-color: #c2986e;
}

/* scrapbook gallery */
.scrapbook {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.polaroid {
  background-color: #fff;
  padding: 10px;
  border: 2px solid #d2b48c;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
  text-align: center;
  width: 240px;
  transform: rotate(var(--angle, 2deg));
  transition: transform 0.3s;
}

.polaroid:hover {
  transform: scale(1.05) rotate(0deg);
}

.polaroid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* journal */
.journal {
  background-color: #f5ebd8;
  padding: 1.5rem;
  border-left: 4px solid #b88b5c;
  border-radius: 5px;
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
}

/* decorative tape corners */
.tape {
  position: fixed;
  width: 80px;
  height: 30px;
  background: rgba(255, 255, 204, 0.6);
  transform: rotate(-8deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1;
}

.tape.top-left {
  top: 15px;
  left: 25px;
}

.tape.top-right {
  top: 15px;
  right: 25px;
  transform: rotate(8deg);
}

/* footer */
footer {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #6f5a45;
}

footer a {
  color: #8b6f55;
  text-decoration: none;
}