:root {
    --nav-height: 80px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Spicy Rice', cursive;
    text-shadow: 5px 5px 0px rgba(0, 0, 0, 1);

}

.text-stretch-shadow {
    text-shadow: 5px 5px 0px rgba(0, 0, 0, 1),
        4px 4px 0px rgba(0, 0, 0, 1),
        3px 3px 0px rgba(0, 0, 0, 1),
        2px 2px 0px rgba(0, 0, 0, 1),
        1px 1px 0px rgba(0, 0, 0, 1),
        0px 0px 0px rgba(0, 0, 0, 1);
}

.text-blur-shadow {
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 1),
        4px 4px 8px rgba(0, 0, 0, 1),
        3px 3px 6px rgba(0, 0, 0, 1),
        2px 2px 4px rgba(0, 0, 0, 1),
        1px 1px 2px rgba(0, 0, 0, 1),
        0px 0px 0px rgba(0, 0, 0, 1);
    font-style: italic;
    line-height: 1.2;
}


.glass-effect-bg {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    z-index: -1;
}

.sticky-wrapper {
    position: relative;
    height: 0;
    /* Takes no space but provides context */
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-padding-top: var(--nav-height);
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-snap-type: y mandatory;
    /* Ensures that the section does not overlap with the sticky nav */
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

header div {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
}

#header-texts {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    width: 100%;
}

#header-texts h1 {
    font-family: 'Spicy Rice', cursive;
    font-size: clamp(3rem, 10vw, 5rem);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    width: 100%;
    opacity: 0;
    margin: 0;
}

.headline {
    font-size: clamp(3rem, 10vw, 5rem);
    color: var(--color-text);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    opacity: 0;
    margin: 0;
}

#sprinkle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

nav {
    display: flex;
    justify-content: space-between;
    top: 0;
    height: var(--nav-height);
    width: 100vw;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.95);
    z-index: 1000;
}


nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 5px;
    background: linear-gradient(90deg, red, orange, yellow, green, rgb(0, 145, 255), rgb(149, 0, 255), violet, red);
    z-index: -1;
    background-size: 200% auto;
    animation: rainbowBar 5s linear infinite;
}

.hamburger-bar {
    transition: all 0.3s ease;
}

.bar1.transform {
    transform: rotate(45deg) translate(6px, 5px);
}

.bar2.transform {
    opacity: 0;
}

.bar3.transform {
    transform: rotate(-45deg) translate(6px, -5px);
}

.mobile-menu {
    height: calc(100vh - var(--nav-height));
}

@keyframes rainbowBar {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10%);
    }

    to {
        opacity: 1;
        transform: translateY(var(--nav-height));
    }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(var(--nav-height));
    }

    to {
        opacity: 0;
        transform: translateY(10%);
    }
}

.animate-slide-out {
    animation: slideOut 0.3s ease-in forwards;
}

.rainbow-border {
    border: 5px solid transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(white, white),
        linear-gradient(90deg, red, orange, yellow, green, rgb(0, 145, 255), rgb(149, 0, 255), violet, red);
    background-size: 100% 100%, 200% 100%;
    background-position: 0% 0%, 100% 0%;
    animation: rainbowBar 5s linear infinite;
    position: relative;
    overflow: hidden;
}

.rainbow-border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-image: linear-gradient(black, black), linear-gradient(90deg, red, orange, yellow, green, rgb(0, 145, 255), rgb(149, 0, 255), violet, red);
    filter: blur(5px);
    z-index: -1;
}

/* Polaroid Style */
.polaroid {
    background: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    text-align: center;
    margin: 20px auto;
    transform: rotate(-5deg);
    transition: transform 0.2s ease-in-out;
    width: 100%;
}

.polaroid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

.polaroid-caption {
    margin-top: 10px;
}

/* Flip card container */
.flip-card {
  perspective: 1000px;
}

/* Inner container that flips */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

/* Both front and back faces */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
}

/* Front face - no rotation needed */
.flip-card-front {
  /* No transform needed for front */
}

/* Back face - initially rotated */
.flip-card-back {
  transform: rotateY(180deg);
}

/* When flipped */
.rotate-y-180 {
  transform: rotateY(180deg);
}