:root{
    --background-body: #202b38;
    --background: #161f27;
    --background-alt: #1a242f;
    --selection: #1c76c5;
    --text-main: #dbdbdb;
    --text-bright: #cf9999;
    --text-muted: #a9b1ba;
    --links: #41adff;
    --focus: #0096bfab;
    --border: #526980;
    --code: #ffbe85;
    --animation-duration: 0.1s;
    --button-base: #0c151c;
    --button-hover: #040a0f;
    --scrollbar-thumb: var(--button-hover);
    --scrollbar-thumb-hover: rgb(0, 0, 0);
    --form-placeholder: #a9a9a9;
    --form-text: #fff;
    --variable: #d941e2;
    --highlight: #efdb43;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
  }

html {
    scrollbar-color: var(--scrollbar-thumb) var(--background-body);
    scrollbar-width: thin;
}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    line-height: 1.4;
    margin: 20px auto;
    padding: 0 10px;
    word-wrap: break-word;
    color: var(--text-main);
    background: var(--background-body);
    text-rendering: optimizeLegibility;
    margin-top: 20px;
}

button {
    transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease;
}
input {
    transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease;
}

textarea {
    transition:
    background-color var(--animation-duration) linear,
    border-color var(--animation-duration) linear,
    color var(--animation-duration) linear,
    box-shadow var(--animation-duration) linear,
    transform var(--animation-duration) ease;
}

h1 {
    font-size: 2.2em;
    margin-top: 0;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 12px;
    margin-top: 24px;
  }
  
  h1 {
    color: var(--text-bright);
    }
      
  h2 {
    color: var(--text-bright);
    }
      
  h3 {
    color: var(--text-bright);
    }
      
  h4 {
    color: var(--text-bright);
    }
      
  h5 {
    color: var(--text-bright);
    }
      
  h6 {
    color: var(--text-bright);
    }

    strong {
        color: var(--text-bright);
    }

    a {
      color: var(--links);
      text-decoration: underline;
      text-underline-position: auto;
    }

    .description {
      font-size: 0.8em;  /* Smaller font */
      color: gray;       /* Optional color */
      font-style: italic; /* Optional styling */
  }


  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--background-alt);
    padding: 10px;
    height: 80px;
  }


header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* Adjust height */
  background: var(--background-alt);
  z-index: 1000;

}


body {
  padding-top: 80px;
}

main {
  padding-bottom: 80px;
  margin-top: 80px; /* Match your header height */
  padding-top: 20px; /* Optional */
}