@font-face {
    font-family: 'DepartureMono';
    src: url('assets/fonts/DepartureMono-Regular.woff2') format('woff2'),
         url('assets/fonts/DepartureMono-Regular.woff') format('woff');
}


body{
    margin: 0;
    background-color: rgb(233, 233, 233);
    z-index: 0;
    position: relative;
}

h1 {
    text-align: center;
    font-family: "Jacquard 12", system-ui;
    font-weight: 400;
    font-style: normal;
    color: rgb(255, 83, 221);
    font-size: 50pt;
    margin: 0;
    cursor:default;
}

h2 {
    font-family: "DepartureMono";
    font-weight: 500;
    color: rgb(255, 83, 221);
}

p, div{
    font-family: "DepartureMono";
    font-weight: 500;
    font-size: clamp(8pt, 2vmin, 16pt);
    
}

button {
    border: 0;
    font-family: "DepartureMono";
    font-weight: 500;

}



a {
    font-family: "DepartureMono", sans-serif;
    font-weight: 400;
    color: black;
    font-size: small;
}

a:hover{
    color: white;
    background-color:rgb(255, 83, 221);
    border-color: rgb(255, 83, 221);
}

.parallax-extender{
    display: block;
    position: relative;
    height: 400vh;
    background-color: rgb(255, 197, 208);
    background-image: linear-gradient(to bottom,rgb(255, 136, 231),rgb(9, 105, 9) );
   
}

.parallax{
    display: grid;
    place-items: center;
    justify-items: center;
    height: 25%;
    
   
}

.parallax > * {
    grid-template-areas: 'stack';
}

.stacker {
    display: grid;
    grid-template-areas: 'stack';


}

.background-img {
    position: absolute;
    max-width: 100%;
    height: 150vh;
    object-fit: cover;
    z-index: 0;

}




@media(max-width:800px){
    .background-img:first-child {
    max-width: 100%;
    height: 100vh;
    object-fit: cover;
}

}

.background-header,
.container-container {
    grid-area: 1/1;
}

.background-header {
    position:relative;    
    z-index: 2;
    mix-blend-mode:exclusion;
    text-align: center;
    pointer-events: none;   /* optional: prevents blocking the scroller */
}

.background-header h1{
    font-size: clamp(12rem, 20vw, 400px);
color: rgb(255, 83, 221);
    white-space: nowrap;
}
@media(min-width:100em){
    .background-header h1{
        font-size: clamp(15rem, 20vw, 600px);
    }
}

@media(max-width:57em) {
    .background-header h1{
    white-space:inherit;
    font-size: clamp(13rem, 20vw, 500px);

    }
}

@media(max-width:50em) {
    .background-header h1{
    font-size: clamp(11rem, 20vw, 400px);

    }
}

@media(max-width:30em) {
    .background-header h1{
    font-size: clamp(9rem, 20vw, 150px);
    
    }
}

@media(max-height:30em){
    .background-header h1, .container-container{
        transform: scale(80%)
    }
    .container-container{
        transform: translateY(-90%);
    }

}




@keyframes colorChange{
    0% {color: rgb(255, 83, 221);}
    25% {color: rgb(89, 77, 255);}
    50% {color : rgb(9, 105, 9);}
    75% {color: rgb(105, 20, 9);}
    100%{color: rgb(255, 83, 221);}
}


.container-container{
    z-index: 0;
    width: 100%;
    height: auto;
    display: grid;
    justify-content: center;
    align-items: center;
    
}


@media(max-width:30em){
    .container-container{
    transform:translateY(-180%)
    }
}


.scroll-container {
    overflow: hidden;
    width: 75.5%;
    margin: 0 auto;
    background: white;
    border: 1px solid black;
    position: relative;
}

/* The track now scrolls endlessly using fixed 50% translate */
.scroll-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
    will-change: transform;
}

/* Each strip of text */
.scrolling-text {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4em;
    padding-right: 4em;
    white-space: nowrap;
}

.scroll-card {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* SAFARI-safe marquee */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.parallax-background,
.background-header,
.container-container {
    will-change: transform;
}

.intermission,
.filler-test {
    position: relative;
}


.intermission {
    display: grid;
    justify-items: center;
    height: 100vh;
    background-color: aqua;
    padding: 2%;
    z-index:1 ;

}
.intermission img{
    width: 20%;
}


.filler-test{
    height: 100vh;
    background-color: antiquewhite;
    z-index: 3;
}

.starcrest {
  display: flex;
  align-items: center;
  align-self: center;
  align-content: center;
  flex-direction:row;
  height: 300px;
  width: 300px;
  background: #000000;
  mask: radial-gradient(#0000 71%, #000 0%) 10000% 10000%/99.5% 99.5%;

  /* if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
}

.icon {
height: 50px;
background-color: #FFFFFF;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M4 0h1v1H4zM5 0h1v1H5zM6 0h1v1H6zM7 0h1v1H7zM8 0h1v1H8zM9 0h1v1H9zM10 0h1v1h-1zM11 0h1v1h-1zM12 0h1v1h-1zM13 0h1v1h-1zM14 0h1v1h-1zM15 0h1v1h-1zM16 0h1v1h-1zM17 0h1v1h-1zM2 1h1v1H2zM3 1h1v1H3zM4 1h1v1H4zM5 1h1v1H5zM6 1h1v1H6zM7 1h1v1H7zM8 1h1v1H8zM9 1h1v1H9zM10 1h1v1h-1zM11 1h1v1h-1zM12 1h1v1h-1zM13 1h1v1h-1zM14 1h1v1h-1zM15 1h1v1h-1zM16 1h1v1h-1zM17 1h1v1h-1zM18 1h1v1h-1zM19 1h1v1h-1zM1 2h1v1H1zM2 2h1v1H2zM3 2h1v1H3zM18 2h1v1h-1zM19 2h1v1h-1zM20 2h1v1h-1zM1 3h1v1H1zM2 3h1v1H2zM19 3h1v1h-1zM20 3h1v1h-1zM0 4h1v1H0zM1 4h1v1H1zM16 4h1v1h-1zM20 4h1v1h-1zM21 4h1v1h-1zM0 5h1v1H0zM1 5h1v1H1zM10 5h1v1h-1zM11 5h1v1h-1zM15 5h1v1h-1zM16 5h1v1h-1zM17 5h1v1h-1zM20 5h1v1h-1zM21 5h1v1h-1zM0 6h1v1H0zM1 6h1v1H1zM8 6h1v1H8zM9 6h1v1H9zM10 6h1v1h-1zM11 6h1v1h-1zM12 6h1v1h-1zM13 6h1v1h-1zM16 6h1v1h-1zM20 6h1v1h-1zM21 6h1v1h-1zM0 7h1v1H0zM1 7h1v1H1zM7 7h1v1H7zM8 7h1v1H8zM9 7h1v1H9zM12 7h1v1h-1zM13 7h1v1h-1zM14 7h1v1h-1zM20 7h1v1h-1zM21 7h1v1h-1zM0 8h1v1H0zM1 8h1v1H1zM6 8h1v1H6zM7 8h1v1H7zM14 8h1v1h-1zM15 8h1v1h-1zM20 8h1v1h-1zM21 8h1v1h-1zM0 9h1v1H0zM1 9h1v1H1zM6 9h1v1H6zM7 9h1v1H7zM14 9h1v1h-1zM15 9h1v1h-1zM20 9h1v1h-1zM21 9h1v1h-1zM0 10h1v1H0zM1 10h1v1H1zM5 10h1v1H5zM6 10h1v1H6zM15 10h1v1h-1zM16 10h1v1h-1zM20 10h1v1h-1zM21 10h1v1h-1zM0 11h1v1H0zM1 11h1v1H1zM5 11h1v1H5zM6 11h1v1H6zM15 11h1v1h-1zM16 11h1v1h-1zM20 11h1v1h-1zM21 11h1v1h-1zM0 12h1v1H0zM1 12h1v1H1zM6 12h1v1H6zM7 12h1v1H7zM14 12h1v1h-1zM15 12h1v1h-1zM20 12h1v1h-1zM21 12h1v1h-1zM0 13h1v1H0zM1 13h1v1H1zM6 13h1v1H6zM7 13h1v1H7zM14 13h1v1h-1zM15 13h1v1h-1zM20 13h1v1h-1zM21 13h1v1h-1zM0 14h1v1H0zM1 14h1v1H1zM7 14h1v1H7zM8 14h1v1H8zM9 14h1v1H9zM12 14h1v1h-1zM13 14h1v1h-1zM14 14h1v1h-1zM20 14h1v1h-1zM21 14h1v1h-1zM0 15h1v1H0zM1 15h1v1H1zM8 15h1v1H8zM9 15h1v1H9zM10 15h1v1h-1zM11 15h1v1h-1zM12 15h1v1h-1zM13 15h1v1h-1zM20 15h1v1h-1zM21 15h1v1h-1zM0 16h1v1H0zM1 16h1v1H1zM10 16h1v1h-1zM11 16h1v1h-1zM20 16h1v1h-1zM21 16h1v1h-1zM0 17h1v1H0zM1 17h1v1H1zM20 17h1v1h-1zM21 17h1v1h-1zM1 18h1v1H1zM2 18h1v1H2zM19 18h1v1h-1zM20 18h1v1h-1zM1 19h1v1H1zM2 19h1v1H2zM3 19h1v1H3zM18 19h1v1h-1zM19 19h1v1h-1zM20 19h1v1h-1zM2 20h1v1H2zM3 20h1v1H3zM4 20h1v1H4zM5 20h1v1H5zM6 20h1v1H6zM7 20h1v1H7zM8 20h1v1H8zM9 20h1v1H9zM10 20h1v1h-1zM11 20h1v1h-1zM12 20h1v1h-1zM13 20h1v1h-1zM14 20h1v1h-1zM15 20h1v1h-1zM16 20h1v1h-1zM17 20h1v1h-1zM18 20h1v1h-1zM19 20h1v1h-1zM4 21h1v1H4zM5 21h1v1H5zM6 21h1v1H6zM7 21h1v1H7zM8 21h1v1H8zM9 21h1v1H9zM10 21h1v1h-1zM11 21h1v1h-1zM12 21h1v1h-1zM13 21h1v1h-1zM14 21h1v1h-1zM15 21h1v1h-1zM16 21h1v1h-1zM17 21h1v1h-1z" shape-rendering="crispEdges" style="fill:%23000;opacity:255"/></svg>');
/* background-attachment: fixed | scroll; */
 background-size: auto;
background-position: center;
background-repeat: no-repeat;
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}