/* primary color: #ecbf02 */
/* secondary color: #decfb8  */

@font-face {
    font-family: Topaz;
    src: url(images/TopazPlus_a1200_v1.0.woff2) format("woff2");
}
@font-face {
    font-family: POT;
    src: url(images/P0T-NOoDLE_v1.0.woff2) format("woff2");
}
@font-face {
    font-family: POT;
    src: url(images/P0T-NOoDLE_v1.0.woff2) format("woff2");
    font-weight: bold;
}
@font-face {
    font-family: DEC;
    src: url(images/_decterm.woff2) format("woff2");
}
@font-face {
    font-family: DEC;
    src: url(images/_decterm.woff2) format("woff2");
    font-weight: bold;
}
:root {
    --flag: #ecbf02;
    --pole: #decfb8;
    --primary: var(--flag);
    --secondary: var(--pole);
}

html {
    color-scheme: light dark;
}
body {
    color: #ecbf02;
    background: black;
    min-width: 100%;
    min-height: 100%;
    margin: 0 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    font-family: Topaz;
}
.pot {
    font-family: POT;
}

.dec {
    font-family: DEC;
}

/* top level  */

.center-contents {
    text-align: center;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
body div.content {
    padding: 1em;
}
body div.nav-bar {
    padding: 1em;
}
body div.title {
    width: 100%;
    display: inline-block;
    text-align: center;
}
.warning {
    border-width: 2px;
    border-color: var(--flag);
    border-style: double;
    max-width: 40%;
}

.warning-head {
    font-weight: bold;
    background: var(--flag);
    color: black;
}
.warning-body {
    padding: 1em;
}

.note {
    border-width: 2px;
    border-color: var(--flag);
    border-style: dotted;
    max-width: 80%;
}

.note-head {
    font-weight: bold;
    text-align: center;
    padding: 2px;
}
.note-body {
    border-top: dotted 2px;
    padding: 1em;
}

.index-title {
    /* font-size: 4em; */
    margin-left: auto;
    margin-right: auto;
}

/* buttons */

.button {
    background-color: var(--primary);
    border: none;
    color: black !important;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: bold;
    font-variant: small-caps;
}

a:link {
    color: var(--secondary);
}
a:visited {
    color: var(--primary);
}
a:hover {
    color: teal;
}

/* collapse */
details {
    user-select: none;
}

details > summary span.icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s;
    margin-left: auto;
}

details[open] summary span.icon {
    transform: rotate(180deg);
}

summary {
    display: flex;
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

a.apple {
    color: var(--flags);
    font-family:
        "Helvetica Neue",
        "Helvetica",
        Arial,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    line-height: 1.75;
}

@keyframes scroll-right-ticks {
    0% {
        left: -11ch;
    }
    100% {
        left: -77ch;
    }
}
@keyframes scroll-right-raised {
    0% {
        left: 0ch;
    }
    100% {
        left: -60ch;
    }
}
@keyframes scroll-right-flags {
    0% {
        left: -6ch;
    }
    100% {
        left: -12ch;
    }
}
@keyframes scroll-left-flags {
    0% {
        left: -12ch;
    }
    100% {
        left: -6ch;
    }
}
.scroll-container {
    white-space: nowrap;
    max-width: 100vw;
    overflow-x: hidden;
}
.scroll-left-flags {
    animation-name: scroll-left-flags;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.scroll-right-flags {
    animation-name: scroll-right-flags;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.scroll-right-raised {
    animation-name: scroll-right-raised;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.scroll-right-ticks {
    animation-name: scroll-right-ticks;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.slow {
    animation-duration: 3s;
}

.med {
    animation-duration: 2s;
}
.fast {
    animation-duration: 1s;
}

.ultra-fast {
    animation-duration: 0.5s;
}
.typing div {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: 1ch solid #ecbf02; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */

    animation-timing-function: linear;
    /* margin: 0 auto; /\* Gives that scrolling effect as the typing happens *\/ */
    /* letter-spacing: 0.15em; /\* Adjust as needed *\/ */
    animation:
        typing 5s steps(25, end) 3s,
        blink-caret 0.75s step-end infinite 0s;

    animation-fill-mode: both;
}
/* The typing effect */
@keyframes typing {
    from {
        width: 0ch;
    }
    to {
        width: 25ch;
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: #ecbf02;
    }
}
@keyframes dialup-image {
    from {
        height: 0em;
    }
    to {
        height: 40em;
    }
}

.dialup-image {
    overflow: hidden;
    animation-name: dialup-image;
    animation-duration: 13s;
    animation-delay: 10s;
    animation-timing-function: steps(50, end);
    animation-fill-mode: both;
}

.reverse {
    animation-direction: reverse;
}
ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

li {
    padding-left: 1em;
}

li:before {
    content: "*";
}
a.archive-link {
    display: block;
    margin-left: 1em;
}

hr {
    border-top: 3px dashed #ecbf02;
    border-bottom: 0px;
}