/* --- Reset --- */
* { 
   box-sizing: border-box; 
   padding: 0px;
   margin: 0px;
}

html, body { 
   height: 100%; 
   width: 100%; 
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  background-color: #ebebee;
  color: black;
}

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { 
  color: #999;
  font-family: "Inter", sans-serif;
  font-weight: 300;
}

p {
  font-size: 18px;
}

 a, input, textarea, select, button {
    transition: background-color 0.8s ease;
    -webkit-appearance: none;
    appearance: none;
    font-family: "Inter", sans-serif;
 }

.inner {
	max-width: 1400px;
	width: 100%;
	display: block;
	margin: 0 auto;
}

/* --- Main styles --- */

.fold {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: auto;
   flex-wrap: wrap;
   min-height: 100%;
   height: auto;
}

.main {
   text-align: center;
   max-width: 600px;
   width: 100%;
   padding: 30px 0;
}

h1 {
   font-size: calc(1.5vw + 20px);
   color: #F54857;
}

h2 {
   font-size: 22px;
   margin: 20px 0;
}

.countdown {
   margin: 50px 0;
   display: flex;
   justify-content: space-between;
}

.countdown .days, .countdown .hours, .countdown .minutes, .countdown .seconds {
   display: flex;
   flex-direction: column;
   gap: 20px;
   min-width: 75px;
}

.countdown .val {
   font-size: 50px;
   font-weight: bold;
}

.countdown .label {
   text-transform: uppercase;
   font-size: 20px;
   color: #F54857;
   font-weight: 800;
}

form {
   display: inline-flex;
   gap: 20px;
   flex-direction: column;
   max-width: 600px;
   width: 100%;
}

form input {
   border: solid 1px #ccc;
   padding: 10px;
   font-size: 18px;
   border-radius: 3px;
   width: 100%;
}

form button {
   background: #F54857;
   padding: 15px 30px;
   border-radius: 3px;
   border: none;
   cursor: pointer;
   font-weight: bold;
   font-size: 18px;
   color: white;
   width: 100%;
}

form .legal {
   font-size: 12px;
   color: #666666;
   max-width: 500px;
   width: 100%;
   display: block;
   margin: 0 auto;
}

.events {
   display: flex;
   flex-direction: column;
   gap: 50px;
}

.event {
   display: flex;
   margin-top: 50px;
   background-color: #fcdfe1;
   border: solid 2px #F54857;
   padding: 30px;
   border-radius: 30px;
   gap: 30px;
}

.event .left, .event .right {
   text-align: left;
}

.event .left i {
   font-size: 60px;
}



.event .right h3 {
   font-size: 24px;
}

.event .right p {
   font-size: 18px;
   margin-top: 10px;
}

.event .right .button {
   background-color: #F54857;
   padding: 15px 30px;
   font-size: 18px;
   border-radius: 3px;
   border: none;
   cursor: pointer;
   text-decoration: none;
   color: white;
   font-weight: bold;
   display: inline-block;
   margin: 20px 0;
}

.event .right .button:hover {
   background-color: #5f1c22;
}

.event .right .sub {
   font-size: 14px;
   margin-top: 5px;
   margin-bottom: 20px;
}




/* Button styles */
.add-to-calendar {
   background-color: #F54857;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
   display: inline-flex;
   gap: 10px;
   align-items: center;
   position: relative;
}

/* Dropdown styles */
.calendar-dropdown {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: #ebebee;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   padding: 10px;
   min-width: 250px;
   z-index: 10;
   border: solid 1px #ccc;
}

.calendar-dropdown a {
   text-decoration: none;
   display: flex;
   padding: 10px;
   color: #000;
   gap: 10px;
   align-items: center;
   border-radius: 3px;
}

.calendar-dropdown a:hover {
   background-color: #fff;
}

.cal h2  {
   font-weight: 300;
}

.cal h2 strong {
   font-weight: bold;
}


.overview {
   padding: 150px 0;
}

.overview .inner {
   display: flex;
   flex-direction: column;
   gap: 50px;
}

.overview .inner .day {
   display: flex;
   gap: 50px;
   justify-content: space-between;
   align-content: center;
}

.overview .inner .day .date {
   flex: 0.5;
   font-size: 26px;
   font-weight: bold;
   padding: 20px;
}

.overview .inner .day .desc {
   flex: 1.5;
   font-size: 20px;
   padding: 20px;
}


.about {
   padding: 150px 0;
}

.about .inner {
   display: flex;
   gap: 50px;
}

.about p + p {
   margin-top: 10px;
}

.cta {
   padding: 150px 0;
   text-align: center;
}

.cta form {
   margin-top: 30px;
}

footer {
   padding: 30px 0;
   font-size: 14px;
   text-align: center;
}


.learn-more {
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   font-size: 18px;
   color: #666;
   position: absolute;
   bottom: 20px;
   left: 0;
   width: 100%;
}

.arrow {
   width: 16px;
   height: 16px;
   border-right: 3px solid #666;
   border-bottom: 3px solid #666;
   transform: rotate(45deg);
   animation: bounce 1.5s infinite;
   margin-top: 5px;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateY(0) rotate(45deg);
      opacity: 1;
   }

   50% {
      transform: translateY(8px) rotate(45deg);
      opacity: 0.7;
   }
}

/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
	.inner {
		width: 85%;
	}
}

/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {
	.inner {
		width: 100%;
		padding: 20px;
	}

   .event {
      flex-direction: column;
      align-items: center;
   }

   .event .left, .event .right {
      text-align: center;
   }

   .calendarOptions .options {
      justify-content: center;
   }

   .overview .inner .day {
      flex-direction: column;
      gap: 0;
   }

   .about .inner {
      flex-direction: column;
   }

   .about, .overview, .cta {
      padding: 30px 0;
   }

}