@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 {
    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);
}

.hero{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  mix-blend-mode:exclusion;
  pointer-events: none;
  z-index:1 ;
}

.marquee{
  width: 100vw;
  height: 100vh;
  overflow: hidden;          /* important */
}

.track{
  display: flex;
  width: max-content;        /* track grows to fit its children */
  height: 100%;
  animation: marquee-scroll 20s linear infinite;
  will-change: transform;
}

.group{
  display: flex;
  align-items: center;
  height: 100%;
  gap: 16vw;                 /* use viewport units if you want “percentage-like” spacing */
  flex-shrink: 0;  
  padding-left: 16vw;          /* prevent shrinking */
}

.divided{
  height: 90%;
  width: 10px;
  flex-shrink: 0;
  animation: rainbow-bg 2.5s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* -50% of the track = one group width, because there are 2 groups */
}

@keyframes rainbow-bg{
		100%,0%{
			background-color: rgb(255,0,0);
		}
		8%{
			background-color: rgb(255,127,0);
		}
		16%{
			background-color: rgb(255,255,0);
		}
		25%{
			background-color: rgb(127,255,0);
		}
		33%{
			background-color: rgb(0,255,0);
		}
		41%{
			background-color: rgb(0,255,127);
		}
		50%{
			background-color: rgb(0,255,255);
		}
		58%{
			background-color: rgb(0,127,255);
		}
		66%{
			background-color: rgb(0,0,255);
		}
		75%{
			background-color: rgb(127,0,255);
		}
		83%{
			background-color: rgb(255,0,255);
		}
		91%{
			background-color: rgb(255,0,127);
		}
}

.lensPlayground{
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    mix-blend-mode: exclusion;
    pointer-events: none;

}

.theLens{
    position: absolute;
    height: 23%;
    width: 20%;
    z-index: 9;
    background-color: #f1f1f1;
    animation: rainbow-bg 2.5s linear infinite;
    cursor: move;
    pointer-events: all;
}

.contentOne{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    justify-items: center;
    column-gap: 2%;
}

.leftSide{
    text-align: center;
    align-items: center;
    align-content: center;
    height: 100vh;
}

.leftSide h1:first-child{
    color: rgb(232, 232, 232);
}

.rightSide{
    padding: 20px;
}

.rightSide p{
    color: rgb(232, 232, 232);
}

.contentTwo{
    display: grid;
    height: 100vh;
    background-color: aqua;
    grid-template-columns: 1fr 6fr 1fr;
}

.aVoice{
    display: flex;
    align-items: center;
    border: solid black;
}
.modalDialog{
    border: 0 white;
}


.context{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100vh ;



}

.context img{
    width: 80%;
    object-fit: scale-down;
}

.context a{
    color: rgb(232, 232, 232);

}