body {
  font-family: 'Quicksand', cursive;
  padding: 20px;
  background: url('Images/vintage-min.png') no-repeat; /* vintage paper texture */
  background-size: cover;
  color: #4B3C3C; /* Dark brown for text */
}

.scrapbook {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: rgba(255, 223, 177, 0.6);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}



h1 {
  text-align: center;
  font-size: 3em;
  color: #472200;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  animation: chillPulsate 2s infinite; /* Chill pulsing effect */
}

/* Chill pulsing effect */
@keyframes chillPulsate {
  0%, 100% {
      transform: scale(1); /* Normal size */
  }
  50% {
      transform: scale(1.1); /* Slightly larger */
  }
}

.form-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-top: 10px;
}

select, button {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #8B4513; /* Saddle brown */
  border-radius: 5px;
}

button {
  background-color: #D2B48C; /* Tan */
  cursor: pointer;
}

button:hover {
  background-color: #C19A6B; /* Light brown */
}

#result {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.entry {
  border: 2px solid #4B3C3C; /* Dark brown solid border */
  border-radius: 10px;
  box-sizing: border-box;
  margin: 10px;
  padding: 15px;
  position: relative;
  width: calc(48% - 20px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden; /* To hide the overflow of pseudo elements */
}

.entry::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  opacity: 0.4; /* opacity for desired overlay effect */
  z-index: 1; /* Position behind content */
}

.entry-header {
  font-size: 1.5em;
  margin-bottom: 10px;
  z-index: 2; /* Position above overlay */
  position: relative; 
}

.coffee-info {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  z-index: 2; /* Position above overlay */
}

.location, .type, .times {
  margin: 5px 0;
  padding: 8px;
  background: rgba(210, 180, 140, 0.6); /* Light tan background */
  border-radius: 5px;
  font-weight: bold;
}


.company {
  margin-top: 10px;
  font-size: 1em;
  font-style: italic;
  color: #6B4F4F; /* A softer brown */
}

/* Mood-based background colors */
.relaxed {
  background-color: rgba(135, 206, 250, 0.3); /* Light blue */
}

.stressed {
  background-color: rgba(170, 246, 28, 0.3); /* Light red */
}

.tired {
  background-color: rgba(212, 212, 212, 0.3); /* Light gray */
}
.hyperactive {
    background-color: rgba(247, 247, 247, 0.3); /* Light gray */
}

/* frame effect */
.entry::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 5px solid #8B4513; /* Saddle brown */
  border-radius: 15px;
  z-index: 0; /* Position behind content */
}



@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}