.roboto-mono-paragraph {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.fira-code-headings {
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html,body {
    margin: 0;
    padding: 10px;
    height: 100%;
    font-family: "Roboto Mono", monospace;
    scroll-behavior: smooth;
}

h1, h2 {margin-top: 10px;}

body {
    background: radial-gradient(1200px 600px at 50% -200px, #1f2937, #020617);
    color: #e5e7eb;
}

.themelist {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 28px;
    height: 56px;
    width: fit-content;

    background:linear-gradient(180deg,rgba(30, 41, 59, 0.85),rgba(15, 23, 42, 0.85));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.themelist a {
    color: #e5e7eb;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
}

.themelist a:hover {
    background: rgba(255,255,255,0.08);
}