html, body {
    background-color: black;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; 

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  canvas { 
    display: block; 
}
  .container {
    position: fixed;
    text-align: center;
    opacity: 0;
    animation: fadeIn 1.5s ease forwards;
  
    line-height: 5px;
    background-color: #2f2f2f5f;
    backdrop-filter: blur(25px);
    border-radius: 20px;
    padding: 10px 40px;
    box-shadow: 0 0 30px #000000ff;
    display: inline-block;
  }
  
  .container img {
    display: block;
    margin: 0 auto;
  }

  .buttons a {
    padding: 10px 10px;
    display: inline-block;
  }

  .link {
    position: relative;
    text-align: center;
    opacity: 1;
    transition: 0.25s;

    background-color: #ffffff00;
    padding: 5px 5px;
    border-radius: 20px;
  }

  .link img {
    width: 50px;
    transition: 0.25s;
  }

  .link:hover {
    background-color: #ffffff1f;
  }

  .link:active {
    background-color: #aa44ffff;
    transition: 0s;
    color: black;
  }
  
  @font-face {
    font-family: "JetBrains";
    src: url("jetbrains/JetBrainsMono-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

  @keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1;}
  }

  .credit {
    padding: 10px, -30px;
  }

  .credit p {
    font-family: "JetBrains";
    color: #ffffff4f;
    display: inline-block;
  }