/* Page */

:root,
* {
  font-family: "Overused Grotesk";

  --black: #191d22;
  --white: #f6f5ef;
  --white60: #f6f5ef99;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

body {
  background-color: var(--black);
  color: var(--white);

  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--white);
  color: var(--black);
}

::-webkit-scrollbar {
  display: none;
}

*:not(.hero-title, .hero-title *, body, header, .hero, :root) {
  animation: waitFade 3000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes waitFade {
  0%, 66% {
    opacity: 0;
  }
}

/* Header & Navigation */

header {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;

  padding: 2rem 8rem;
  height: 100vh;
  box-sizing: border-box;
}

nav {
  color: var(--white);

  margin: 0;
  padding: 1rem;

  border-radius: 999px;

  position: sticky;
  top: 2rem;

  transition:
    color 300ms ease,
    background-color 300ms ease,
    opacity 300ms ease;
}

.logo {
  display: flex;
  align-items: center;

  column-gap: 1rem;

  transition: column-gap 2000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.logo * {
  transition: width 300ms ease,
              filter 1000ms cubic-bezier(0.19, 1, 0.22, 1),
              scale 1000ms cubic-bezier(0.19, 1, 0.22, 1),
              opacity 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.logo svg {
  height: 3rem;
  width: 3rem;
  
  overflow: hidden;
}

.logo span {
  font-size: 1.8rem;
  font-weight: 600;

  overflow: hidden;
}

/* Hero Section */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  row-gap: 3rem;
  height: 100%;
}

.hero-title {
  width: 65%;

  font-size: 6rem;
  font-weight: 600;

  text-wrap: balance;
  text-align: center;

  line-height: 90%;

  color: var(--white60);

  margin: 2rem;

  animation: blur 1500ms cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes blur {
  0%, 50% {
    scale: 1.3;
    filter: blur(50px);
    opacity: 0;
  }
}

.hero-title .hero-title-accent {
  color: var(--white);
}

.hero-body {
  width: 65%;

  font-size: 1.5rem;
  font-weight: 350;

  text-align: center;
}

.hero-cta {
  background-color: transparent;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;

  font-size: 1.5rem;
  color: var(--white);

  font-weight: 600;
}

/* Footer */

footer {
  background-color: var(--white);
  color: var(--black);

  padding: 2rem 8rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  row-gap: 4rem;

  height: 100vh;
  box-sizing: border-box;
}

footer .tagline {
  font-size: 2rem;
  font-weight: 600;
}

footer .copyright {
  font-size: 1.2rem;
  font-weight: 350;
}

footer ::selection {
  background-color: var(--black);
  color: var(--white);
}