body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
        'Helvetica Neue', sans-serif;
    /* -webkit-font-smoothing: antialiased; */
    /* -moz-osx-font-smoothing: grayscale; */
}

html, body {
    background-color: #fff;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}


/* 8px */
@font-face {
    font-family: MSSerif;
    src: url(/os/aa14e7b110864a3c2e08.ttf);
}

@font-face {
    font-family: Millennium;
    src: url(/os/e16d74a8e8e0567ce30e.ttf);
}

@font-face {
    font-family: MillenniumBold;
    src: url(/os/cd5e3be832ebd008c852.ttf);
}

@font-face {
    font-family: Terminal;
    src: url(/os/6a1b7290048681921b2c.ttf);
}


* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

p {
    font-family: Millennium, 'Times New Roman', Times, serif;
    font-size: 18px;
}

p b {
    font-family: MillenniumBold, 'Times New Roman', Times, serif;
}

.showcase-header {
    font-family: lores-15-bold-alt-oakland;
    font-size: 15px;
    color: white;
}

.toolbar-text {
    font-family: lores-15-bold-alt-oakland;
    font-size: 18px;
    color: black;
}

h1 {
    font-family: gastromond, sans-serif;
    font-size: 64px;
}

h2 {
    font-family: MillenniumBold, 'Times New Roman', Times, serif;
    font-size: 32px;
}

h3 {
    font-family: MillenniumBold, 'Times New Roman', Times, serif;
    font-size: 24px;
    letter-spacing: 0px;
}

h4 {
    font-family: MillenniumBold, 'Times New Roman', Times, serif;
    font-size: 18px;
    letter-spacing: 0px;
}

li {
    margin-bottom: 16px;
}

.blend {
    mix-blend-mode: screen;
    background-color: red;
}

:root {
    --button-highlight: #ffffff;
    --button-face: #747474;
    --button-shadow: #808080;
    --window-frame: #2b2b2b;
    --surface: #c0c0c0;
    --surface-hover: #e9e9e9;
    --border-field: inset -1px -1px var(--button-highlight),
        inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
        inset 2px 2px var(--window-frame);
    --border-raised-outer: inset -1px -1px var(--window-frame),
        inset 1px 1px var(--button-highlight);
    --border-raised-inner: inset -2px -2px var(--button-shadow),
        inset 2px 2px var(--button-face);
}

.big-button-container {
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    padding: 24px;
    overflow: hidden;
    cursor: pointer;
}

.big-button-container:hover {
    background-color: var(--surface-hover);
}

.big-button-container:active {
    box-shadow: var(--border-raised-inner), var(--border-raised-outer);
    /* box-shadow: inset var(--border-raised-inner),
        inset var(--border-raised-outer); */
    background-color: var(--surface);
}

input {
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    border: none;
    resize: none;
    box-shadow: var(--border-field);
    font-family: Millennium, sans-serif;
    font-size: 18px;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 4px 8px;
    border: none;
    box-sizing: border-box;
    resize: none;
    box-shadow: var(--border-field);
    font-family: Millennium, sans-serif;
    font-size: 18px;
}

.music-controller-container {
    box-shadow: var(--border-field);
}

textarea:focus,
textarea:active,
input:focus,
input:active {
    outline: none;
    background-color: #fbffc4;
}

.button-border {
    box-sizing: border-box;
    background: var(--surface-hover);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    border-radius: 0;
    border: none;
}

.site-button {
    box-sizing: border-box;
    background: var(--surface-hover);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    border-radius: 0;
    border: none;
    color: black;
    font-size: 18px;
    /* flex-shrink: 1; */
    padding: 4px 12px;
    cursor: pointer;
    font-family: Millennium;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.site-button:hover {
    background-color: var(--surface);
}

.site-button:active {
    background-color: var(--button-shadow);
}

.site-button:disabled {
    background-color: var(--button-shadow);
    /* cursor cross */
    cursor: not-allowed;
}

.captioned-image {
    align-self: center;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: 100%;
    margin-bottom: 32px;
}

.captioned-image img {
    width: 100%;
}

.text-block {
    margin-top: 16px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    text-align: justify;
}

.site-page {
    display: flex;
    left: 0px;
    right: 0px;
    position: absolute;
    bottom: 0px;
    top: 0px;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}

.site-page-content {
    display: flex;
    flex-direction: column;
    margin-left: 300px;
    width: 100%;
    padding: 64px;
    padding-top: 32px;
    padding-left: 16px;
    overflow-y: scroll;
}

.router-link:visited {
    color: purple;
}

.loading::after {
    display: inline-block;
    animation: dotty steps(1, end) 1s infinite;
    content: '';
}

@keyframes dotty {
    0% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
    100% {
        content: '';
    }
}

@keyframes arrow {
    from {
        opacity: 0;
        transform: scale(1, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1, 1);
    }
    to {
        transform: scale(1, 1);
    }
}

.arrow-mount {
    transition: opacity;
    animation: arrow 0.2s normal forwards ease-out;
}

.rainbow-wrapper {
    background: linear-gradient(
        124deg,
        #ff2400,
        #e81d1d,
        #e8b71d,
        #e3e81d,
        #1de840,
        #1ddde8,
        #2b1de8,
        #dd00f3,
        #dd00f3
    );
    background-size: 1800% 1800%;

    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0% 82%;
    }
    50% {
        background-position: 100% 19%;
    }
    100% {
        background-position: 0% 82%;
    }
}
@-moz-keyframes rainbow {
    0% {
        background-position: 0% 82%;
    }
    50% {
        background-position: 100% 19%;
    }
    100% {
        background-position: 0% 82%;
    }
}
@-o-keyframes rainbow {
    0% {
        background-position: 0% 82%;
    }
    50% {
        background-position: 100% 19%;
    }
    100% {
        background-position: 0% 82%;
    }
}
@keyframes rainbow {
    0% {
        background-position: 0% 82%;
    }
    50% {
        background-position: 100% 19%;
    }
    100% {
        background-position: 0% 82%;
    }
}

.shortcut-border {
    background-image: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 stroke=%27%23ea3323%27 stroke-width=%272%27 stroke-dasharray=%271%2c1%27 stroke-dashoffset=%270%27 stroke-linecap=%27butt%27/%3e%3c/svg%3e");
}

.selected-shortcut-border {
    background-image: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-dasharray=%271%2c1%27 stroke-dashoffset=%270%27 stroke-linecap=%27butt%27/%3e%3c/svg%3e");
}

.notyf-announcer {
    opacity: 0!important;
}

.notyf {
    opacity: 0!important;
}

.start-menu-option:hover {
    background-color: #0000aa;
    cursor: pointer;
    color: white;
}
.App {
    height: 100vh;
    /* width: 1280px; */
    width: 100%;
    /* min-height: 100%; */
    image-rendering: pixelated;
    overflow-y: hidden;
    overflow-x: hidden;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

div {
    display: flex;
}

#root {
    height: 100%;
}

.white {
    color: #fff;
}


.blinking-cursor {
    background-color: #fff;
    width: 0.8em;
    height: 0.15em;
    -webkit-animation: 0.65s blink step-end infinite;
    -moz-animation: 0.65s blink step-end infinite;
    -ms-animation: 0.65s blink step-end infinite;
    -o-animation: 0.65s blink step-end infinite;
    animation: 0.65s blink step-end infinite;
}

@keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-moz-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-webkit-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-ms-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-o-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}
.primal-showcase { position:absolute; inset:0; overflow:auto; background:#f6f6ed; color:#181d19; font-family:Millennium,monospace; }
.primal-header { display:flex; justify-content:space-between; gap:16px; padding:22px 36px; border-bottom:1px solid #c5c8be; font-size:14px; }
.primal-intro { padding:38px 36px 32px; }
.primal-intro h1 { font-family:MillenniumBold,monospace; font-size:clamp(36px,5vw,72px); line-height:1.12; margin:12px 0 22px; letter-spacing:-2px; }
.primal-intro h1 span { color:#467257; }
.primal-intro p { font-size:20px; line-height:1.45; }
.primal-projects { margin:0 36px; border-top:2px solid #222c24; }
.primal-project { display:flex; align-items:center; gap:26px; padding:24px 0; border-bottom:1px solid #b9bfb4; color:inherit; text-decoration:none; }
.primal-project:hover h2 { text-decoration:underline; }
.project-number { font-size:14px; align-self:flex-start; padding-top:5px; }
.project-mark { display:flex; flex:none; align-items:center; justify-content:center; width:80px; height:80px; color:#eff4df; font:48px MillenniumBold,serif; }
.project-copy { display:block; }
.project-copy h2 { margin:4px 0 7px; font-size:30px; }
.project-copy p { margin:0 0 10px; line-height:1.35; }
.project-copy small { font-size:14px; }
.project-copy > span { font-size:16px; text-decoration:underline; }
.primal-footer { display:flex; justify-content:space-between; gap:20px; margin:26px 36px; font-size:14px; }
.primal-credits { position:absolute; inset:0; padding:32px; overflow:auto; background:#f6f6ed; color:#171b17; }
.primal-credits p { line-height:1.5; margin-top:22px; }
.chrome-app { position:absolute; inset:0; flex-direction:column; background:white; color:#25272d; font-family:Arial,sans-serif; image-rendering:auto; }
.chrome-app button { font:14px Arial,sans-serif; cursor:pointer; color:inherit; }
.chrome-app button:disabled { opacity:.35; cursor:default; }
.chrome-tabs { background:#cdd3df; padding:7px 8px 0; gap:5px; flex-shrink:0; overflow:auto; }
.chrome-tabs > button { border:0; background:transparent; font-size:22px; }
.chrome-tab { border-radius:10px 10px 0 0; background:#dce0e8; max-width:210px; min-width:100px; }
.chrome-tab.active { background:#f7f8fa; }
.chrome-tab button { background:transparent; border:0; padding:12px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chrome-tab button:first-child { flex:1; text-align:left; }
.chrome-tab button:first-child, .chrome-bookmarks button { display:inline-flex; align-items:center; gap:8px; }
.site-icon { flex-shrink:0; object-fit:contain; image-rendering:auto; }
.chrome-toolbar { display:flex; gap:6px; align-items:center; padding:8px; background:#f7f8fa; }
.chrome-toolbar button { background:transparent; border:0; padding:6px; }
.chrome-toolbar input { min-width:0; flex:1; border-radius:22px; padding:9px 16px; background:#e8ebf0; box-shadow:none; font:14px Arial,sans-serif; user-select:text; }
.chrome-toolbar input:focus { outline:2px solid #567cac; }
.chrome-bookmarks { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #e3e5e8; padding:4px 12px 10px; background:#f7f8fa; }
.chrome-bookmarks button { background:transparent; border:0; padding:5px 8px; border-radius:4px; }
.chrome-bookmarks button:hover { background:#e1e5eb; }
.chrome-home { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:32px; overflow:auto; text-align:center; }
.chrome-home h1 { font:500 42px Arial,sans-serif; letter-spacing:-1px; }
.chrome-home p { font:16px/1.6 Arial,sans-serif; max-width:460px; color:#545a64; }
.chrome-home small { font:13px Arial,sans-serif; color:#656b75; }
.chrome-shortcuts { gap:18px; flex-wrap:wrap; justify-content:center; }
.chrome-shortcuts button { display:flex; flex-direction:column; align-items:center; gap:12px; border:0; border-radius:10px; background:white; padding:20px 14px; }
.chrome-shortcuts button:hover { background:#f1f3f6; }
.chrome-shortcuts span { display:flex; align-items:center; justify-content:center; border-radius:50%; width:48px; height:48px; font-size:24px; color:white; }
.chrome-open { padding:13px 22px; border-radius:24px; background:#245db2; color:white; text-decoration:none; font-size:16px; }
.chrome-web { flex:1; flex-direction:column; min-height:0; }
.chrome-web iframe { flex:1; width:100%; border:0; background:white; }
.chrome-external { display:block; padding:10px 16px; background:#eef2f8; font-size:13px; line-height:1.5; }
.chrome-external a { color:#184d98; }
.chrome-error { padding:10px; color:#a81818; font:14px Arial,sans-serif; }
@media(max-width:600px) { .primal-header { padding:18px; } .primal-intro { padding:28px 18px; } .primal-projects { margin:0 18px; } .primal-project { gap:12px; } .project-number { display:none; } .project-mark { width:48px; height:60px; font-size:32px; } .project-copy h2 { font-size:24px; } .primal-footer { margin:24px 18px; flex-direction:column; } .chrome-home { justify-content:flex-start; padding:24px 12px; } .chrome-shortcuts { gap:0; } }