*, *:before, *:after {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    padding: 0;
  }
  
  html {
    letter-spacing: 0.025em;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.55;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  }
  
  body {
    background-color: #000;
  /*   height: 100%; */
  }
  
  
  #hello {
    position: relative;
    height: 100%;
    width: 100%;
    background: #000;
  }
  
  #hello:before {
    display: block;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: conic-gradient(blue, magenta, red, yellow, lime, aqua, blue);
  /*   mix-blend-mode: overlay; */
    mix-blend-mode: multiply;
    filter: brightness(2);
    z-index: 2;
  }
  
  .canvas-container:empty {
    height: 100vh;
    background: linear-gradient(to bottom, #020111 10%, #3b305d 100%);
  }

  .canvas-container canvas {
    position: relative;
    z-index: 1;
  }
  
  h1 {
    color: #fff;
    font-size: 8rem;
    margin: 0;
    line-height: 0.8;
    font-style: italic;
    letter-spacing: -0.035em;
    font-weight: 700;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 6rem;
    }
  }
  
  @media screen and (max-width: 480px) {
    h1 {
      font-size: 4.5rem;
    }
  }
  
  h1 small {
    display: block;
    margin-top: 0.5em;
  /*   font-family: "Museo Sans"; */
    text-transform: uppercase;
    font-style: normal;
    letter-spacing: 0.35em;
    font-size: 0.175em;
    text-align: right;
    font-weight: 200;
    transform: translateX(-0.175em);
  }
  
  h1 small span {
    color: rgb(130, 117, 167);
    font-weight: 400;
  }
  
  p {
    font-weight: 300;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #887f9c;
  }
  
  p:last-child {
    margin-bottom: 0;
  }
  
  a {
    text-decoration: none;
    color: #5a356d;
    font-weight: 400;
  }
  
  a:hover {
    animation: colorSpin 1.75s infinite;
  }
  
  .lead {
    color: #3a3353;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.1;
    margin-top: 0;
    letter-spacing: -0.005em
  }
  
  canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  
  .container {
    margin: 0 auto;
    max-width: 55rem;
  }
  
  .text-container {
    margin: 0 auto;
    max-width: 33rem;
    padding: 4rem 1.5rem;
  }
  
  #about, #connect {
    background-color: #fff;
  }
  
  #connect {
  /*   padding-bottom: 6rem; */
  }
  
  #connect .text-container {
    padding-top: 0;
  }
  
  .social-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .social-links li {
    display: inline-block;
  }
  
  .social-links li a {
    font-size: 1.25rem;
    padding: 0 0.25rem;
  }
  
  /* .social-links li a:hover {
    animation: colorSpin 2s infinite;
  } */
  
  .copyright {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.5;
  }
  
  .text-center {
    text-align: center;
  }
  
  @keyframes colorSpin {
    
    0%, 100% {
      color: #5a356d;
    }
    
    25% {
      color: #7F9CF5;
    }
    
    50% {
      color: #F56565;
    }
    
    75% {
      color: #9F7AEA;
    }
    
  }