/**
 * NOTE: During dev, this file must be watched. A convenient
 *       watch method has been created for this purpose in `watch.sh`
 */
.observed .blur-fade-left {
  animation: var(--duration, 200ms) var(--delay, 0ms) blur-fade-left forwards;
}
.observed .blur-fade-right {
  animation: var(--duration, 200ms) blur-fade-right forwards;
  animation-delay: var(--delay, 0ms);
}

div.page-pop-up {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  overflow-y: scroll;
  animation: bg-blur-in 500ms forwards;
  animation-timing-function: var(--default-animation-timing-function);
  backdrop-filter: blur(8px);
  --popup-bg: radial-gradient(
    circle at 30% 30%,
    var(--col1) -70%,
    var(--col2) 60%
  );
  --col1: hsla(var(--base-hue), 100%, 15%, 90%);
  --col2: hsla(var(--base-hue), 100%, 00%, 30%);
}
div.page-pop-up .burger-menu {
  min-height: 90vh;
  width: 80%;
  box-sizing: border-box;
  gap: 3rem;
}
div.page-pop-up .burger-menu .top {
  justify-content: space-around;
  align-items: baseline;
  height: 40vh;
}
div.page-pop-up .burger-menu .bottom a button {
  width: 100%;
  font-size: 1rem;
}
div.page-pop-up .burger-menu img {
  width: clamp(75px, 25vw, 120px);
}
div.page-pop-up .burger-menu div.logo span {
  font-size: 1.6rem;
}
div.page-pop-up .burger-menu a {
  font-size: 2rem;
  color: white;
}

@keyframes bg-blur-in {
  from {
    opacity: 0;
    backdrop-filter: blur(--backdrop-blur-from, 0px);
    background: transparent;
  }
  to {
    opacity: 1;
    backdrop-filter: blur(--backdrop-blur-to, 15px);
    background: var(--popup-bg, rgba(0, 0, 0, 0.3725490196));
  }
}
body div.banner {
  padding: 5rem 4rem;
  background: black;
  color: white;
}

body.light div.card-showcase.banner {
  background: white;
  color: black;
}

body div.banner.card-showcase {
  padding-right: 0;
}
@media only screen and (max-width: 767px) {
  body div.banner.card-showcase {
    padding-left: 0;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    gap: 1.5rem;
  }
}
body div.banner.card-showcase > .left {
  width: 30%;
}
@media only screen and (max-width: 767px) {
  body div.banner.card-showcase > .left {
    width: 100%;
    flex-direction: row;
    padding-inline: 1.5rem;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
  }
}
body div.banner.card-showcase > .left button {
  --col: #0007;
  --size: 3rem;
  background: none;
  border: 2px solid var(--col);
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  padding: 0;
}
body div.banner.card-showcase > .left button:hover {
  --col: #000f;
}
body div.banner.card-showcase > .left button.left svg {
  rotate: 180deg;
}
body div.banner.card-showcase > .left button svg {
  --size: 2rem;
  --lighter: var(--col);
}
body div.banner.card-showcase > .right {
  width: 69%;
  gap: 2rem;
}
@media only screen and (max-width: 767px) {
  body div.banner.card-showcase > .right {
    width: 100%;
    padding-inline: 1.5rem;
    box-sizing: border-box;
  }
  body div.banner.card-showcase > .right > :not(.active) {
    display: none;
  }
}
body div.banner.card-showcase .card {
  background: hsla(var(--base-hue), 100%, 87%);
  padding: 1rem;
  border-radius: 1rem;
}
body div.banner.card-showcase .card img {
  margin-bottom: 1rem;
}
body div.banner.card-showcase .card:is(.active, :hover) {
  scale: 1.05;
  transition-timing-function: var(--default-animation-timing-function);
}

/*# sourceMappingURL=globals.css.map */