/* variables for things that change with themes*/

:root {
    --desktop-font-size: 1.2rem/1.55;
    /*colors */
    --color: #4c4f69;
    --bg-color: #eff1f5;
    --highlighttext: #1e1e2e;
    --highlight: #F9F1D7;
    --link: #0B575B;
    --border: #7c7f93;
    --other: #235758;
}

/* CSS for elements */

body {
    max-width: 60ch;
    margin: auto;
    padding: 0 0.5rem;
    background-color: var(--bg-color);
    color: var(--color);
}

body, input {
    font: var(--desktop-font-size) Dyslexie, OpenDyslexic, 'Atkinson Hyperlegible', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
}

/* Hide skip link until it's needed (thanks beepbird.net!) */
#skiplink {
    position: absolute;
    display: inline-block;
    margin: 0; padding: 0;
    max-height: 1px; max-width: 1px;
    color: transparent;
    pointer-events: none;
}
/* When skiplink is focused on, show it in a way that won't interfere with page layout */
#skiplink:focus, #skiplink:active, #skiplink:focus-visible {
    position: absolute;
    left: 0; top: 0;
    z-index: 999;
    background: var(--highlight);
    border: 2px solid;
    max-height: 2em; max-width: 100%;
    color: var(--highlighttext);
    margin: 0; padding: 1em;
    text-align: left;
    pointer-events: auto;
    font-size: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Atkinson Hyperlegible', OpenDyslexic, Dyslexie, -apple-system,BlinkMacSystemFont, serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
}

h1 { border-bottom: 3px solid; }

a {
    color: var(--link);
}

img {
    max-width: 100%;
    height: auto;
    overflow-wrap: break-word;
}

blockquote {
    border-left: 8px groove var(--link);
    padding-left: 1em;
    display: block;
}

hr {
    color: var(--border);
    width: 75%;
}

/* from vanilla css */
table {
    border: 1px solid var(--primary-color);
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
    width: 100%;
}
table caption { margin: 2rem 0; }
table tr { border-bottom: 1px solid var(--primary-color); }
table thead { position: sticky; top: 0; }
table tbody tr:nth-child(even) { background: var(--tertiary-color); }
table th { background: var(--secondary-color); font-weight: bold; }
table th, table td { padding: 0.5rem; }

/* Makes it obvious you can click on dropdowns */
summary:hover {cursor: pointer;}

/* Highlighted text and mark semantics */
::selection, mark {
    color: var(--highlighttext);
    background: var(--highlight);
    border-bottom: 1px solid var(--color);
}
mark::selection {background: rgba(0,0,0,0.15);}

:focus {outline: 2px solid var(--color); border-radius: 5px; color: var(--highlighttext); background: var(--highlight); padding: 2px;}

/* special thingies */

.bounce:hover {animation: 2s floating infinite ease-in-out;}
@keyframes floating {0% {transform: translate(0, 0px);} 50% { transform:translate(0, 20px);} 100% {transform: translate(0, -0px);}}

/* CSS for classes */

.has-email {
    display: none;
}

.loom {
    border-top: solid 2px var(--border);
    border-bottom: solid 2px var(--border);
    padding-top: 1em;
    padding-right: 0em;
}

.right {
    text-align: right;
}

/* media queries */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1e1e2e;
        --color: #cdd6f4;
        --link: #94e2d5;
        --highlight: #89dceb;
        --highlighttext: #1E1E2E;
        --border: #9399b2;
    }
}