/* 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 {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  background:
    linear-gradient(45deg, #BEE7C6 25%, transparent 25%),
    linear-gradient(-45deg, #BEE7C6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #BEE7C6 75%),
    linear-gradient(-45deg, transparent 75%, #BEE7C6 75%);
  background-size: 40px 40px;
  background-color: #7FB69A;
  text-align: center;
  color: #4A2E2E;
  cursor: url('strawberry.cur'), auto;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.password-box {
  background: #F6A5B5;
  border: 3px solid #7FB69A;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 0 20px #C96B8A;
}

.hidden { display: none; }

.title {
  font-family: 'Pacifico', cursive;
  color: #C96B8A;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  padding: 25px;
}

.envelope {
  position: relative;
  width: 150px;
  height: 110px;
  background: #F6A5B5;
  border-radius: 10px;
  border: 3px solid #7FB69A;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.envelope::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 60%;
  background: #C96B8A;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.envelope:hover {
  transform: translateY(-6px) scale(1.05);
}

.month-label {
  position: absolute;
  bottom: 10px;
  width: 100%;
  font-family: 'Pacifico', cursive;
}

.popup {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, #7FB69A 60%, #F6A5B5 60%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.letter-box {
  background:
    radial-gradient(#F6A5B5 20%, transparent 20%),
    radial-gradient(#F6A5B5 20%, transparent 20%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  background-color: #7FB69A;
  border-radius: 18px;
  padding: 25px;
  width: 90%;
  max-width: 420px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  border: 3px solid #C96B8A;
  box-shadow: 0 12px 22px rgba(0,0,0,0.2);
}

.letter-text {
  font-family: 'Quicksand', sans-serif;
}

button {
  background: #7FB69A;
  border: none;
  border-radius: 12px;
  padding: 10px 15px;
  margin-top: 10px;
}

.music-btn, .dark-btn {
  position: fixed;
  bottom: 15px;
  padding: 12px;
  border-radius: 50%;
  background: #F6A5B5;
}

.music-btn { right: 15px; }
.dark-btn { left: 15px; }