@font-face {
  font-family: 'F1-regular';
  src: url('../fonts/Formula1-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'F1-black';
  src: url('../fonts/Formula1-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'F1-bold';
  src: url('../fonts/Formula1-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'F1-wide';
  src: url('../fonts/Formula1-Wide.ttf') format('truetype');
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: "F1-regular", sans-serif;
  overflow-x: hidden;
}
.intro{
  height: 100vh;
}
.video-container {
  position: relative;
}
.intro video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.intro h1{
  position: absolute;
  top: 20%;
  left: 50%;
  color: #fff;
  font-size: 60px;
  transform: translate(-50%, -50%);
  padding:20px 100px 20px 100px;
  border-radius: 20px;
  font-family: "F1-bold" ;

}
.intro a{
  position: absolute;
  background-image: linear-gradient(144deg,#AF40FF, #150775 50%,#7b0505);
  padding:10px 20px;
  border-radius: 5px;
  color:white;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section1{
  height: 20vh;
  color: black;
}
.section1 h1{
  padding-top: 35px;
  text-align: center;
  font-size: 60px;
}
.section2{
  height: 100vh;
  color: white;
  background-color: black;
   
}
.section2 h1{
  padding-top: 30px;
  text-align: center;
  font-size: 60px;
  margin-bottom:30px;
}



.parallaxParent {
  height: 120vh;
  position: relative;
  overflow: hidden;
}
.parallaxParent > * {
  height: 200%;
  position: relative;
  top: -100%;
}
<<<<<<< HEAD


/* From Uiverse.io by vnuny */ 
.item-hints {
  --purple: #720c8f;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  padding-right: 170px;
}
.item-hints .hint {
  margin: 150px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-hints .hint-dot {
  z-index: 3;
  border: 1px solid #ffe4e4;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-transform: translate(-0%, -0%) scale(0.95);
  transform: translate(-0%, -0%) scale(0.95);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.item-hints .hint-radius {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -125px 0 0 -125px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.item-hints .hint[data-position="1"] .hint-content {
  top: 85px;
  left: 50%;
  margin-left: 56px;
}
.item-hints .hint-content {
  width: 300px;
  position: absolute;
  z-index: 5;
  padding: 35px 0;
  opacity: 0;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  color: #fff;
  visibility: hidden;
  pointer-events: none;
}
.item-hints .hint:hover .hint-content {
  position: absolute;
  z-index: 5;
  padding: 35px 0;
  opacity: 1;
  -webkit-transition: opacity 0.7s ease, visibility 0.7s ease;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  color: #fff;
  visibility: visible;
  pointer-events: none;
}
.item-hints .hint-content::before {
  width: 0px;
  bottom: 29px;
  left: 0;
  content: "";
  background-color: #fff;
  height: 1px;
  position: absolute;
  transition: width 0.4s;
}
.item-hints .hint:hover .hint-content::before {
  width: 180px;
  transition: width 0.4s;
}
.item-hints .hint-content::after {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
  bottom: 29px;
  left: 0;
  width: 80px;
  content: "";
  background-color: #fff;
  height: 1px;
  position: absolute;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.item-hints .hint:hover .hint-content::after {
  opacity: 1;
  visibility: visible;
}
.item-hints .hint[data-position="4"] .hint-content {
  bottom: 85px;
  left: 50%;
  margin-left: 56px;
}

.topnav {
  height: 10vh;
  background-color: #333;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  padding-right:120px;
} 
.button {
  --black-700: hsla(0 0% 12% / 1);
  --border_radius: 9999px;
  --transtion: 0.3s ease-in-out;
  --offset: 2px;
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;

  transform-origin: center;

  padding: 1rem 2rem;
  background-color: transparent;

  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active, 0) * 0.1)));

  transition: transform var(--transtion);
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;
  background-color: var(--black-700);

  border-radius: var(--border_radius);
  box-shadow: inset 0 0.5px hsl(0, 0%, 100%), inset 0 -1px 2px 0 hsl(0, 0%, 0%),
    0px 4px 10px -4px hsla(0 0% 0% / calc(1 - var(--active, 0))),
    0 0 0 calc(var(--active, 0) * 0.375rem) hsla(230, 32%, 15%, 0.75);

  transition: all var(--transtion);
  z-index: 0;
}

.button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;
  background-color: hsl(0, 94%, 41%);
  background-image: radial-gradient(
      at 51% 89%,
      rgb(219, 159, 159) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, rgb(190, 116, 116) 0px, transparent 50%),
    radial-gradient(at 22% 91%, rgb(190, 116, 116) 0px, transparent 50%);
  background-position: top;

  opacity: var(--active, 0);
  border-radius: var(--border_radius);
  transition: opacity var(--transtion);
  z-index: 2;
}

.button:is(:hover, :focus-visible) {
  --active: 1;
}
.button:active {
  transform: scale(1);
}

.button .dots_border {
  --size_border: calc(100% + 2px);

  overflow: hidden;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: var(--size_border);
  height: var(--size_border);
  background-color: transparent;

  border-radius: var(--border_radius);
  z-index: -10;
}

.button .dots_border::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left;
  transform: rotate(0deg);

  width: 100%;
  height: 2rem;
  background-color: white;

  mask: linear-gradient(transparent 0%, white 120%);
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes path {
  0%,
  34%,
  71%,
  100% {
    transform: scale(1);
  }
  17% {
    transform: scale(var(--scale_path_1, 1));
  }
  49% {
    transform: scale(var(--scale_path_2, 1));
  }
  83% {
    transform: scale(var(--scale_path_3, 1));
  }
}

.button .text_button {
  position: relative;
  z-index: 10;

  background-image: linear-gradient(
    90deg,
    hsla(0 0% 100% / 1) 0%,
    hsla(0 0% 100% / var(--active, 0)) 120%
  );
  background-clip: text;

  font-size: 1rem;
  color: transparent;
}


.team-wrapper{
  position: absolute;
  width:100vw;
  height: 120vh;
  z-index:1;
  display: flex;
  align-items: center;
}
.text-wrapper{
  position: absolute;
  width:100%;
  height: 120vh;
  background-color: black;
  z-index:1;
  opacity: 0.9;
  padding:100px;
  
}
.text-wrapper h1{
  font-family: F1-bold;
  color:white;
}
.text-wrapper p{
  font-family: F1-regular;
  color:grey;
}
.text-wrapper h3{
  color:white;
}
.text-wrapper span{
  background: linear-gradient(to right ,#E10600, #FFFFFF);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 30px;
  transition: background 1s ease;
}
.text-wrapper span:hover{
  background: linear-gradient(to right , #FFFFFF,#E10600);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

}

.race-stripe-container {
  position: relative;
  overflow: hidden;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

.race-image {
  width: 800px;
  height: 100%;
  object-fit: cover;
}
.pit-wrapper {
  width: 100%;
  height: 80%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap:100px;
}

.pit-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/images/f1_photos/pit_crew.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3; 
  z-index: 1; 
}

.pit-wrapper > * {
  position: relative;
  z-index: 2;
}


.crew-mem{
  width:200px;
  border-radius: 10px;
  background-color: black;
  opacity: 0.8;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* From Uiverse.io by CYBWEBALI */ 
.git-tag {
  margin-top: 20px;
  display: grid;
  place-items: center;
  background: #e3edf7;
  padding: 1.4em;
  border-radius: 10px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
	      -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0);
  cursor: pointer;
  transition: transform 0.5s;
}

.git-tag:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
	      inset -4px -4px 6px -1px rgba(255,255,255,0.7),
	      -0.5px -0.5px 0px rgba(255,255,255,1),
	      0.5px 0.5px 0px rgba(0,0,0,0.15),
	      0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  transform: translateY(0.5em);
}

.git-tag svg {
  transition: transform 0.5s;
}

.git-tag:hover svg {
  transform: scale(0.9);
  fill: #333333;
}