@import url("https://fonts.googleapis.com/css2?family=BioRhyme:wght@200..800&family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&family=Great+Vibes&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yellowtail&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100vh;
  background: #0a0119;
}

.page1 {
  position: relative;
  color: white;
  overflow: hidden;
}

nav {
  height: 5rem;
  padding: 2rem 3rem 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  text-decoration: none;
  color: white;
}

nav h1 {
  font-size: 2rem;
  font-family: "Yellowtail", cursive;
  font-weight: 400;
}

.navigation {
  position: relative;
  display: flex;
  gap: 2rem;
  z-index: 1;
}

.navigation a {
  font-size: 1.2rem;
  text-transform: uppercase;
}

.main {
  height: calc(100vh - 5rem);
  display: flex;
}

.main .left {
  width: 60%;
  padding: 2rem 4rem 2rem 4rem;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 1rem;
}

.main .left h1 {
  font-size: 4rem;
  font-weight: 500;
}

.main .left p {
  width: 80%;
  font-size: 0.9rem;
  color: gray;
  mix-blend-mode: exclusion;
}

.btu {
  position: relative;
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  z-index: 1;
}

#contact,
#started {
  position: relative;
  width: 12rem;
  padding: 1rem 2rem 1rem 2rem;
  font-size: 1.3rem;
  border-radius: 30px;
  background: white;
  color: #0b021c;
  cursor: pointer;
  overflow: hidden;
  transition: 0.75s;
  border: 2px solid white;
  z-index: 2;
}

#started {
  background: transparent;
  color: white;
}

#started::before,
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  clip-path: circle(0% at 50% 50%);
  transition: 0.75s;
  z-index: -1;
}

#started:hover::before,
#contact:hover::before {
  clip-path: circle(100% at 50% 50%);
}

#started:hover {
  color: #0b021c;
}

#contact::before {
  background: #3e108a;
  filter: blur(2px);
}

#contact:hover {
  color: white;
}

.page1::before {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: #8665e4;
  filter: blur(100px);
}

.page1::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: #8665e4;
  filter: blur(500px);
}

.main .right {
  position: relative;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#threeD {
  position: absolute;
  width: 150%;
  height: 100%;
  bottom: -10%;
  right: -15%;
  transform: scale(60%);
}