@font-face {
  font-family: 'Providence Sans';
  src: url('../../assets/font/Providence%20Sans%20Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --primary-font: 'Satoshi', sans-serif;
  --heading-font: 'Providence Sans', cursive;
  --text-color: #ffffff;
  --btn-dark: #0f2c41;
  --btn-dark-hover: #163e5b;
}

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

html {
  min-height: 100dvh;
  max-width: 100vw;
  overflow-x: clip;
}

/* Globally scale down the UI by 15% on mobile phones (like iPhone) */
@media (max-width: 600px) {
  html {
    font-size: 85%;
  }
}

body {
  font-family: var(--primary-font);
  color: var(--text-color);
  background-color: #0b141d;
  overflow-x: clip; /* Prevent horizontal scroll that breaks viewport scaling without breaking sticky */
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Background Video */
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #2a3b4c;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    120% 120% at 85% 15%,
    transparent 0%,
    rgba(3, 14, 23, 0.1) 25%,
    rgba(3, 14, 23, 0.7) 60%,
    #030e17 90%
  );
  z-index: 1;
  pointer-events: none;
}