:root {
    font-size: 1rem;
    lint-height: 1.5rem;
    margin: 0;
    font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    word-wrap: break-word;

    color-scheme: light dark;
    &:has(#theme-light:checked) {
      color-scheme: light;
    }
    &:has(#theme-dark:checked) {
      color-scheme: dark;
    }
    @media ( width < 430px) {
        --mobile-flex-direction: column;
        --mobile-padding: 2px;
        --mobile-width: 99.9%;
    }
}

* {
    box-sizing: border-box;
    text-rendering: geometricPrecision;
}

body {
    background-color: light-dark(#f0f0f0, #333333);
    color: light-dark(black, #f1f1f1);
}

a {
    color: light-dark(#ba6600, #ff8100);
    border-bottom: 1px solid light-dark(#ba6600, #ff8100)
}
a:hover {
    background-color: light-dark(#ba6600, #ff8100);
    color: light-dark(black, #d6d6d6)
}

pre {
  background-color: light-dark(#fff, #484848);
  border: 1px solid light-dark(#ccc, #ccc);
}

table {
  color: light-dark(##778087, #778087);
}
table tbody td:first-child {
  color: light-dark(#333, #c1c1c1);
}

h1,h2,h3,h4,h5,h6 {
    color: light-dark(#ba6600, #ff8100);
}

header {
    display: block;
}

footer {
    display: block;
}

.center {
    display: flex;
    justify-content: center;
    align-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    width: 70rem;
    max-width: 90svw;
    max-height: 98svh;
    height: min-content;
    margin: 0 auto;
    padding: 0 0.5rem;
}

site-content {
    display: block;
    align-content: center;
    justify-content: center;
}

blockquote {
    position: relative;
    padding-left: 17px;
    padding-left: 2ch;
    overflow: hidden
}

blockquote:after {
    content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px
}

site-nav {
    display: block;
    float: inline-start;
    margin: 0;
    padding: 0
}

theme-picker {
    display: block;
    float: inline-end;
    @media ( width < 800px) {
        float: inline-start;
    }
}

img {
    &[profile] {
        display: inline-flex;
        flex: 0 1 auto;
        height: 55%;
        @media ( width < 401px) {
            max-height: 300px;
        }
        justify-self: center;
        align-self: center;
    }
}

flex-page {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

flex-section {
    display: flex;
    flex-direction: var(--mobile-flex-direction, row);
    flex: 0 0 auto;
    align-items: center;
    &[column] {
        flex-direction: column;
    }
}

block-section {
    display: block;
    align-content: center;
    float: none;

    & p {
        overflow: scroll;
    }
}

.width {
    &.small {
        width: var(--mobile-width, 33.3%);
    }
    &.large {
        width: var(--mobile-width, 66.6%);
    }
    &.quarter {
        width: var(--mobile-width, 25%);
    }
    &.half {
        width: var(--mobile-width, 50%);
    }
    &.full {
        width: var(--mobile-width, 99.9%);
    }
}

.height {
    &.small {
        height: var(--mobile-height, 33.3%);
    }
    &.large {
        height: var(--mobile-height, 66.6%);
    }
    &.quarter {
        height: var(--mobile-height, 25%);
    }
    &.half {
        height: var(--mobile-height, 50%);
    }
    &.full {
        height: var(--mobile-height, 99.9%);
    }
}

.padding {
    &.none {
        padding: 0;
    }
    &.right{
        padding-right: var(--mobile-padding, 16px);
    }
    &.left{
        padding-left: var(--mobile-padding, 16px);
    }
    &.bottom{
        padding-bottom: var(--mobile-padding, 16px);
    }
    &.top{
        padding-top: var(--mobile-padding, 16px);
    }
}

.flex {
    &.start {
        align-items: flex-start;
    }
    &.center {
        align-items: flex-start;
    }
    &.end {
        align-items: flex-end;
    }
    &.shrink {
        flex-shrink: 1;
    }
    &.grow {
        flex-grow: 1;
    }
}


.landing {
    flex-direction: row;
    width: 50%;
    @media ( width < 401px) {
        flex-direction: column;
    }
}

landing-text {
    display: flex;
    flex: 0 2 auto;
    flex-direction: column;
    align-self: auto;
    landing-section {
    }
}

/*h1:after {
    content: "==========================================================";
    position: relative;
    bottom: -2rem;
    left: 0
}*/
h2:before,h3:before {
    display: inline
}
h2:before {
    content: "## "
}
h3:before {
    content: "### "
}

profile-picture {
    display: flex;
    align-self: center;
    flex: 0 1 auto;
    width: 25%;
}

about-page {
    display: flex;
    width: 80%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex: 1 0 auto;
    @media ( width < 401px) {
        flex-direction: column;
    }
}

about-section {
    display: inline-flex;
    flex-direction: row;
    @media ( width < 401px) {
        flex-direction: column;
    }
    align-self: center;
    flex: 0 0 auto;
    &[column] {
        flex-direction: column;
    }
    .test {
        width: 50%;
    }

    img {
        &[profile] {
            flex: 0 1 auto;
            width: 25%;
            justify-self: center;
            align-self: center;
        }
    }
}


h1,h2,h3,h4,h5,h6 {
    line-height: 1.3em
}

fieldset {
    border: none;
    padding: 0;
    margin: 0
}

pre {
    padding: 2rem;
    margin: 1.75rem 0;
    overflow: auto
}

code[class*=language-],pre[class*=language-],pre code {
    font-weight: 100;
    text-shadow: none;
    margin: 1.75rem 0
}

a {
    cursor: pointer;
    text-decoration: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
}

table td,table th {
    vertical-align: top;
    border: 1px solid #ccc;
    line-height: 15px;
    padding: 10px
}

table thead th {
    font-size: 10px
}

table tbody td:first-child {
    font-weight: 700;
}