@font-face {
  font-family: SweetMavka;
  src: url("/src/fonts/Sweet Mavka Script.otf");
  font-weight: 400;
}
@font-face {
  font-family: PlayfairDisplay;
  src: url("/src/fonts/PlayfairDisplay-Italic.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "SavoyeLet";
  src: url("/src/fonts/Savoye LET Plain1.0.woff"), format("woff");
  font-display: swap;
}
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-4 {
  margin-bottom: 4rem;
}
.map {
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
.map__flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.map__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem;
}
.map__cont {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.map__filter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 31, 55, 0.3);
  pointer-events: none;
}
.text {
  margin: 0;
  font-size: 1.5rem;
  font-family: PlayfairDisplay;
  font-style: normal;
  text-align: center;
}
.text--small {
  font-size: 1.25rem;
}
.text--tiny {
  font-size: 1rem;
}
.text--left {
  text-align: left;
}
.title {
  margin: 0;
  font-size: 2.5rem;
  font-family: SweetMavka;
  text-align: center;
  text-shadow: 0 0 12px white;
  text-shadow: 0 0 8px white;
  text-shadow: 0 0 8px black;
}
.title--big {
  font-size: 2.75rem;
}
@media screen and (min-width: 768px) {
  .title--big {
    font-size: 4rem;
  }
}
.sky {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  z-index: 1;
}
.content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 5rem 2rem 2rem;
}
.content__title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.content__text {
  font-size: 1.2rem;
  font-family: PlayfairDisplay;
  max-width: 600px;
  margin: 0 auto 2rem;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.form {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
.form__text {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.form__cont {
  z-index: 2;
  width: 100%;
  margin: 4rem auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 12px;
  backdrop-filter: blur(5px);
  animation: fadeIn 2s ease-in;
  font-family: PlayfairDisplay;
}
.form__fieldset {
  padding: 0;
  border: none;
}
.form__fieldset--hidden {
  display: none;
}
.form__title {
  margin-bottom: 1rem;
}
.form__input-cont {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.form__input-cont--hidden {
  display: none;
}
.form__label {
  display: block;
  margin-bottom: 0.5rem;
  text-align: left;
}
.form__input-text {
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 8px;
}
.form__input-select {
  width: 100%;
  height: 31px;
  padding: 0 0.5rem;
  margin-top: 0.25rem;
  border: none;
  border-radius: 8px;
}
.form__option[value=""][disabled] {
  display: none;
}
.form__checkbox-cont {
  margin-bottom: 0.5rem;
}
.form__checkbox-cont--question {
  margin-bottom: 1rem;
}
.form__input-checkbox {
  display: none;
}
.form__label-checkbox {
  position: relative;
  display: block;
  text-align: left;
  padding: 12px 12px 12px 48px;
  border-radius: 8px;
  cursor: pointer;
}
.form__label-checkbox::before {
  content: "";
  position: absolute;
  display: flex;
  align-content: center;
  justify-content: center;
  top: 50%;
  left: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid white;
  border-radius: 4px;
  transform: translateY(-50%);
  background-color: white;
}
.form__btn {
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-family: PlayfairDisplay;
  background-color: #507cab;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.form__btn:hover {
  background-color: #1060b0;
}
.form__input-checkbox:checked + .form__label-checkbox {
  background-color: #ffffff16;
}
.form__label-checkbox:hover {
  background-color: #ffffff30;
}
.form__input-checkbox:checked + .form__label-checkbox:hover {
  background-color: #ffffff30;
}
.form__input-checkbox:checked + .form__label-checkbox::before {
  content: "\2713";
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #507cab;
}
.container {
  box-sizing: border-box;
  padding: 4px;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.5rem;
}
* {
  box-sizing: border-box;
}
.body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  width: 100%;
  font-family: 'Georgia', serif;
  color: #fff;
  overflow-x: hidden;
  background: linear-gradient(to bottom, #101f37 30%, #234568);
  background-repeat: no-repeat;
  background-position: top center;
  background-position: bottom;
  text-shadow: 0 0 8px black;
}
.body__sky-filter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #101f37 30%, #234568);
  pointer-events: none;
}
.body__lights-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: url("/src/pics/giphy.gif");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.body__lights-cont::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(44, 31, 38, 0.4), rgba(58, 46, 68, 0.7));
}
.body__lights {
  display: block;
  width: 100%;
  height: 100%;
}
.body__hr {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 125px;
  margin: 6rem auto;
  border: none;
  background-image: url("/src/pics/hr.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 60%;
  opacity: 0.75;
}
.body__hr--intro {
  margin-top: 0;
}
.intro {
  position: relative;
  width: 80%;
  min-height: 100vh;
  margin: 0 auto;
}
.intro__hr {
  background-position-y: 40%;
}
.intro__cont {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-content: center;
  gap: 4rem;
  align-items: center;
  min-height: 100vh;
}
.intro__pics {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  width: 100%;
  min-height: 30vh;
  padding: 24px;
  border: 4px solid rgba(169, 203, 219, 0.713);
  border-radius: 64px;
  box-shadow: 0 0 12px white;
}
@media screen and (min-width: 768px) {
  .intro__pics {
    padding: 48px;
    border-radius: 96px;
  }
}
.intro__letters {
  width: 70%;
  height: auto;
  margin-top: 1rem;
  margin-bottom: 0;
  opacity: 0.65;
}
@media screen and (min-width: 768px) {
  .intro__letters {
    width: 50%;
    height: 154px;
    margin-top: 0;
    margin-bottom: 1rem;
  }
}
.intro__date {
  margin: 0 auto;
  width: 100%;
  font-size: 3.5rem;
  font-style: italic;
  font-style: normal;
  text-align: center;
  font-weight: 400;
  font-synthesis: none;
  opacity: 0.6;
}
@media screen and (min-width: 768px) {
  .intro__date {
    font-size: 6rem;
  }
}
.intro__title {
  margin-top: 2rem;
}
.intro__star-cont {
  position: absolute;
  width: 96px;
  height: 96px;
}
.intro__star-cont::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #5eafd1;
  box-shadow: 0 0 12px 12px #5eafd1;
  animation: shadowTwinkling;
  animation-iteration-count: infinite;
}
.intro__star-cont--left::before,
.intro__star-cont--top::before {
  animation-duration: 3s;
}
.intro__star-cont--right::before,
.intro__star-cont--bottom::before {
  animation-duration: 4s;
}
.intro__star-cont--left {
  top: 30px;
  left: -55px;
}
.intro__star-cont--right {
  bottom: 50px;
  right: -55px;
}
.intro__star-cont--top {
  top: -55px;
  right: 55px;
}
.intro__star-cont--bottom {
  left: 55px;
  bottom: -55px;
}
.intro__star-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: none;
  animation: sheduleStarTwinkilng;
  animation-iteration-count: infinite;
}
.intro__star-border--left,
.intro__star-border--top {
  animation-duration: 3s;
}
.intro__star-border--right,
.intro__star-border--bottom {
  animation-duration: 4s;
}
@keyframes shadowTwinkling {
  0% {
    box-shadow: 0 0 12px 12px #5eafd1;
  }
  50% {
    box-shadow: 0 0 16px 16px #bdebff;
  }
  100% {
    box-shadow: 0 0 12px 12px #5eafd1;
  }
}
@keyframes sheduleStarTwinkilng {
  0% {
    scale: 1;
    box-shadow: none;
  }
  50% {
    scale: 1.2;
  }
  100% {
    scale: 1;
    box-shadow: none;
  }
}
.schedule {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}
.schedule__info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 48px;
  border: 4px solid rgba(169, 203, 219, 0.713);
  border-radius: 96px;
  box-shadow: 0 0 12px white;
}
.schedule__title {
  margin-bottom: 2rem;
}
.schedule__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 96px;
}
.schedule__lightbar {
  position: absolute;
  top: 4%;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, -50%);
  transform: translateX(-50%);
  z-index: 1;
  height: 85%;
  width: 2px;
  background: repeating-linear-gradient(rgba(118, 179, 216, 0.5) 0%, rgba(75, 152, 196, 0.5) 10%, rgba(76, 138, 172, 0.5) 20%, rgba(70, 155, 211, 0.5) 30%, rgba(80, 166, 249, 0.5) 40%, rgba(118, 179, 216, 0.5) 50%);
  box-shadow: 0 0 8px 1px rgba(92, 187, 245, 0.5);
}
.schedule__milestone {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1.5rem;
}
.schedule__milestone::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 6px;
  height: 6px;
  background-color: transparent;
  box-shadow: 0 0 16px 8px rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: shadow;
  animation-duration: 3s;
  animation-duration: var(--animDurBefore, 3s);
  animation-iteration-count: infinite;
}
.schedule__time {
  width: 40%;
  flex: none;
  font-size: 2rem;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .schedule__time {
    font-size: 2rem;
  }
}
.schedule__star {
  position: relative;
  z-index: 3;
  width: 30px;
  height: 30px;
  animation: scaling;
  animation-duration: var(--animDurStar, 3s);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes scaling {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.schedule__event {
  width: 40%;
  font-size: 1.25rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .schedule__event {
    font-size: 1.5rem;
  }
}
.schedule__star-start-grad {
  stop-color: #b0e4ee;
}
.schedule__star-finish-grad {
  animation: outerGrad;
  animation-duration: var(--animDurGrad, 3s);
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.schedule__star-finish-grad--1 {
  animation-duration: var(--animDurGrad1, 3s);
}
.schedule__star-finish-grad--2 {
  animation-duration: var(--animDurGrad2, 3s);
}
@keyframes shadow {
  0% {
    box-shadow: 0 0 16px 8px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 16px 8px rgba(35, 104, 146, 0.5);
  }
  50% {
    box-shadow: 0 0 16px 12px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 16px 12px rgba(79, 152, 197, 0.5);
  }
  100% {
    box-shadow: 0 0 16px 8px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 16px 8px rgba(35, 104, 146, 0.5);
  }
}
@keyframes outerGrad {
  0% {
    stop-color: #71BEEA;
  }
  50% {
    stop-color: #b0e4ee;
  }
  100% {
    stop-color: #71BEEA;
  }
}
.main {
  position: relative;
  width: 100%;
  max-width: 768px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  font-family: PlayfairDisplay ;
  background-size: cover;
  background-size: 768px calc(var(--vh) * 100);
  background-position: center bottom;
  background-attachment: fixed;
}
.main__intro-bg {
  position: fixed;
  width: 100%;
  max-width: 768px;
  height: 100vh;
  background: url("/src/pics/bg.webp");
  background-size: 150% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (min-width: 768px) {
  .main__intro-bg {
    background-size: 100% 100%;
  }
}
.main__sky-filter {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 768px;
  height: 100vh;
  pointer-events: none;
}
.star1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(52deg);
  background-color: #e5e5e5;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.65);
  will-change: transform;
  animation: falling;
  animation-duration: 12s;
  animation-delay: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: top, left, opacity;
}
.star1::before {
  content: "";
  position: absolute;
  top: -16.5px;
  left: -21px;
  z-index: -1;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 3px 40px 3px;
  border-color: transparent transparent rgba(216, 216, 216, 0.75) transparent;
  transform: rotate(271deg);
}
@media screen and (min-width: 768px) {
  .star1::before {
    transform: rotate(271deg);
  }
}
.star1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cdcdcd;
  transform: rotate(57deg);
}
@media screen and (min-width: 768px) {
  .star1 {
    transform: rotate(48deg);
  }
}
@keyframes falling {
  0% {
    top: 0;
    left: 0;
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  25% {
    top: 95%;
    left: 100%;
  }
  100% {
    left: 0;
    top: 0;
    opacity: 0;
  }
}
.star2 {
  position: absolute;
  top: -5%;
  left: 8%;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(67.5deg);
  background-color: #e5e5e5;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.65);
  animation: falling2;
  animation-duration: 12s;
  animation-delay: 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: top, left, opacity;
}
@media screen and (min-width: 768px) {
  .star2 {
    transform: rotate(58deg);
  }
}
.star2::before {
  content: "";
  position: absolute;
  top: -16.5px;
  left: -21px;
  z-index: -1;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 3px 40px 3px;
  border-color: transparent transparent rgba(216, 216, 216, 0.75) transparent;
  transform: rotate(271deg);
}
@media screen and (min-width: 768px) {
  .star2::before {
    transform: rotate(271deg);
  }
}
.star2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cdcdcd;
  transform: rotate(52deg);
}
@keyframes falling2 {
  0% {
    top: 0%;
    left: 10%;
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  19% {
    opacity: 1;
  }
  23% {
    opacity: 0;
  }
  25% {
    top: 100%;
    left: 90%;
  }
  100% {
    top: 0%;
    left: 10%;
    opacity: 0;
  }
}
.star3 {
  position: absolute;
  top: 10%;
  left: 0%;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(69deg);
  background-color: #e5e5e5;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.65);
  animation: falling3;
  animation-duration: 12s;
  animation-delay: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: top, left, opacity;
}
.star3::before {
  content: "";
  position: absolute;
  top: -16.5px;
  top: -17px;
  left: -21px;
  z-index: -1;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 3px 40px 3px;
  border-color: transparent transparent rgba(216, 216, 216, 0.75) transparent;
  transform: rotate(273deg);
}
@media screen and (min-width: 768px) {
  .star3::before {
    top: -18px;
    transform: rotate(277deg);
  }
}
.star3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cdcdcd;
  transform: rotate(52deg);
}
@media screen and (min-width: 768px) {
  .star3 {
    transform: rotate(52deg);
  }
}
.star3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cdcdcd;
  transform: rotate(52deg);
}
@media screen and (min-width: 768px) {
  .star3 {
    transform: rotate(56deg);
  }
}
@keyframes falling3 {
  0% {
    top: 12%;
    left: 0%;
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  19% {
    opacity: 1;
  }
  23% {
    opacity: 0;
  }
  25% {
    top: 100%;
    left: 50%;
  }
  100% {
    top: 12%;
    left: 0%;
    opacity: 0;
  }
}
.info {
  position: relative;
  z-index: 1;
  width: 80%;
  margin: 0 auto 16rem;
  text-align: center;
}
.info--divider {
  margin-bottom: 6rem;
}
.info__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.info__content--intro {
  min-height: 100vh;
}
.info__title {
  margin-bottom: 1.5rem;
}
.info__text {
  margin-bottom: 1rem;
}
.info__last-content {
  margin-bottom: 4rem;
}
a {
  color: white;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
}
.contacts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto 6rem;
}
.contacts__address {
  display: flex;
  justify-content: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  gap: 30px;
  width: 100%;
  margin: 0 auto 5rem;
}
@media screen and (min-width: 768px) {
  .contacts__address {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}
.contacts__person {
  justify-content: end;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 16px;
  width: 100%;
  margin-right: auto;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .contacts__person {
    grid-template-columns: 35% 65%;
    grid-template-rows: repeat(2, 1fr);
    row-gap: 0;
    justify-content: start;
  }
}
.contacts__main {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  text-align: left;
}
.contacts__links-list {
  grid-column: 2/3;
  display: flex;
  justify-content: center;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .contacts__links-list {
    justify-content: start;
    justify-content: end;
    gap: 10px;
  }
}
.contacts__links-item--single {
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .contacts__links-item--single {
    margin-right: 132px;
  }
}
.contacts__icon-link {
  display: inline-block;
  padding: 4px;
  font-size: 0;
}
.contacts__list-text {
  margin: 0 auto 0.5rem;
  text-align: left;
}
.contacts__text {
  margin-bottom: 2rem;
}
.contacts__name {
  font-size: 1.25rem;
  text-align: center;
  flex-basis: 50%;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .contacts__name {
    font-size: 1.4rem;
    text-align: right;
    margin-bottom: 12px;
  }
}
.contacts__phone {
  flex-basis: 50%;
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  .contacts__phone {
    font-size: 1.4rem;
  }
}
.contacts__outer-list {
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .contacts__outer-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.contacts__outer-item {
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .contacts__outer-item {
    flex: 1 1 auto;
  }
}
.contacts__inner-item {
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}
.contacts__link {
  display: block;
  margin-bottom: 0.75rem;
  font-style: normal;
}
.contacts__link:hover {
  text-decoration: none;
}
.contacts__icon {
  width: 48px;
  height: 48px;
}
address {
  margin-right: auto;
}
li {
  font-size: 1.25rem;
}
.timer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  padding: 1rem 1.5rem 2rem;
  margin: 0 auto 8rem;
  font-family: "SavoyeLet";
  font-family: SL;
  border: 4px solid rgba(169, 203, 219, 0.713);
  border-radius: 64px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 12px white;
}
@media screen and (min-width: 768px) {
  .timer {
    width: 75%;
    padding: 1rem 0 2.5rem;
    border-radius: 96px;
  }
}
.timer__title {
  margin-bottom: 2rem;
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .timer__title {
    margin-bottom: 1.5rem;
    font-size: 3rem;
  }
}
.timer__main {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  font-size: 3rem;
  font-family: "SavoyeLet";
  line-height: 50%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .timer__main {
    align-items: baseline;
    font-size: 6rem;
  }
}
.timer__units {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 66px;
}
@media screen and (min-width: 768px) {
  .timer__units {
    width: 136px;
  }
}
.timer__digits {
  display: inline-block;
  width: 2.5rem;
  width: 100%;
  margin: 0;
  font-size: 5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .timer__digits {
    width: 4rem;
    width: 100%;
    font-size: 6.5rem;
  }
}
.timer__text {
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  .timer__text {
    font-size: 1.75rem;
  }
}
.twinklingStars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
}
.modal__overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.2);
}
.modal__content {
  width: 100%;
  max-width: 520px;
  margin: 0 2rem;
  height: min-content;
  padding: 16px;
  border: 4px solid #507cab;
  border-radius: 16px;
  background-color: white;
}
@media screen and (min-width: 768px) {
  .modal__content {
    padding: 48px;
    border: 16px solid #507cab;
    border-radius: 48px;
  }
}
.modal__text {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #507cab;
  text-shadow: 0 0 8px black;
  text-shadow: none;
  font-size: 1rem;
  font-family: PlayfairDisplay;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .modal__text {
    margin-bottom: 2rem;
    font-size: 2rem;
  }
}
.modal__btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  color: white;
  font-size: 1rem;
  font-family: PlayfairDisplay;
  border: none;
  border-radius: 8px;
  background-color: #507cab;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .modal__btn {
    padding: 1rem;
    font-size: 2rem;
  }
}
.modal__btn:focus {
  outline: none;
}
.modal__btn:hover {
  background-color: #1060b0;
}