body {
  margin: 0;
  padding: 0;
  background-color: #1d1d1d;
}

#canvas,
#canvas-mobile {
  z-index: -1;
  position: absolute;
  height: 100%;
  width: 100%;
}

noscript {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  p {
    font-size: 1.5rem;
    color: #f5f5f5;
  }
}

#canvas {
  display: block;
}

#canvas-mobile {
  display: none;
}

.top-left-content {
  z-index: -1;
  position: absolute;
  top: 1rem;
  left: 2rem;

  h1,
  h2 {
    font-family: monospace;
    font-size: 1.5rem;
    color: #f5f5f5;
  }
}

#linkedin-button,
#github-button {
  z-index: 10;
  position: absolute;
  top: 3rem;
  right: 2rem;

  color: #fff;

  img {
    padding-right: 0.5rem;
  }

  a {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-family: "Helvetica Neue";
    background: #0e76a8;

    p {
      padding: 0;
      margin: 0;
    }
  }

  a:link,
  a:visited {
    color: #fff;
  }

  a:active,
  a:hover {
    background: #084461;
    color: #fff;
  }
}

#github-button {
  top: 7rem;

  a {
    background: #0d1117;
  }

  a:active,
  a:hover {
    background: #000;
    color: #fff;
  }
}

@media (max-width: 1299px) {
  #canvas {
    display: none;
  }

  #canvas-mobile {
    display: block;
  }

  #linkedin-button,
  #github-button {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.2rem;

    img {
      padding-right: 0;
    }

    a {
      p {
        display: none;
      }
    }
  }

  #github-button {
    top: 4rem;
  }

  .top-left-content {
    top: 0.5rem;
    left: 0.5rem;

    h1,
    h2 {
      font-size: 0.8rem;
      color: #ffffff88;
    }
  }
}