/* John's 12 Days of Warmth - Special Project
 by John Wong Cheuk Bun (john.wong@uniqlo.eu)
 v1.0.0 
*/
/* Global styling */
main {
  background: linear-gradient(to bottom, #e0ba82 0%, #f1ddc2 50%, #ffffff 100%);
}

.festive-red {
  color: #b81d22;
}

.centertext {
  text-align: center;
  margin: auto;
}

.appdownload {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin: 2em auto;
  gap: min(1em, 40px);
  width: min(80vw, 400px);
}

.app-store-icons {
  flex: 1;
  height: 45px;
  -o-object-fit: contain;
     object-fit: contain;
}

.calendar-screenshots-container {
  margin: auto;
  text-align: center;
  width: 100%;
}
.calendar-screenshots-container img {
  width: min(80vw, 400px);
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  row-gap: 1em;
  margin: 0 auto;
  max-width: max(768px, 48%);
  padding: 0 1em;
}

.day {
  background-color: #f7e2cc;
  padding: 1em 1em;
  border-radius: 0px;
  color: white;
  text-align: center;
}
.day img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Popup styling */
.popup {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 80vh;
  background-color: #03532d;
  color: #ffffff;
  padding: 1em;
  z-index: 9999;
  overflow: scroll;
}
.popup img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: auto;
}
.popup #popup-title {
  margin: 1em;
}
.popup #popup-description {
  font-size: 1em;
  margin: 1em;
}
.popup #popup-disclaimer {
  font-size: 0.75em;
  margin: 1em;
}

.popup-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.popup-button {
  background-color: #000000;
  color: white;
  padding: 1em 2em;
  border: none;
  text-decoration: none;
  border-radius: 20px;
}

#popup-close {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: rgba(240, 240, 240, 0.5);
  color: #cd2127;
  border: none;
  border-radius: 50%;
  height: 45px;
  width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sparkle effect styling */
.sparkle {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  z-index: 9999;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Snowflakes container - must cover entire viewport */
#snowflakes-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000; /* Above everything else */
}

/* Individual snowflake styling */
.snowflake {
  position: absolute;
  top: -10px;
  color: rgba(223, 223, 223, 0.946) !important;
  font-size: 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.nonactivedays {
  filter: grayscale(90%);
  opacity: 0.5;
  pointer-events: none;
}
.nonactivedays * {
  pointer-events: none;
}

/* Utilities - Margin and Padding */
.mt1 {
  margin-top: 1em;
}

.mt2 {
  margin-top: 2em;
}

.my1 {
  margin-top: 1em;
  margin-bottom: 1em;
}

.my2 {
  margin-top: 2em;
  margin-bottom: 2em;
}

.mx1 {
  margin-left: 1em;
  margin-right: 1em;
}

.mx2 {
  margin-left: 2em;
  margin-right: 2em;
}

.mb2 {
  margin-bottom: 2em;
}

.p1 {
  padding: 1em;
}

.p2 {
  padding: 2em;
}

.px1 {
  padding-left: 1em;
  padding-right: 1em;
}

.px2 {
  padding-left: 2em;
  padding-right: 2em;
}

.decoration-underline {
  text-decoration: underline;
}

.hidden {
  display: none;
}/*# sourceMappingURL=john-12days-of-warmth.css.map */