::selection {
    background-color: var(--bg-hl-alt-intense);
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
    color: var(--fg-main);
    background-color: var(--bg-main);
    font-family: "Iosevka Aile", sans-serif;

    margin: 4em auto;
    max-width: 90%;
    line-height: 1.5;
}

h1 { color: var(--fg); }
h2 { color: var(--fg-special-warm); }
h3 { color: var(--fg-special-cold); }
h4 { color: var(--fg-special-mild); }
h5 { color: var(--fg-special-calm); }
h6 { color: var(--yellow-nuanced-fg); }

h1, h2, h3, h4, h5, h6, .title {
    font-family: "Iosevka Etoile", serif;
}

hr { color: var(--fg-alt); }

a { color: var(--blue-alt-other); }
a:hover, a:focus {
    color: var(--fg-dim);
    background-color: var(--blue-subtle-bg);
}
a:visited { color: var(--cyan); }
a:visited:hover, a:visited:focus {
    color: var(--fg-dim);
    background-color: var(--cyan-subtle-bg);
}

img {
    display: block;
    max-width: 100%;
    box-shadow: var(--bg-inactive) 0px 0px 0px 1px,
                var(--fg-inactive) 0px 0px 0px 1px inset;
}

#login-form input, .alert {
    color: var(--fg-main);
    background-color: var(--bg-main);
    border: 1px var(--bg-active) solid;
    padding: 0.5em;
    margin: 0.4em;
    min-width: 30%;
}

img { width: 400px; }
.heading, .text, .directory { width: 380px; }
@media only screen and (min-width: 768px) {
    .heading { margin-left: -20px; }
}
@media only screen and (max-width: 512px) {
    img { width: 368px; }
    .heading, .text, .directory { width: 350px; }
}
@media only screen and (max-width: 450px) {
    img { width: 350px; }
    .heading, .text, .directory { width: 330px; }
}
@media only screen and (max-width: 400px) {
    img { width: 330px; }
    .heading, .text, .directory { width: 310px; }
}
.heading {
    box-shadow: var(--blue-intense-bg) 0px 0px 0px 2px inset,
                var(--bg-main) 10px -10px 0px -3px,
                var(--green-subtle-bg) 10px -10px,
                var(--bg-main) 20px -20px 0px -3px,
                var(--yellow-intense-bg) 20px -20px,
                var(--bg-main) 30px -30px 0px -3px,
                var(--red-subtle-bg) 30px -30px,
                var(--bg-main) 40px -40px 0px -3px,
                var(--red-intense-bg) 40px -40px;
    padding: 1em;
}
.text {
    box-shadow: var(--magenta-intense-bg) 0px 0px 0px 3px,
                var(--green-subtle-bg) 0px 0px 0px 6px,
                var(--yellow-intense-bg) 0px 0px 0px 9px,
                var(--red-subtle-bg) 0px 0px 0px 12px,
                var(--red-intense-bg) 0px 0px 0px 15px;
    padding: 1em;
}
.directory {
    box-shadow: var(--bg-special-cold) 0px 0px 0px 3px,
                var(--bg-special-calm) 0px 0px 0px 6px;
    padding: 1em;
}
.directory:hover {
    background-color: var(--bg-alt);
}
.directory:before {
    content: '📁 ';
}
.directory:hover:before {
    content: '📂 ';
}

#gallery {
    margin: auto;
}
#gallery img {
    transform-origin: center;
    transition: 0.5s;
}
#gallery:hover img { opacity: 0.5; }
#gallery img:hover {
    transform: scale(1.1);
    box-shadow: var(--bg-active) 0px 20px 30px -10px;
    opacity: 1;
}
.alert {
    background-color: var(--red-subtle-bg);
}
#loading-progress, #loading-error { margin-bottom: 2em; }
#loading-error { display: none; }
#loading-error button {
    float: right;
    color: var(--fg-main);
    background-color: var(--bg-main);
    border: 1px var(--bg-active) solid;
    padding: 0.25em 1em;
}
#loading-progress { width: 100%; }