:root {
  --animation_duration: 0.5s;
  --default_spacer: 20px;
  --highlight_color: #ff8000;
  --highlight_color_alt: #ff0;
  --link_color: #c34b1b;
  --muted_color: #584848;
  --muted_color_alt: #473737;
  --sidebar_width: 200px;
}

* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
}

body.fu-bio {
  align-items: center;
  background-color: #000;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  position: relative;
  width: 100%;

  .main-content {
    backdrop-filter: blur(10px);
    background-color: rgb(255 128 0 / 10%);
    border-radius: 10px;
  }

  .hero {
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin: var(--default_spacer) 40px;

    .hero-info {
      padding-right: 40px;
    }

    h1 {
      font-size: 60px;
    }

    h2 {
      /* animation: fuGradientText 20s linear infinite; */
      background: linear-gradient(
        to right,
        var(--highlight_color_alt),
        var(--highlight_color),
        var(--link_color),
        var(--muted_color),
        var(--link_color),
        var(--highlight_color),
        var(--highlight_color_alt)
      );
      background-size: 200%;
      background-clip: text;
      font-size: 30px;
      text-transform: uppercase;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    p {
      margin-bottom: var(--default_spacer);
      margin-top: 8px;
      max-width: 750px;
    }
  }

  .image-container {
    animation: pulse 3s ease-in-out infinite alternate;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--highlight_color);
    display: flex;
    height: 240px;
    justify-content: center;
    min-width: 240px;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    width: 240px;
  }

  canvas {
    display: block;
    position: absolute;
    z-index: -1;
  }
}

@keyframes fuGradientText {
  to {
    background-position: 200%;
  }
}

@keyframes pulse {
  from {
    box-shadow: 0 0 15px var(--highlight_color);
  }
  to {
    box-shadow: 0 0 35px var(--highlight_color);
  }
}