twtxt-lib/dist-demo/demo/styles.css

:root {
    --fg-main: #DBDFAC;
    --bg-main: #3B1F2B;

    --fg-light: #edefd5;
    --bg-dark: rgba(10, 10, 10, .5);
    --bg-light: rgba(245, 245, 245, .6);

    --main-link: #8598AD;
    --link-active: #ccc;
    --link-active: lch(from var(--main-link) calc(l + 20) c h);

    --gray-light: #5F758E;
}

@keyframes riseInDetails {
    0%    {opacity: 0; margin-top: 2rem}
    100%  {opacity: 1; margin-top: 0rem}
}

@keyframes riseInTab {
    0%    {opacity: 0; margin-top: -2rem}
    100%  {opacity: 1; margin-top: -4rem}
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
}

html {
    font-size: 18px;
}

body {
    background-color: var(--bg-main);
    color: var(--fg-main);
    margin: 0;
    transition:
        background-color .5s,
        border-color .5s,
        color .5s;
}

a {
    border: 1px solid transparent;
    border-bottom-color: var(--main-link);
    border-radius: 0;
    color: var(--main-link);
    padding: 0 .5rem ;
    text-decoration: none;
    transition: all .5s;
}

a:active {
    background-color: var(--fg-main);
    border-color: var(--bg-main);
    color: var(--link-active);
}

a:hover {
    border-color: var(--link-active);
    border-radius: .5rem;
    color: var(--link-active);
}

button {
    background-color: var(--link-active);
}

code {
    background-color: var(--bg-dark);
    color: var(--fg-main);
    font-size: smaller;
    padding: 0 .5rem;
    white-space: pre-wrap;
}


label {
    display: inline-block;
    border: none;
    max-width: 25rem;
    padding: 1rem;
    text-align: center;
    width: 100%;
}

input {
    background-color: var(--fg-main);
}

input[type="reset"], input[type="submit"] {
    background-color: var(--link-active);
}

input[type="text"], input[type="url"] {
    background-color: var(--fg-light);
    font-size: 1rem;
    max-width: 25rem;
    width: 100%;
}

pre {
    background-color: var(--bg-dark);
    border: 1px solid var(--fg-main);
    color: var(--fg-main);
    font-size: smaller;
    padding: 1rem;
    white-space: pre-wrap;
}

textarea {
    background-color: var(--fg-light);
    font-size: 1rem;
    max-width: 30rem;
    width: 100%;
}


details figure {
    margin: 1rem .5rem;
}

details figure pre {
    overflow: auto;
    white-space: pre;
}


details[open] summary ~ * {
    animation: riseInDetails .5s ease-in-out;
}

summary {
    cursor: pointer;
}
 
.code-cmd {
    color: var(--gray-light);
}

.code-cmnt {
    color: #ccc;
}

.code-str {
    color: var(--gray-light);
}

.copyright {
    font-style: italic;
}

.flexCol {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 25rem;
    width: 100%;
}

.flexRow {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: .5rem 1rem;
}

.tab {
    border: 2px solid transparent;
    border-top: 2px solid var(--fg-main);
    border-radius: .5rem .5rem 0 0;
    display: block;
}

.tab-link {
    background-color: var(--bg-main);
    border-radius: .5rem .5rem 0 0;
    border-bottom: 0;
    color: var(--main-link);
    display: block;
    padding: 1rem 2rem;
    position: relative;
    text-decoration: none;
}

.tab-panel {
    bottom: 0;
    display: none;
    left: 0;
    line-height: 1.5rem;
    overflow: auto;
    padding: 0 1rem 1rem;
    right: 0;
    top: 4.25rem;
    width: 100%;  
    z-index: -2;
}

.tabs {
    border: 2px solid var(--fg-main);
    border-top-color: transparent;
    border-radius: .5rem .5rem 0 0;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    min-height: 100vh;
    padding: 0;
}

.tab:target .tab-panel {
    display: block;
}

body:not(:has(:target)) #tabOverview-panel {
    display: block;
}

.tab:target .tab-link {
    background: linear-gradient(var(--bg-dark), var(--bg-main));
}

.tab:target + .tab {
    margin-top: auto;
}

body:not(:has(:target)) #tabOverview-link {
    background-color: var(--bg-dark);
    color: var(--fg-main);
}

.themeToggle-button {
    background-color: var(--fg-main);
    border: 1px solid var(--gray-light);
    border-radius: 1rem;
    bottom: .5rem;
    color: var(--gray-light);
    display: flex;
    font-size: 1.5rem;
    padding: .5rem;
    position: fixed;
    right: .5rem;
    z-index: 100;
}

.themeToggle-svgIndicator {
    rotate: 180deg;
    transition: rotate .5s;
}

/** Loader from https://www.cssportal.com/css-loader-generator/ */

.dotLoader {
    animation: dotLoaderFrames 1s infinite steps(6);
    background:
        linear-gradient(var(--bg-main) 0 0) left -25% top 0 /20% 100% no-repeat var(--fg-main);
    display: block;
    height: 20px;
    margin-top: 1rem;
    mask: linear-gradient(90deg,var(--bg-main) 70%,#0000 0) left/20% 100%;
    -webkit-mask: linear-gradient(90deg,var(--bg-main) 70%,#0000 0) left/20% 100%;
    transition: opacity .5s;
    width: 120px;
}

@keyframes dotLoaderFrames {
    100% {background-position: right -25% top 0}
}

/** ID Overrides */

#formHash .flexCol {
    min-width: 15rem;
    width: 50%;
}

#formHash input[type="submit"] {
    margin-top: 1rem;
    min-width: 5rem;
}

#formHash textarea {
    min-height: 6rem;
    width: 100%
}

#formLoadAndParse .flexCol {
    width: 100%; 
    max-width: 25rem;
}

#formLoadAndParse label {
    width: 100%; 
    max-width: 25rem;
}

/** Media-Query Overrides */
@media (min-width: 900px) {
    .flexRow {
        flex-direction: row;
    }

    .tab {
        border-color: transparent;
        display: inline-block;
        position: static;
    }

    .tab-link {
        background-color: transparent;;
        border: 2px solid var(--fg-main);
        border-bottom-color: transparent;
        margin-top: -4.5rem;
    }

    .tab-link:hover {
        background-color: var(--link-active);
        border-radius: .5rem .5rem 0 0;
        color: var(--bg-main);
        font-size: 1.2rem;
        margin-top: -4.65rem;
    }


    .tab-panel {
        animation: riseInTab .5s ease-in-out;
        margin-top: -4rem;
        position: relative;
        padding: 0 2rem;
    }


    .tabs {
        border-top: 2px solid var(--fg-main);
        bottom: 0;
        flex-direction: row;
        left: 0;
        margin-top: 4.5rem;
        min-height: auto;
        padding: 1rem;
        position: absolute;
        right: 0;
        top: 0;
    }

    .tab:target + .tab {
        margin-top: 0;
    }

    .tab:target .tab-link {
        border-bottom: 0;
        font-size: 1.2rem;
        margin-top: -4.55rem;
    }

    .tab:target .tab-link:hover {
        border-radius: .5rem .5rem 0 0;
        background-color: var(--bg-dark);
        color: var(--main-link);
        font-size: 1.2rem;
        margin-top: -4.55rem;
    }


    .tab:target .tab-panel {
        position: absolute;
        z-index: 1;
    }

    body:not(:has(:target)) #tabOverview-panel {
        display: block;
        position: absolute;
        z-index: 1;
    }

    .themeToggle-button {
        bottom: auto;
        position: absolute;
        right: 1rem;
        top: 1rem;
    }
}

/** State-Based Overrides */

body.invertedTheme {
    background-color: var(--fg-main);
    color: var(--bg-main);
}

body.invertedTheme a:hover {
    background-color: var(--main-link);
    border-color: var(--bg-dark);
    color: var(--fg-main);
}


body.invertedTheme figcaption {
    border-color: var(--bg-main);
}

body.invertedTheme figure {
    background-color: var(--gray-light);
    border-color: var(--bg-main);
}

body.invertedTheme input,
body.invertedTheme textarea {
    background-color: var(--fg-light);
}

body.invertedTheme pre {
    background-color: var(--bg-light);
    border-color: var(--bg-main);
    color:  var(--bg-main);
}

body.invertedTheme .code-cmd {
    color: var(--bg-dark);
}

body.invertedTheme .code-str {
    color: var(--bg-dark);
}

body.invertedTheme .tab-link {
    color: var(--bg-dark);
    background-color: var(--fg-main);
    border-color: var(--bg-main);
}

body.invertedTheme .tab:target .tab-link {
    background: linear-gradient(var(--link-active), var(--fg-main));
}

body.invertedTheme .tab-link:hover {   
    background-color: var(--main-link);
    border-color: var(--bg-dark);
}

body.invertedTheme .tab:target .tab-link {
    border-color: var(--bg-main);
}

body.invertedTheme .tab-panel {
    border-color: var(--bg-main);
}

body.invertedTheme .tabs {
    border: 2px solid var(--bg-main);
}

body.invertedTheme .themeToggle-button {
    background-color: var(--bg-main);
    color: var(--main-link);
}

body.invertedTheme .themeToggle-svgIndicator {
    rotate: 0deg;
}

.isLoaded .dotLoader {
    margin: 0;
    max-height: 0;
    opacity: 0;
}

.isLoading .dotLoader {
    opacity: 1;
}

a[href^='http']::after {
    content: '\2197'; /* Code for ↗ */
    display: inline-block;
    margin-left: 5px;
    font-size: 0.9em;
}