/*###########*/
/* UNIVERSAL */
/*###########*/

/* mostly everything */
body {
  color: azure;
  background-color: rgb(14, 14, 14);
  font-family: "Funnel Sans", sans-serif;
  margin: 0; /* Important: Remove default body margin */
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  user-select: none;
}

img {
  pointer-events: none;
}

h1 {
  font-size: clamp(0px, 3.75rem, 20vw);
}

h2 {
  font-size: clamp(0px, 2.25rem, 15vw);
}

h3 {
  font-size: clamp(0px, 2rem, 10vw);
}

h5 {
  font-size: 1.25rem;/*clamp(0.5rem, 2vw, 2rem);*/
}

p {
  font-size: 1.25rem;
  text-align: center;
}

/* unvisited link */
a:link {
  color: aquamarine; 
}

/* visited link */
a:visited {
  color: aquamarine; 
}

/* mouse over link */
a:hover {
  color: paleturquoise; 
}

/* selected link / when clicked */
a:active {
  color: azure; 
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(24px);
}

.navbar nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;
  padding: 20px 50px;
}

.socials {
  margin-left: auto;
  text-decoration: none;
}

.social-icon {
  width: 20px;
  height: auto;
}

.navbar-title {
  width: auto;
  height: 20px;
}

nav a {
  text-decoration: none;
}

/*##################*/
/* END OF UNIVERSAL */
/*##################*/


/* Scroll Container: Gives us the vertical space to scroll */
.scroll-container {
  height: 100vh; /* how much you can scroll (nothing, scrapped the body) */
  position: relative;
  z-index: 1; /* main content */
}

/* finally works as intended */
#parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 150vh;
  overflow: hidden; 
  will-change: transform;
}

.parallax-svg-left {
  position: absolute;
  width: auto; 
  height: clamp(0px, 100vw, 90vh);
  top: calc(50vh);
  left: 0;
  z-index: -1;
}

.parallax-svg-right {
  position: absolute;
  width: auto; 
  height: clamp(0px, 100vw, 90vh);
  top: 0;
  right: 0;
  z-index: -2;
}

.hero-content {
  height: 100vh; /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0;
}

h1 {
  font-size: calc(clamp(1.5rem, 9vw, 6rem) / 1);
  margin: 0;
  margin-bottom: 0.5rem;
}

.hero-content h3 {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.title img {
  height: calc(clamp(1.5rem, 9vw, 6rem) / 1);
}