:root {
    --WIDTH-LIMIT: 45rem;
    --width-limit: var(--WIDTH-LIMIT);
    --LIGHT-background-color: white;
    --LIGHT-color: black;
    --LIGHT-noscript-warning-color: darkred;
    --LIGHT-link-color: blue;
    --LIGHT-hover-label-color: teal;
    --DARK-background-color: #212327; /* Stolen from Google */
    --DARK-color: lightgray;
    --DARK-noscript-warning-color: red;
    --DARK-link-color: #99c3ff; /* Also stolen from Google */
    --DARK-hover-label-color: turquoise;
}

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

/***Fonts***/
body {
    font-family: Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url(/fonts/MaterialSymbolsOutlined.woff2) format('woff');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}


/***Page width button***/
#wide-checked-label {
    display: none;
}

:root:has(#wide-checkbox:checked) {
    --width-limit: initial;

    #wide-checked-label {
        display: initial;
    }

    #wide-unchecked-label {
        display: none;
    }
}

@media (max-width: 46rem) { /* --WIDTH-LIMIT + 1em */
    #wide-toggle {
        display: none;
    }
}

/***Color scheme toggle***/
/* Hide all labels by default*/
#color-scheme-toggle label { 
    display: none
}

/* Labels are shown in order Auto→Dark→White */
:root:has(#color-scheme-auto-radio:checked) {
    #color-scheme-dark-label {
        display: initial;
    }
}

/* Auto radio doesn't actually control these two, they're "default" and get overridden if needed 
This is to avoid flashing colors when the page is still loading (I think, I haven't confirmed it)*/
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--DARK-background-color);
        --color: var(--DARK-color);
        --noscript-warning-color: var(--DARK-noscript-warning-color);
        --link-color: var(--DARK-link-color);
        --label-hover-color: var(--DARK-hover-label-color);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background-color: var(--LIGHT-background-color);
        --color: var(--LIGHT-color);
        --noscript-warning-color: var(--LIGHT-noscript-warning-color);
        --link-color: var(--LIGHT-link-color);
        --label-hover-color: var(--LIGHT-hover-label-color);
    }
}

:root:has(#color-scheme-light-radio:checked) {
    --background-color: var(--LIGHT-background-color);
    --color: var(--LIGHT-color);
    --noscript-warning-color: var(--LIGHT-noscript-warning-color);
    --link-color: var(--LIGHT-link-color);
    --label-hover-color: var(--LIGHT-hover-label-color);
    #color-scheme-auto-label {
        display: initial;
    }
}

:root:has(#color-scheme-dark-radio:checked) {
    --background-color: var(--DARK-background-color);
    --color: var(--DARK-color);
    --noscript-warning-color: var(--DARK-noscript-warning-color);
    --link-color: var(--DARK-link-color);
    --label-hover-color: var(--DARK-hover-label-color);
    #color-scheme-light-label {
        display: initial;
    }
}

/***Noscript warning button and dialog***/
#noscript-dialog-label {
    color: var(--noscript-warning-color);
}

#noscript-dialog-div {
    display: none; /* Overridden by checkbox */
    /* The following 5 are for centering */
    position: absolute; 
    left: 0; 
    right: 0; 
    margin-inline: auto; 
    width: fit-content;
    text-align: justify;
    max-width: 30em;
    border: 2px solid darkorange;
    border-radius: 5px;
    padding: 0.1em;
    background-color: var(--background-color); /* Better way to do this? */
}

#noscript-dialog-div label {
    margin: auto;
    text-align: center;
    display: block;
    width: fit-content;
    padding: 0.1em;
}

:root:has(#noscript-dialog-checkbox:checked) {
    #noscript-dialog-div {
        display: initial;
    }
}

/* Make buttons in header unselectable */
#header-buttons {
    user-select: none;
}

#header-buttons label {
    font-size: 1.5em;
    cursor: pointer;
}

/***Header (except for buttons)***/
header {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    height: 2em;
    position: relative; /* for #header-tabbable-section to position correctly */
}

header a:is(:hover, :focus) {
    color: var(--link-color);
    text-decoration: underline;
}

#header-buttons label:is(:hover, :focus) {
    color: var(--label-hover-color);
} 

#header-tabbable-section {
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--background-color);
    border: 1px solid var(--color);
    border-radius: 5px;
    clip: rect(0,0,0,0);
}

#header-tabbable-section:has(:focus-visible) {
    clip: unset;
}

#header-logo {
    font-size: 140%;
}

#header-nav > a {
    margin: auto 5px;
}

#header-nav > a.current {
    text-decoration: underline var(--color) dashed !important;
}

header div, header nav {
    display: inline;
    vertical-align: middle;
}

/***Projects page***/
.project-title-container > * {
    vertical-align: middle;
}

.project-entry h1 {
    margin-bottom: 0;
    display: inline;
}

.project-entry p, .project-entry ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.project-entry .button {
    font-size: 1.1em;
    padding: 0.2em;
    margin-bottom: 0.2em;
}

.project-entry .button:is(:hover, :focus) {
    border-color: var(--link-color);
}

.compatibility-badges {
    display: inline-block;
    height: 2.5em;
}

.compatibility-badges a, .compatibility-badges img {
    border: 1px solid transparent;
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
}

.compatibility-badges img {
    object-fit: contain;
    box-sizing: border-box;
}

.compatibility-badges a:is(:hover, :focus) {
    border-color: var(--link-color);
}

/***Blog page***/
.blogpost-date {
    font-size: 0.85em;
}

.blogpost-link h1 {
    margin-top: 0;
}

#blogpost-title {
    margin-top: 0;
    margin-bottom: 0.1em;
    font-family: "Georgia", serif;
    font-weight: revert;
    text-decoration: underline;
    text-decoration-style: dotted;
}

/***RSS link***/
#rss-link * {
    vertical-align: middle;
}

#rss-link-icon {
    color: orange;
    width: 1em /* Avoids having the element too wide while the font is still loading*/
}

/* Ugly(?) hack to avoid havint the space between the icon and text have an underline when hovered*/
#rss-link-text {
    color: var(--link-color);
}

#rss-link:is(:hover, :focus) * {
    color: var(--link-color);
}

#rss-link-text:is(:hover, :focus) {
    text-decoration: underline;
}

/***Misc/generic***/
.margin-bottom-1em {
    margin-bottom: 1em;
}

h1 {
    font-weight: normal;
}

.button {
    border: 1px solid var(--color);
    border-radius: 5px;
    display: inline-block;
}

a:not(.a-reset) {
    color: var(--link-color);
    text-decoration: none;
}

a:not(.a-reset):is(:hover, :focus) {
    text-decoration: underline;
}

.a-reset {
    color: unset;
    text-decoration: unset;
}

.width-limiter, .width-limiter *:not(.no-width-limit) { /* Also applies to children! */
    max-width: min(var(--width-limit), calc(100vw - 1rem));
}

.width-limiter { /* Centers */
    margin: auto;
}

.nowrap {
    white-space: nowrap;
}