:root {
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-primary: #40C8E0;
  --bs-primary-rgb: 64, 200, 224;
}

body {
  background: linear-gradient(rgb(0, 6, 10) 0px, rgb(0, 19, 31) 960px);
}

/* Override Bootstrap Colors */
.btn-primary {
  --bs-btn-bg: #40C8E0;
  --bs-btn-border-color: #40C8E0;
  --bs-btn-hover-bg: #20ADC6;
  --bs-btn-hover-border-color: #20ADC6;
  --bs-btn-active-bg: #40C8E0;
  --bs-btn-active-border-color: #40C8E0;
}

#navigation {
  font-size: 18px;
}

#navigation .app-icon {
  border-radius: 25%;
}

.font-rounded {
  font-family: "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.underline-highlighted {
  background: linear-gradient(180deg,rgba(255,255,255,0) 85%, #40C8E0 85%);
}

.cookie-banner {
  background-color: #000E17;
  border-top: 1px solid #00080C;
}

.promotion-container {
  max-width: 375px;
  aspect-ratio: 1350/2760;
  /* aspect ratio of the overlay frame */
  animation: 1s ease-out 0s 1 rotateRight forwards;
}

.promotion-video-container {
  position: absolute;
  top: 2%;
  left: 5%;
  width: 90%;
  height: 96%;

  background: #000;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  border-radius: 8%;
}

.promotion-frame-underlay {
  animation: 1s ease-out 0s 1 rotateLeft forwards;
  position: absolute;
  top: 0;
  left: 0;
  width: 94%;
  height: 94%;

  filter: blur(1px);

  background-image: url("../images/MaskMate_iPhone_16_Pro-White-Titanium_Portrait_Background.png");
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.promotion-frame-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("../images/MaskMate_iPhone_16_Pro-White-Titanium_Portrait.png");
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes rotateRight {
  0% {
    transform: rotate(0deg);
    top: 50px;
    opacity: 0;
  }

  100% {
    transform: rotate(4deg);
    top: 0px;
    opacity: 1.0;
  }
}

@keyframes rotateLeft {
  0% {
    transform: rotate(0deg);
    left: 0px;
    top: 50px;
    opacity: 0;
  }

  100% {
    transform: rotate(-10deg);
    left: -40px;
    top: 0px;
    opacity: 0.5;
  }
}