silicon.css

/* silicon v1.2.9 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&display=swap');

:root {
    --color-primary: #2c62af;
    --color-secondary-dark: #263342;
    --color-secondary: #cfdef3;
    --color-tertiary: #edf2f6;
    --color-background: #fff;
    --color-text: #0c0c0c;
    --color-border: #0c0c0c;
    --color-grey: #f1f1f1;
    --color-dark-grey: #ababab;
    --color-darker-grey: #818181;

    --color-green: #8ae77a;
    --color-red: #dc4e4e;
    --color-yellow: #eac66a;

    --offset-text-color: #f1f1f1;

    --font-size: 1.07rem;

    --xs-width: 20vw;
    --small-width: 30vw;
    --medium-width: 50vw;
    --large-width: 80vw;
    --xl-width: 100vw;

    --gap: 15px;
    --border-width: 2px;
}

* {
    font-family: 'Outfit', sans-serif, system-ui;
    color: var(--color-text);
    box-sizing: border-box;
}

html {
    background-color: var(--color-background);
}

body {
    min-width: var(--small-width);
    width: min-content;
    margin: auto;
}

/* headers */

h1 { font-size: 3em; }
h2 { font-size: 2.2em; }
h3, caption { font-size: 1.7em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }

/* hyperlinks / buttons */

a {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration-thickness: var(--border-width);
    font-size: var(--font-size);
}

u, s {
    text-decoration-thickness: var(--border-width);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin: 3rem 0;
}

*.fullscreen {
    width: 100vw;
    height: 100vh;
}

*.width-xs {
    width: var(--xs-width);
    max-width: var(--xs-width);
    margin: 4rem auto;
}

*.width-s {
    width: var(--small-width);
    max-width: var(--small-width);
    margin: 4rem auto;
}

*.width-m {
    width: var(--medium-width);
    max-width: var(--medium-width);
    margin: 4rem auto;
}

*.width-l {
    width: var(--large-width);
    max-width: var(--large-width);
    margin: 4rem auto;
}

*.width-xl {
    width: var(--xl-width);
    max-width: var(--xl-width);
}

/* forms */

form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    flex-flow: column;
    width: 100%;
    margin: 2rem 0;
}

form * {
    width: 100%;
}

label {
    padding-bottom: 4px;
    font-size: var(--font-size);
    display: inline-block;
    color: var(--color-darker-grey);
}

label, input[type='checkbox'], input[type='range'] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: fit-content;
    display: inline-block;
}

input, textarea, select, button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.8em;
    border-radius: 4px;
    background: none;
    border: var(--border-width) solid var(--color-text);
    outline: none;
    color: var(--color-text);
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
    font-size: var(--font-size);
    caret-color: var(--color-primary);
}

input:focus, textarea:focus, select:focus {
    animation: focus_border 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

input[type='submit'], button {
    background-color: var(--color-primary);
    font-weight: 600;
    border: none;
    color: var(--offset-text-color);
    cursor: pointer;
    padding: 0.4rem 1.2rem;
}

input[type='submit'] {
    padding: 0.8rem 1.2rem;
}

::selection, ::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-background);
    border-radius: 4px;
}

button {
    width: initial;
    margin: 0 4px;
}

button:disabled, input:disabled {
    background-color: var(--color-grey);
    color: var(--color-darker-grey);
    font-weight: 500;
    border: var(--border-width) dashed var(--color-darker-grey);
    /*border-style: ridge;*/
}

button:disabled {
    padding: calc(0.4rem - var(--border-width)) calc(1.2rem - var(--border-width));
}

button:disabled:hover, input:disabled:hover { cursor: not-allowed; }

button[type='reset'] {
    background-color: var(--color-grey);
    color: var(--color-text);
    font-weight: 600;
}

input[type='submit']:active, button:active { transform: translateY(1px); }
button:disabled:active { transform: none; }

input[type='color'] {
    padding: 14px 4px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

@-moz-document url-prefix() {
    input[type='color'] {
        padding: 6px;
    }
}

input[type='color']::-webkit-color-swatch {
    height: 16px;
    box-sizing: border-box;
    padding: 0;
    transform: translateY(-8px);
    border-radius: 3px;
    border: none;
}

input[type='color']::-moz-color-swatch {
    border-radius: 3px;
    height: 16px;
    border: none;
}

input[type='range'] {
    height: 32px;
    -webkit-appearance: none;
    margin: 0;
    width: 100%;
    border: 0;
    display: block;
}

input[type='range']::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: var(--color-background);
    border-radius: 4px;
    border: var(--border-width) solid var(--color-text);
    -webkit-appearance: none;
    padding: 0;
}

input[type='range']::-webkit-slider-thumb {
    border: var(--border-width) solid var(--color-text);
    height: 16px;
    width: 16px;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    transform: translateY(-5px);
    background: var(--color-text);
    box-shadow: inset -3px -3px 0 var(--color-background), inset 3px 3px 0 var(--color-background), inset 3px -3px 0 var(--color-background), inset -3px 3px 0 var(--color-background);
}

input[type='range']::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: var(--color-background);
    border-radius: 4px;
    border: var(--border-width) solid var(--color-text);
}

input[type='range']::-moz-range-thumb {
    border: var(--border-width) solid var(--color-text);
    height: 12px;
    width: 12px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--color-text);
    box-shadow: inset -3px -3px 0 var(--color-background), inset 3px 3px 0 var(--color-background), inset 3px -3px 0 var(--color-background), inset -3px 3px 0 var(--color-background);
}

input[type='range']::-ms-track {
    width: 100%;
    height: 11px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type='range']::-ms-fill-lower {
    background: #74A9D8;
    border: 0px solid #010101;
    border-radius: 2px;
    box-shadow: 1px 1px 1px #000000;
}

input[type='range']::-ms-fill-upper {
    background: #74A9D8;
    border: 0px solid #010101;
    border-radius: 2px;
    box-shadow: 1px 1px 1px #000000;
}

input[type='range']::-ms-thumb {
    margin-top: 1px;
    box-shadow: none;
    border: 1px solid #00001E;
    height: 26px;
    width: 26px;
    border-radius: 15px;
    background: #FFFFFF;
    cursor: pointer;
}

input[type='file'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: var(--border-width) solid var(--color-text);
    padding: 6px 6px;
}

input[type='file']:hover { cursor: pointer; }

::file-selector-button {
    border: var(--border-width) solid var(--color-text);
    background: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Outfit', system-ui, sans-serif;
    margin-right: 10px;
    color: var(--color-text);
    font-size: var(--font-size);
}

::-webkit-file-upload-button {
    border: var(--border-width) solid var(--color-text);
    background: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Outfit', system-ui, sans-serif;
    margin-right: 10px;
    color: var(--color-text);
    font-size: var(--font-size);
}

::-ms-browse {
    border: var(--border-width) solid var(--color-text);
    background: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Outfit', system-ui, sans-serif;
    margin-right: 10px;
    color: var(--color-text);
    font-size: var(--font-size);
}

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="%230c0c0c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 11-3 3-3-3"/></svg>');
    background-position: calc(100% - 0.4em) calc(50% + 1px);
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield;
}

input[type='checkbox'], input[type='radio'] {
    margin: 0 1rem 0 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    position: relative;
    cursor: pointer;
    padding: 0 6px;
    transform: translate(5px, 5px);
    border: none;
    outline: none;
}

input[type='checkbox']:checked:before, input[type='radio']:checked:before {
    animation: focus_border 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

input[type='checkbox']:checked:after,
input[type='radio']:checked:after,
input[type='checkbox']:before,
input[type='radio']:before {
    content: '';
    display: block;
}

input[type='checkbox']:before, input[type='radio']:before {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-text);
    transform: translate(-8px, -8px);
    border-radius: 4px;
}

input[type='checkbox']:checked:after, input[type='radio']:checked:after {
    width: 6px;
    height: 6px;
    background-color: var(--color-text);
    border-width: 0 var(--border-width) var(--border-width) 0;
    position: relative;
    transform: translate(-3px, -3px);
    border-radius: 2px;
}

input[type='radio']:before, input[type='radio']:checked:after, input[type='radio'] {
    border-radius: 20px;
}

::placeholder { opacity: 100%; color: var(--color-darker-grey); }


/* table */

table { border-collapse: collapse; width: 100%; margin: calc(var(--gap) * 2) 0; }

caption { text-align: left; margin-bottom: 1rem; font-weight: 600; }

td, th { padding: 0.4em; text-align: left; }

th { border-bottom: var(--border-width) solid var(--color-text); font-size: 1.2em; }

table.alternate tr th {
    background-color: var(--color-grey);
    border: none;
    padding: 1rem 0.5rem;
}


table.alternate tr th:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding-left: 1rem; }
table.alternate tr th:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-right: 1rem; }


table.alternate tr td {
    border-bottom: var(--border-width) solid var(--color-text);
}

table.alternate tr:last-child td { border-bottom: none; }

table.alternate tr td:first-child { border-left: 1rem solid var(--color-background); }
table.alternate tr td:last-child { border-right: 1rem solid var(--color-background); }

table:not(.alternate) tr:hover *:not(th) {
    background-color: var(--color-grey);
}

tr { border-radius: 4px; }

/* misc tag */

code, samp {
    padding: 0.2rem 0.4rem;
    background-color: var(--color-secondary);
    color: var(--color-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    border-radius: 4px;
    tab-size: 4;
    unicode-bidi: embed;
    white-space: pre-wrap;
}

samp {
    background-color: var(--color-tertiary);
}

code strong { font-family: 'JetBrains Mono', monospace; font-weight: 800; }

var {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.9rem;
}

samp {
    font-weight: 800;
}

ul, ol {
    padding-left: 1.2rem;
}

li {
    margin: 5px 0;
}

pre > code {
    display: block;
    margin: 4px 0;
    overflow: auto;
    padding: 0.6em;
}

del { background-color: var(--color-red); border-radius: 4px; text-decoration-thickness: var(--border-width); }
ins { background-color: var(--color-green); border-radius: 4px; text-decoration-thickness: var(--border-width); }
mark { background-color: var(--color-yellow); border-radius: 4px; }

kbd {
    padding: 0.1rem 0.6rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    border-radius: 4px;
    background-color: var(--offset-text-color);
    box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 #fff, inset 2px -2px 0 #fff, inset -2px 2px 0 #fff;
    border: 1px solid var(--color-darker-grey);
    border-bottom: 2px solid var(--color-darker-grey);
    color: var(--color-text);
    display: inline-block;
    text-transform: lowercase;
}

img { border-radius: 4px; max-width: 100%; max-height: 100%; }
svg { max-width: 100%; max-height: 100%; }

blockquote {
    margin-left: 1em;
}

p {
    line-height: 1.4em;
    font-size: var(--font-size);
}

blockquote footer {
    color: var(--color-darker-grey);
    margin: 1em 0 0 1em;
    font-size: 0.9em;
}

blockquote footer::before {
    content: '— ';
}

hr {
    border: 1px solid var(--color-text);
}

details { cursor: pointer; }
details p { border-left: var(--border-width) solid var(--color-dark-grey); padding-left: 1em; }

aside {
    /*border-left: calc(var(--border-width) * 1.5) solid var(--color-primary);*/
    padding: 0.6em 1em;
    background-color: var(--color-tertiary);
    border-radius: 4px;
}

aside p {
    margin: 0;
}

/* classes */

*.flex { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: var(--gap); }
*.flex.column { flex-direction: column; }
*.flex.wrap { flex-wrap: wrap; }
*.width-100 { width: 100%; }
*.height-100 { width: 100%; }

*.card {
    border: var(--border-width) solid var(--color-dark-grey);
    padding: 1em;
    border-radius: 4px;
}

*.notice {
    background-color: var(--color-background);
    border: var(--border-width) solid var(--color-primary);
    padding: 0.5rem;
    display: block;
    border-radius: 4px;
    margin-bottom: 1em;
    color: var(--color-primary);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

*.notice.warning {
    border: calc(var(--border-width) * 1.5) solid var(--color-red);
    color: var(--color-red);
    font-weight: 700;
    padding: calc(0.5rem - 2px);
}

*.left { text-align: left; }
*.center { text-align: center; }
*.right { text-align: right; }

div.gap { gap: var(--gap); }
div.grid { display: grid; }
div.grid.two { grid-template-columns: repeat(2, 1fr); }
div.grid.three { grid-template-columns: repeat(3, 1fr); }
div.grid.four { grid-template-columns: repeat(4, 1fr); }
div.grid.five { grid-template-columns: repeat(5, 1fr); }

div.grid *.span.c-2 { grid-column: span 2; }
div.grid *.span.c-3 { grid-column: span 3; }
div.grid *.span.c-4 { grid-column: span 4; }
div.grid *.span.c-5 { grid-column: span 5; }

div.grid *.span.r-2 { grid-row: span 2; }
div.grid *.span.r-3 { grid-row: span 3; }
div.grid *.span.r-4 { grid-row: span 4; }
div.grid *.span.r-5 { grid-row: span 5; }


textarea.no-resize { resize: none; }
textarea.all-resize { resize: both; }
textarea.ho-resize { resize: horizontal; }
textarea.ve-resize { resize: vertical; }

input.small, textarea.small, select.small {
    padding: 0.4rem 1.2rem;
}

button.big {
    padding: calc(0.8em + 2px) 1.6em;
}

button:disabled.small {
    padding: calc(0.4rem - 2px) 1.2rem;
}

*.desktop-only { display: inherit; }
*.mobile-only { display: none; }

@keyframes focus_border {
    0% {
        border-color: var(--color-text);
    }

    100% {
        border-color: var(--color-primary);
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --xs-width: 40vw;
        --small-width: 60vw;
        --medium-width: 70vw;
        --large-width: 80vw;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --xs-width: 90vw;
        --medium-width: 90vw;
        --small-width: 90vw;
        --large-width: 90vw;
    }

    *.desktop-only { display: none; }
    *.mobile-only { display: inherit; }

    div.gap { gap: var(--gap); }
    div.grid { display: grid; grid-auto-rows: 1fr; }
    div.grid.four { grid-template-columns: repeat(2, 1fr); }
    div.grid.five { grid-template-columns: repeat(3, 1fr); }

    div.grid *.span.c-3 { grid-column: span 3; }
    div.grid *.span.c-4 { grid-column: span 3; }
    div.grid *.span.c-5 { grid-column: span 3; }

    div.grid *.span.r-3 { grid-row: span 3; }
    div.grid *.span.r-4 { grid-row: span 4; }
    div.grid *.span.r-5 { grid-row: span 5; }
}

@media ( prefers-color-scheme: dark ) {
    :root {
        --color-primary: #5783c4;
        --color-secondary: #263342;
        --color-tertiary: #161f28;
        --color-background: #091118;

        --color-text: #cbcbcb;

        --color-secondary-dark: #263342;
        --color-border: #0c0c0c;
        --color-grey: #1e2431;
        --color-dark-grey: #262b33;
        --color-darker-grey: #5d6c7e;

        --color-green: #1d4624;
        --color-red: #602020;
        --color-yellow: #67550c;
    }

    kbd {
        background-color: var(--color-dark-grey);
        box-shadow: inset -2px -2px 0 var(--color-grey), inset 2px 2px 0 var(--color-grey), inset 2px -2px 0 var(--color-grey), inset -2px 2px 0 var(--color-grey);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    select {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path stroke="%23cbcbcb" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 11-3 3-3-3"/></svg>') !important;
    }
}