@import url('./animations.css');
@import url('./sections/header.css');
@import url('./sections/navigation.css');
@import url('./sections/hero.css');
@import url('./sections/side-by-side.css');
@import url('./sections/planetary-alignment.css');
@import url('./sections/triangle-funnel.css');

:root {
  --nav-size: 4rem;
}

html {
  background-color: var(--purple-750);
}

body {
  overflow-x: hidden;
}

section {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  min-height: 200vh;
  padding: 2rem;
  color: white;

  &.inset-shadow {
    box-shadow: 0 0 10vh rgba(0, 0, 0, 0.6);
  }
}

.super {
  font-size: 8vw;

  strong {
    display: block;
  }
}

.glow {
  animation-name: glow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-property: all;
}