/* ======================= All variables ======================= */

/* ----------------------- Colors ----------------------- */

/*
 * Primary and accent colors are from here: https://material-ui.com/customization/color/#color-tool
 * Created the lighter and darker versions here: https://coolors.co/101016-2196f3-ffc400-4dabf5-1769aa
 * Background and text colors are from here: https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6
 */
:root {
    --google-recommended-dark-background-color: #121212; /* text: white */
    --paper-background-color: #424242; /* text: white */
    --primary-color-darker: #114d7e; /* text: white */
    --primary-color-dark: #1769aa; /* text: white */
    --primary-color-main: #2196f3; /* BLUE 500 */ /* text: white */
    --primary-color-light: #4dabf5; /* text: white */
    --primary-color-lighter: #83d5fa; /* text: black */
    --primary-color-lightest: #cee8fc; /* text: black */
    --accent-color-dark: #b28900; /* text: white */
    --accent-color-main: #ffc400; /* AMBER A400 */ /* text: black */
    --accent-color-light: #ffcf33; /* text: black */
    --disabled-color: #404040; /* text: white */
    --light-text-color-high-emphasis: rgba(255, 255, 255, 0.87);
    --light-text-color-medium-emphasis: rgba(255, 255, 255, 0.70);
    --light-text-color-disabled: rgba(255, 255, 255, 0.38);
}

:root {
    --page-background-color: #101016;
    --main-background-color: var(--paper-background-color);
    --navbar-color: black;
    --dark-primary-text-color: #000; /* BLACK */
    --error-color: #ff5722; /* DEEP ORANGE 500 */
    --error-color-30-percent: rgba(255, 87, 34, 0.3);
    --warning-color: #fdd835; /* YELLOW 600 */
    --warning-color-30-percent: rgba(253, 216, 53, 0.3);
    --success-color: #2e7d32; /* GREEN 800 */
    --accent-color: #ff5722; /* DEEP ORANGE 500 */
    --light-disabled-text-color: #fafafa; /* GREY 50 */
    --divider-color: #bdbdbd; /* GREY 400 */
    --card-background-color: #fafafa; /* GREY 50 */
}

/* ----------------------- Fonts ----------------------- */

:root {
    --ui-font: 'IBM Plex Sans', sans-serif;
    --header-font: 'IBM Plex Sans', sans-serif;
    --content-font: 'IBM Plex Sans', sans-serif;
}

/* ----------------------- Sizes ----------------------- */

:root {
    --minimum-site-width: 320px;
    --maximum-content-width: 900px;
    --site-header-height: 54px;
    --site-header-profile-pic-size: 38px;
    --page-vertical-padding-size: 20px;
    --site-header-vertical-padding: calc((var(--site-header-height) - var(--base-font-size) * 0.9 * 1.3) / 2);
}
@media screen and (max-width: 950px) {
    :root {--site-header-height: 47px; }
}

/* ======================= Typography ======================= */

:root {
    --base-font-size: 1.2rem;
    --base-line-height: 1.6;
}
@media screen and (max-width: 730px) {
    :root {
        --base-font-size: 2.7vw;
    }
}
@media screen and (max-width: 520px) {
    :root {
        --base-font-size: 3.3vw;
    }
}
@media screen and (max-width: 450px) {
    :root {
        --base-font-size: 3.6vw;
    }
}
@media screen and (max-width: 320px) {
    :root {
        --base-font-size: 0.8rem;
    }
}
body {font-family: var(--content-font); font-size: var(--base-font-size); line-height: var(--base-line-height); }
figcaption { font-size: 50%; line-height: 1.3; }
h1, h2, h3, h4, h5, h6 { font-family: var(--header-font); line-height: 1.2; }
h1 { font-size: 1.7em; }
h2 { font-size: 1.2em; }
:root { --hashtagJumpSize: 0.5em; }
@media screen and (min-height: 500px) {
    :root { --hashtagJumpSize: calc(var(--site-header-height) + 0.5em) }
}
#app > header { font-family: var(--ui-font); font-size: 90%; line-height: 1.3; }
main { }
#app > footer { font-family: var(--ui-font); font-size: 90%; }
input, button { font-family: var(--ui-font); font-size: var(--base-font-size); }
pre { font-size: 60%; line-height: 1.6; }
article .articleMetadata { font-size: 70%; }
article .enlargeable.fullscreen figcaption { font-size: 100%; }

table.photatoMessages { font-size: 80%; }

/* ======================= Generic styles ======================= */

body { margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--page-background-color); color: var(--light-text-color-medium-emphasis); }

* {box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p { margin-block-start: 1em; margin-block-end: 0.5em; }
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] { margin-top: calc(-1 * var(--hashtagJumpSize)); padding-top: var(--hashtagJumpSize); }
ul, ol { margin-block-start: 0.5em; margin-block-end: 0.5em; }
li { margin-block-start: 0.5em; margin-block-end: 0.5em; }
figure { margin: 0; }
figcaption { text-align: center; }
table { width: 100%; }
th { text-align: center; color: var(--accent-color-main); border-bottom: 2px solid var(--accent-color-main); }
img { display: inline-block; }
pre { margin-block-start: 1em; margin-block-end: 1em; white-space: pre-line; }

input[type="text"] { border: none; outline: none; border-bottom: 1px solid var(--primary-color-light); border-radius: 2px; padding-bottom: 0.1em; color: var(--dark-primary-text-color); }

button { margin-block-start: 1em; margin-block-end: 1em; margin-right: 1em; border: none; padding: 0.5em 1em; border-radius: 2px; background-color: var(--primary-color-dark); color: var(--light-text-color-high-emphasis); transition: background-color 0.1s ease; cursor: pointer; }
button:hover { background: var(--primary-color-main); }
button[disabled] { background: var(--disabled-color); color: var(--light-text-color-disabled); cursor: default;}
a, a:visited { color: var(--primary-color-light); text-decoration: none; }
a:hover, a:active { text-decoration: underline var(--accent-color-main); }
a.external { background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 562 562' version='1.1' viewBox='0 0 562 562' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m312.7 0v56.7h102.6l-280.5 280.4 40.1 40.1 280.4-280.5v102.6h56.7v-199.3z' fill='%23b28900'/%3E%3Cpath d='m455.3 455.3h-398.6v-398.6h199.3v-56.7h-199.3c-31.3 0-56.7 25.4-56.7 56.7v398.7c0 31.2 25.4 56.6 56.7 56.6h398.7c31.3 0 56.7-25.4 56.7-56.7v-199.3h-56.7c-0.1 0-0.1 199.3-0.1 199.3z' fill='%231769aa'/%3E%3C/svg%3E%0A") top right no-repeat; background-size: 0.5em; padding-right: 0.7em; }
a.external:hover { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 562 562' version='1.1' viewBox='0 0 562 562' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m312.7 0v56.7h102.6l-280.5 280.4 40.1 40.1 280.4-280.5v102.6h56.7v-199.3z' fill='%23ffc400'/%3E%3Cpath d='m455.3 455.3h-398.6v-398.6h199.3v-56.7h-199.3c-31.3 0-56.7 25.4-56.7 56.7v398.7c0 31.2 25.4 56.6 56.7 56.6h398.7c31.3 0 56.7-25.4 56.7-56.7v-199.3h-56.7c-0.1 0-0.1 199.3-0.1 199.3z' fill='%231769aa'/%3E%3C/svg%3E%0A"); }
a.callToActionButton { margin-block-start: 1em; margin-block-end: 1em; margin-right: 1em; border: none; padding: 0.5em 1em; border-radius: 2px; background: var(--primary-color-dark); color: var(--light-text-color-high-emphasis); transition: background-color 0.1s ease; }
a.callToActionButton:hover { background: var(--primary-color-main); text-decoration: none; }
a.callToActionButton.main { background: var(--accent-color-main); color: var(--dark-primary-text-color); }
a.callToActionButton.main:hover { background: var(--accent-color-light); }
div.warning { padding:2em; background: var(--warning-color); color: var(--dark-primary-text-color); }

/* Non-semantic class, so it's a bit of cheating, but makes life easier. */
.preWrap { white-space: pre-wrap; }

main { overflow: hidden; }

main > *, main .pageWidth { min-width: var(--minimum-site-width); max-width: var(--maximum-content-width); margin-left: auto; margin-right: auto; padding: 0 var(--page-vertical-padding-size); }
main > img { display:block; width:100%; }
main > .fullWidth { width: 100%; min-width: auto; max-width: none; padding: 0; }
main > ul > li {margin-left: 2em; }

article .metadata { padding-left: 5%; }

/* ======================= Site header ======================= */

/* When each site header element is displayed:

                          Logo | menu | spacer | Sign in button | Hamburger menu | Profile pic
 mobile, unauthenticated     x    popup     x            x                x
 desktop, unauthenticated    x    fixed     x            x
 mobile, authenticated       x    popup     x                             x
 desktop, authenticated      x    fixed     x                                            x
*/

/* The site header and its links */
#app > header { display: flex; align-items: stretch; min-width: var(--minimum-site-width); height: var(--site-header-height); background-color: var(--navbar-color); }
@media screen and (min-height: 500px) {
    #app > header { position: fixed; width: 100%; z-index: 10; }
    #app > main { padding-top: var(--site-header-height); }
}
#app > header a { display: block; box-sizing: border-box; height: var(--site-header-height); padding: var(--site-header-vertical-padding) 16px; text-align: center; color: var(--light-text-color-high-emphasis); text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease; }
#app > header a:hover { }
#app > header a.active { text-shadow: 0 0 1px; }
#app > header a.active .title { border-bottom: 2px solid var(--accent-color-main); text-underline-position: under; }

/* Logo and site title */
#app > header .logoContainer { flex-basis: 50px; margin-right: 1em; padding: 0; display: flex; align-items: center; }
#app > header .logo { width: var(--site-header-height); height: var(--site-header-height); padding: 8px; }
#app > header .siteTitle { height: 40%; }
#app > header a.logoContainer.active { text-shadow: none; text-decoration: none; color: var(--light-text-color-high-emphasis); }
#app > header a.logoContainer.active:hover { color: var(--light-text-color-high-emphasis); }

/* Menu (a fixed menu for desktops, a popup for narrow screens) */
#app > header nav { display: flex; flex-direction: row; visibility: visible; position: unset; background-color: var(--navbar-color); }
#app > header nav a { display: flex; }
#app > header nav a .title { position: relative; }
#app > header nav a.active .title:before { display: none; }
/* Source: https://tobiasahlin.com/blog/css-trick-animating-link-underlines/ */
#app > header nav a .title:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--accent-color-main); visibility: hidden; transform: scaleX(0); transition: all 0.1s ease-in-out 0s;}
#app > header nav a:hover .title:before { visibility: visible; transform: scaleX(1);}
#app > header nav hr { border: none; flex-grow: 1; }
#app > header nav a span.icon { display: none; }
#app > header nav a span.profile img { width: 25px; height: 25px; margin: 0; }
#app > header nav a span.title { flex-grow: 1; text-align: left; padding-left: 0; }
#app > header nav .menuItem.separator { display: none; }
#app > header nav hr { display: block; height: 2px; margin: -10px 3em 10px 16px; background-color: var(--dark-primary-text-color); }
#app > header nav .menuItem.signOut { display: none;}
@media screen and (max-width: 950px) {
    /* If narrow screen, make menu a popup */
    #app > header nav { flex-direction: column; visibility: hidden; position: absolute; z-index: 50; background: white; top: var(--site-header-height); right: 0; }
    #app > header nav.visible { visibility: visible; }
    #app > header nav a { display: flex; padding: 0; background-color: var(--light-text-color-high-emphasis); color: var(--dark-primary-text-color); }
    #app > header nav a.active { display: flex; padding: 0; text-shadow: none; background-color: var(--primary-color-main); }
    #app > header nav a:hover { background-color: var(--primary-color-lightest); color: var(--dark-primary-text-color); }
    #app > header nav a .title { display: flex; padding: var(--site-header-vertical-padding) 16px var(--site-header-vertical-padding) 0; }
    #app > header nav a .title:before { display: none;}
    #app > header nav a.active .title { border-bottom: none; }
    #app > header nav a span.icon { display: inline-block; box-sizing: content-box; width: 30px; padding: calc((var(--site-header-height) - 24px) / 2) 8px; text-align: center; color: var(--dark-primary-text-color); }
    #app > header nav .menuItem.separator { display: block; }
    #app > header nav .menuItem.signOut { display: flex;}
}

/* Spacer between left-aligned and right-aligned items */
#app > header .spacer { flex-grow: 1; }

/* Hamburger menu icon – displayed only if narrow screen */
#app > header .hamburgerMenu { display: none; cursor: pointer; padding: calc(var(--site-header-height) * 0.05); font-size: calc(var(--site-header-height) * 0.9);}
#app > header .hamburgerMenu:hover { background-color: var(--primary-color-lightest); color: var(--primary-color-dark); transition: color 0.3s ease, background-color 0.3s ease; }
@media screen and (max-width: 950px) {
    #app > header .hamburgerMenu { display: block; color: var(--light-text-color-high-emphasis); }
}

/* Authentication menu – only on narrow screens, if signed in */
#app > header img.profilePicture { width: var(--site-header-profile-pic-size); height: var(--site-header-profile-pic-size); margin: calc((var(--site-header-height) - var(--site-header-profile-pic-size)) / 2); border-radius: 50%; cursor: pointer; }
#app > header nav.authenticationMenu { visibility: hidden; }
#app > header nav.authenticationMenu.visible { visibility: visible; }
#app > header nav.authenticationMenu { flex-direction: column; visibility: hidden; position: absolute; z-index: 50; background: white; top: var(--site-header-height); right: 0; }
#app > header nav.authenticationMenu a { display: flex; padding: 0; background-color: var(--light-text-color-high-emphasis); color: var(--dark-primary-text-color); }
#app > header nav.authenticationMenu a:hover { background-color: var(--primary-color-lightest); color: var(--dark-primary-text-color); }
#app > header nav.authenticationMenu a .title { display: flex; padding: var(--site-header-vertical-padding) 16px var(--site-header-vertical-padding) 0; }
#app > header nav.authenticationMenu a .title:before { display: none;}
#app > header nav.authenticationMenu a span.icon { display: inline-block; box-sizing: content-box; width: 30px; padding: calc((var(--site-header-height) - 24px) / 2) 8px; text-align: center; color: var(--dark-primary-text-color); }
#app > header nav.authenticationMenu .menuItem.signOut { display: flex;}
@media screen and (max-width: 950px) {
    #app > header > img.profilePicture { display: none;}
    #app > header nav.authenticationMenu.visible { visibility: hidden; }
}

/* ======================= Site footer ======================= */

footer { display: flex; min-width: var(--minimum-site-width); max-width: var(--maximum-content-width); margin: 2em auto 1em; padding: 0 var(--page-vertical-padding-size); }
@media screen and (max-width: 1250px) {
    footer { margin-bottom:5em; }
}
footer .copyright { text-align: left; flex-grow: 1;}
footer .social { text-align: right; }
footer .icon { display: inline-block; padding: 0.3em 0.5em; width: 2em; height: 1em; background-size: 1em; background-repeat: no-repeat; background-position: center; opacity: 0.6; transition: opacity 0.3s ease; }
footer .icon:hover { opacity: 1; }
footer .facebook.icon { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 310 310' version='1.1' viewBox='0 0 310 310' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m81.703 165.11h33.981v139.89c0 2.762 2.238 5 5 5h57.616c2.762 0 5-2.238 5-5v-139.24h39.064c2.54 0 4.677-1.906 4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899-0.949-1.064-2.307-1.673-3.732-1.673h-44.996v-32.284c0-9.732 5.24-14.667 15.576-14.667h29.42c2.762 0 5-2.239 5-5v-47.274c0-2.762-2.238-5-5-5h-40.545c-0.286-0.014-0.921-0.037-1.857-0.037-7.035 0-31.488 1.381-50.804 19.151-21.402 19.692-18.427 43.27-17.716 47.358v37.752h-35.673c-2.762 0-5 2.238-5 5v50.844c0 2.762 2.238 5.001 5 5.001z'/%3E%3C/svg%3E"); }
footer .instagram.icon { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m256 49.471c67.266 0 75.233 0.257 101.8 1.469 24.562 1.121 37.9 5.224 46.778 8.674a78.052 78.052 0 0 1 28.966 18.845 78.052 78.052 0 0 1 18.845 28.966c3.45 8.877 7.554 22.216 8.674 46.778 1.212 26.565 1.469 34.532 1.469 101.8s-0.257 75.233-1.469 101.8c-1.121 24.562-5.225 37.9-8.674 46.778a83.427 83.427 0 0 1-47.811 47.811c-8.877 3.45-22.216 7.554-46.778 8.674-26.56 1.212-34.527 1.469-101.8 1.469s-75.237-0.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051 78.051 0 0 1-28.966-18.845 78.053 78.053 0 0 1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233 1.469-101.8c1.121-24.562 5.224-37.9 8.674-46.778a78.052 78.052 0 0 1 18.847-28.967 78.053 78.053 0 0 1 28.966-18.845c8.877-3.45 22.216-7.554 46.778-8.674 26.565-1.212 34.532-1.469 101.8-1.469m0-45.391c-68.418 0-77 0.29-103.87 1.516-26.815 1.224-45.127 5.482-61.151 11.71a123.49 123.49 0 0 0-44.62 29.057 123.49 123.49 0 0 0-29.065 44.62c-6.223 16.025-10.481 34.337-11.7 61.152-1.231 26.866-1.521 35.448-1.521 103.87s0.29 77 1.521 103.87c1.224 26.815 5.482 45.127 11.71 61.151a123.49 123.49 0 0 0 29.057 44.62 123.49 123.49 0 0 0 44.62 29.057c16.025 6.228 34.337 10.486 61.151 11.71 26.87 1.226 35.449 1.516 103.87 1.516s77-0.29 103.87-1.516c26.815-1.224 45.127-5.482 61.151-11.71a128.82 128.82 0 0 0 73.677-73.677c6.228-16.025 10.486-34.337 11.71-61.151 1.226-26.87 1.516-35.449 1.516-103.87s-0.29-77-1.516-103.87c-1.224-26.815-5.482-45.127-11.71-61.151a123.49 123.49 0 0 0-29.057-44.62 123.49 123.49 0 0 0-44.623-29.063c-16.025-6.223-34.337-10.481-61.152-11.7-26.866-1.231-35.448-1.521-103.87-1.521z' fill='%23fff'/%3E%3Cpath d='M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z' fill='%23fff'/%3E%3Ccircle cx='390.48' cy='121.52' r='30.23' fill='%23fff'/%3E%3C/svg%3E%0A"); }

/* ======================= Front page ======================= */

.frontPageSection { margin-top:2em; margin-bottom:2em; padding: 0; }
.frontPageHeader { position: relative; padding: 0.1em 0 5.5em; background: linear-gradient(135deg, var(--primary-color-darker) 0%, var(--primary-color-main) 100%); }
.frontPageHeader:after { content: ''; position: absolute; bottom: -2px; width: 100%; height: 7.5em; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 1920 304' version='1.1' viewBox='0 0 1920 304' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cmetadata%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cpath d='m0 274s199.42-199.25 579.28-124c603.7 119.59 767.59-47.24 988.45-121.65 174.18-58.679 353.63-2.4264 353.63-2.4264l-1.3646 278.07h-1920z' fill='%23101016'/%3E%3C/svg%3E%0A") no-repeat center bottom; background-size: cover; }
.frontPageHeader div { padding: 0 var(--page-vertical-padding-size); height: 100%; }
.frontPageHeader h2 { font-size: 250%; }
.frontPageHeader p { font-size: 100%; margin: 2em 0; }
.frontPageHeader p:last-child { margin-top: 2.5em; }

.threePoints { display: grid; grid-template-columns: repeat(3, calc((100% - 2em) / 3)); gap: 1em; margin-top: 3em; margin-bottom: 3em; }
.threePoints div { padding: 1em; text-align: center; background: var(--navbar-color); }
.threePoints .icon { font-size: 300%; color: var(--accent-color-main); }
@media screen and (max-width: 950px) {
    .threePoints { grid-template-columns: 100%; grid-column-gap: 1em; }
}

.frontPageMainCallToAction { text-align: center; }

/* ======================= Upload page ======================= */

/* Upload form */
#fileUpload .title input { display: block; width: 100%; margin: 1em auto; border: none; border-bottom: 2px solid var(--primary-color-dark); text-align: center; background-color: var(--page-background-color); color: var(--light-text-color-high-emphasis); }
#fileUpload .imageFileSelector { width: 50%; margin: 0 auto; }

.imageFileSelector > div { position: relative; padding-top: 100%; }
.imageFileSelector > div > * { position: absolute; width: 100%; top: 0; right: 0; bottom: 0; left: 0; }
.imageFileSelector input { z-index: 3; opacity: 0; cursor: pointer; }
.imageFileSelector .helpText { z-index: 2; display: flex; border: 2px dashed var(--light-text-color-high-emphasis); box-sizing: border-box; }
.imageFileSelector .helpText > * { margin: auto; padding: 20%; text-align: center; }
.imageFileSelector .preview { z-index: 1; display: flex; }
.imageFileSelector .preview img { max-width: 100%; max-height: 100%; margin: auto; text-align: center; }

.imageFileSelector .removeButton { z-index: 4; width: 30px; height: 30px; padding: 0; line-height: 10px; bottom: auto; left: auto; font-size: 15px; text-align: center; border-radius: 2em; background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color); cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease; }
.imageFileSelector .removeButton:hover { background: var(--accent-color); color: var(--light-text-color-high-emphasis); }

#fileUpload .selectionStatus { margin-top: 1em; }
#fileUpload .selectionStatus.error { color: var(--error-color); }

#fileUpload .uploadButton { margin-top: 1em; }

#fileUpload .uploadStatus { margin-top: 1em; }
#fileUpload .uploadStatus div { margin-top: 1em; }
#fileUpload .uploadStatus.error div { color: var(--error-color); }
#fileUpload .uploadStatus.success div { border-radius: 3px; padding: 20px; background: var(--success-color); }
@media screen and (max-width: 920px) {
    .imageFileSelector .helpText > * { padding: 5%; }
}

/* ======================= Loading screen ======================= */

/* Variables */
#fullPageLoadingIndicator {--indicatorSize: 200px; --spinnerSize: 160px; --logoSize: 80px; }

/* Full-page loading animation – Source: https://codepen.io/vreuling/pen/OXoVXA */
#fullPageLoadingIndicator { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(16, 16, 16, 0.5); }
#fullPageLoadingIndicator > div { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    width: var(--indicatorSize); height: var(--indicatorSize); }
#fullPageLoadingIndicator .spinner { position: absolute; display: block; width: var(--spinnerSize); height: var(--spinnerSize);
    top: calc((var(--indicatorSize) - var(--spinnerSize)) / 2); left: calc((var(--indicatorSize) - var(--spinnerSize)) / 2);
    border-radius: calc(var(--spinnerSize) / 2); box-shadow: 0 6px 0 0 var(--primary-color-dark); animation: spinnerAnimation 1s linear infinite; }
#fullPageLoadingIndicator > div > .logo { position: absolute; display: flex; flex-direction: column; align-items: center; width: var(--logoSize); height: var(--logoSize);
    top: calc((var(--indicatorSize) - var(--logoSize)) / 2); left: calc((var(--indicatorSize) - var(--logoSize)) / 2);
    animation: logoAnimation 1s ease-in-out infinite; }
#fullPageLoadingIndicator > div > .logo > .logo { height: 60%; margin-bottom: 10%; }

#fullPageLoadingIndicator .loadingTakingLong { top: 400px; width: 400px; max-width: 100%; text-align: center; animation: appearAnimation 0.2s ease-in-out; }

@keyframes spinnerAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes logoAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes appearAnimation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ======================= Bug report ======================= */

.bugReportButton {position: fixed;bottom: 1em;right: 1em; }
.bugReportButton a { display: block; padding: 0.6em 1em;border-radius: 1.6em; background-color:var(--primary-color-dark); color: var(--light-text-color-high-emphasis); transition: background-color 0.1s ease; }
.bugReportButton a:hover { background: var(--primary-color-main); }

/* ======================= Article elements ======================= */

.lead { position: relative; height: 400px; padding: 0; --gradient-width: 18em; }
.lead .leadImageGradient { position: absolute; width: calc(100% + 2 * var(--gradient-width)); left: calc(-1 * var(--gradient-width)); top: 0; height: 100%; background: linear-gradient(to right, var(--page-background-color) 0em, #0000 calc(var(--gradient-width)), #0000 calc(100% - var(--gradient-width)), var(--page-background-color) 100%); }
.lead .leadImage { width: 100%; opacity: 0.5; height: 100%; background-size: cover; }
.lead .leadImage { width: calc(100% + 2 * var(--gradient-width)); margin-left: calc(-1 * var(--gradient-width)); }
.lead .leadText { position: relative; height: 400px; margin-top: -400px; color: white; }
.lead .leadText > div { position: absolute; bottom: 0; right: 0; left: 0; padding: var(--page-vertical-padding-size); }
.lead .leadText > div h1 { margin-top: 0; }

/* Page-width figure */
article .simpleFigure { display: table; margin: 0 auto; }
article .simpleFigure figure { width: 100%; }
article .simpleFigure img { width: 100%; }

/* Figures that pop up a bit on mouse hover */
article .figures { display: flex; width: fit-content; max-width: 100%; margin: 0 auto; }
article .zoomOnHover img { width: 100%; height: 100%; transition: transform ease-in-out 0.3s; }
article .zoomOnHover img:hover { transform: scale(1.1); }
article .zoomOnHover.enlargeable.fullscreen img:hover { transform: none; }

/* Enlargeable elements */
article .enlargeable { display: table; margin: 0 auto; }
article .figures .enlargeable { display: inline-block; width: 300px; margin: 0 30px; transition: all 1s ease-in-out; }
article .enlargeable figure { background-color: var(--page-background-color); }
article .enlargeable.fullscreen figure { position: fixed; z-index: 1; cursor: pointer; transition: all 0.3s ease-in-out; }
article .enlargeable.fullscreen figcaption { position: absolute; bottom: 0.2em; width: 50%; left: 50%; transform: translateX(-50%); padding: 0.2em; z-index: 2; text-align: center; background: #0005; color: var(--light-text-color-high-emphasis); transition: all 0.5s ease-in-out; }
article .enlargeable.fullscreen img { object-fit: contain; }

/* Image comparison */
.imageComparison { --slider-size: 40px; }
.imageComparison { margin: 0 auto; max-width: 100%; }
.imageComparison figure { position: relative; display: block; overflow: hidden; width: 100%; }
.imageComparison figure > .primary img { display: block; width: 100%; }
.imageComparison figure > .overlay { position: absolute; width: 100%; top: 0; bottom: 0; }
.imageComparison figure > .overlay img { width: 100%; height: 100%; object-fit: cover; object-position: right; }
.imageComparison figure > .slider { position: absolute; z-index: 2; width: var(--slider-size); height: var(--slider-size);
    background-color: var(--primary-color-dark); opacity: 0.7; border-radius: 50%; transform: translateX(-50%); cursor: ew-resize; }

/* Notes and tips */
article .note { padding: 15px; border: 1px solid var(--primary-color-main); border-radius: 2px; background-color: var(--primary-color-dark); }
article .tip { padding: 15px; border: 1px solid var(--accent-color-main); border-radius: 2px; background-color: var(--accent-color-dark); }

.youTubeVideoContainer { display: table; margin: 0 auto; }

/* ======================= Other stuff ======================= */

dl.faqList dt { margin-block-end: 0.5em; }
dl.faqList dd { margin-left: 0; }
.faqItem { padding-top: calc(var(--site-header-height) + 2em); margin-top: calc(-1 * var(--site-header-height)); }

table.photatoMessages { border: 1px solid white; }
table.photatoMessages td { text-align: center; }
table.photatoMessages td:nth-child(6) { text-align: left; }
table.photatoMessages tr.today { background-color:var(--error-color-30-percent); }
table.photatoMessages tr.soon { background-color:var(--warning-color-30-percent); }

table.adminPhotoListForWeek { font-size: 8pt; }
.weekIndexSelector { display: flex; }
.weekIndexSelector a { display:inline-block; flex-grow: 1; }

pre.sitemap { white-space: pre-wrap; }

img.emoji { box-sizing: content-box; width: 0.8em; padding: 0 0.1em; }

.website-history td:first-child { width:7em; }
.website-history tr td { border-bottom:1px solid var(--paper-background-color); }
.website-history tr:last-child td { border:none; }