html, body {
        background-color:#222;
        color:white;
        font-family:'Sofia Sans Semi Condensed',sans-serif;
        margin:0px;
        padding:0px;
        height:100%;
        display:flex;
        flex-direction:column;
      }
      
      h1,h2,h3,h4 {
        font-family: 'Space Grotesk', sans-serif;
      }
      
      canvas {
        display: block;
      }
      
      .navbar {
        position:fixed;
        top:0px;
        width:100%;
        overflow:hidden;
        background-color:#1a1a1aee;
        border-style:none none solid;
        border-width:1px;
        border-image-slice:1;
        border-image-source:linear-gradient(to right, #6ff, #333, #333, #333, #6ff);
      }
      
      .navbar a.h1 {
        text-decoration:none;
        background-color:#1a1a1a00;
        text-align:center;
        padding:0px;
        margin:0px;
        font-size:32px;
      }
      
      .navbar a {
        color:white;
        text-decoration:none;
        background-color:#333;
        border-radius:10px;
        text-align:center;
        padding:14px 16px;
        margin:12px;
        font-size:20px;
      }
      
      .navbar a.left:hover {
        color:white;
        --anim1: #3bb;
      }
      
      .navbar a.left {
        float:left;
        background-image:linear-gradient(to right, var(--anim1), #333);
        transition: --anim1 0.25s;
      }
      
      .navbar a.right:hover {
        color:white;
        --anim1: #3bb;
        --anim2: #3bb;
      }
      
      .navbar a.right {
        float:right;
        background-image:linear-gradient(to left, var(--anim1), #333);
        transition: --anim1 0.25s, --anim2 0.25s;
      }
      
      #selected {
        background-image:linear-gradient(to left, var(--anim2), #188);
      }
      
      .navbar h1 {
        position:absolute;
        right:41%;
        left:41%;
        color:white;
        text-align:center;
      }
      
      .content {
        margin: 128px 150px 80px;
      }
      
      .content p {
        font-size:20px;
      }
      
      .content a {
        color:#3bb;
      }
      
      .content code {
        font-size:16px;
        font-family:'JetBrains Mono';
        border-style:inset;
        border-radius:8px;
        border-width:2px;
        border-color:#555;
      }
      
      .card {
        color:white;
        text-decoration:none;
        background-color:#333;
        border-radius:10px;
        padding:8px 24px;
        margin-bottom:24px;
      }
      
      .card2 {
        color:white;
        text-decoration:none;
        background-color:#444;
        border-radius:10px;
        padding:8px 24px;
        margin-bottom:24px;
        transition:background-color 0.25s;
      }
      .card2:hover {
        background-color:#4A4A4A;
      }
      
      
      @property --anim1 {
        syntax: '<color>';
        initial-value: #333;
        inherits: false;
      }
      
      @property --anim2 {
        syntax: '<color>';
        initial-value: #188;
        inherits: false;
      }
      
      button {
        background-color:#333;
        border:none;
        color:white;
        font-family:'Sofia Sans Semi Condensed';
        font-size:20px;
        padding:8px 16px;
        border-radius:10px;
        cursor:pointer;
        transition:background-color 0.25s;
      }
      
      button:hover {
        background-color:#188
      }
      
      input[type=text] {
        padding:4px 8px;
        margin:4px;
        background-color:#111;
        font-size:20px;
        font-family:'Sofia Sans Semi Condensed';
        border-radius:10px;
        border-style:solid;
        border-color:#181818;
        color:white;
        transition:border-color 0.25s, background-color 0.25s;
      }
      
      input[type=text]:focus{
        border-color:#333;
        background-color:#1C1C1C;
      }
      
      .v-fill {
        flex-grow:1;
      }
      
      .footer {
        background-color:#1a1a1a;
        bottom:0px;
        width:100%;
        border-style:solid none none;
        border-width:1px;
        border-image-slice:1;
        border-image-source:linear-gradient(to right, #6ff, #333, #333, #333, #6ff);
      }
      
      .footer table {
        padding:20px 100px;
      }
      
      .footer h1, p {
        margin:10px;
      }
      
      .footer p {
        font-size:20px;
      }
      
      .footer td {
        align-content:flex-start;
      }
      
      .footer a {
        color:#3bb;
      }