body {
opacity: 0;
font-family: Montserrat, sans-serif;
font-size: 1.25rem;
color: rgba(255,255,255,0.98);
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
overflow: hidden;
background-color: #bbe2ff;
overscroll-behavior-y: none;
}
html {
height: -webkit-fill-available;
}
.background {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background: url('data:image/svg+xml,')
no-repeat center center fixed;
;
background-size: cover;
background-blend-mode: multiply;
}
.background:before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background: url('data:image/svg+xml,')
no-repeat
center center
fixed
;
mix-blend-mode: multiply;
background-size: cover;
}
@media (prefers-reduced-motion) {
.background, .background:before {
background: #6c9dc2;
}
}
main {
filter: contrast(120%) saturate(75%);
position: absolute;
width: 80%;
max-width: 60rem;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: calc(100% - 7.8rem);
margin-top: 3.9rem;
margin-bottom: 3.9rem;
background: rgba(255, 255, 255, 0.05) linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2%, rgba(128, 122, 117, 0.25) 33%, rgba(128, 122, 117, 0.25) 50%, rgba(128, 122, 117, 0.25) 67%, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0));
box-shadow: 0 8px 32px 0 #1f26875e;
box-shadow: inset 1px 1px 0.12px #ffffff66, 1px 1px 3px #0000001a;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 5px;
border: 0.5px #ffffff2e;
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 18px rgba(0, 0, 0, 0.075),
inset 0px 0px 26px 10px rgba(244, 220, 210,0.02);
overflow: hidden;
}
main > .scrollable {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
margin: 1rem;
padding: 2.333rem;
}
.scrollable {
--scrollbar-width: 0.667rem;
--mask-height: 3.33rem;
padding-bottom: var(--mask-height);
--mask-image-content: linear-gradient( to bottom, transparent, black var(--mask-height), black calc(100% - var(--mask-height)), transparent );
--mask-size-content: calc(100% - var(--scrollbar-width)) 100%;
--mask-image-scrollbar: linear-gradient(black, black);
--mask-size-scrollbar: var(--scrollbar-width) 100%;
-webkit-mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
-webkit-mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
-webkit-mask-position: 0 0, 100% 0;
-webkit-mask-repeat: no-repeat, no-repeat;
-moz-mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
-moz-mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
-moz-mask-position: 0 0, 100% 0;
-moz-mask-repeat: no-repeat, no-repeat;
mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
mask-position: 0 0, 100% 0;
mask-repeat: no-repeat, no-repeat;
scrollbar-gutter: stable both-edges;
}
/* Firefox */
.scrollable {
scrollbar-width: auto;
scrollbar-color: #a1bacd #74a2c5;
}
/* Chrome, Edge, and Safari */
.scrollable::-webkit-scrollbar {
width: 0.667rem;
}
.scrollable::-webkit-scrollbar-track {
background: transparent;
}
.scrollable::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255, 0.25);
border-radius: 10px;
width: 1rem;
background-clip: content-box;
}
@keyframes fadeIn {
0% {
display: none;
opacity: 0;
}
100% {
display: block;
opacity: 0.5s;
}
}
main > .back.button {
animation: fadeIn 0.5s ease-out;
}
section {
clear: both;
display: none;
}
section.open {
display: block;
}
article {
margin-bottom: 2rem;
}
p {
margin-top: 0.667rem;
margin-bottom: 0.667rem;
}
h1 { font-size: 3.052rem; letter-spacing: 0.133rem; font-weight: bold; font-variant: small-caps; text-shadow: 0px 0px 4px #fff; text-align: center;
}
h2 {font-size: 1.953rem; font-style: italic; margin: 1rem 0; user-select: none}
h2:before, h2:after {
content: '';
display: inline-block;
vertical-align: middle;
width: 1.333rem;
height: 1px;
border-top: 1px solid #bbb;
border-left: 2px solid #bbb;
border-bottom: 1px solid #fff;
filter: blur(0.333px);
border-right: 2px solid #fff;
}
h2:before {
margin-right: 0.333rem;
}
h2:after {
margin-left: 0.333rem;
}
h3 {font-size: 1.563rem; font-weight: bold; margin: 0.667rem 0;}
h4 {font-size: 1.563rem;}
h5 {font-size: 1.25rem;}
.answered {font-style: italic}
.answered ~ * {font-size: 1rem}
main header p {
text-align: center;
font-style: italic;
opacity: 0.86;
}
a-line {
display: flex;
align-items: center;
text-align: center;
margin: 0.66rem 0;
filter: blur(0.333px);
}
a-line:before, a-line:after {
content: '';
flex: 1;
border-top: 1px solid #bbb;
border-bottom: 1px solid #fff;
}
a-line:before {
border-left: 2px solid #bbb;
}
a-line:after {
border-left: 2px solid #fff;
}
a-line:before:not(:empty) {
margin-right: 0.5em;
}
a-line:after:not(:empty) {
margin-left: 0.5em;
}
main nav {
text-align: center;
margin-bottom: 1.333rem;
user-select: none;
}
nav ul li {
display: inline-block;
}
nav ul li:not(:last-child):after {
content: '|';
margin: 0.667rem;
padding: 0;
}
a[href] {
cursor: pointer;
}
i,em {font-style:italic}
.back.button {
position:absolute;
top: 0.667rem;
left: 0.667rem;
width: 1.5rem;
height: 1.5rem;
z-index: 2;
background: url('back-button.svg');
background-size: cover;
opacity: 0.5;
filter: drop-shadow(0 0 1.5px #fff);
}
.back.button:hover, .back.button:focus {
opacity: 1;
filter: drop-shadow(0 0 1px #fff);
transition: opacity 0.3s ease-in;
}
a:focus {
outline: 2px solid rgba(255,255,255,0.333);
outline-offset: 2px;
border-radius: 3px;
}
a[href^="http"], a[href^="./"] {
text-decoration: rgba(255,255,255, 0.5) underline;
}
a[data-lightbox] {
display: inline-block;
margin-top: 0.667em;
margin-right: 0.333em;
padding-top: 0.3rem;
}
a[data-lightbox] > img {
border-width: 2px;
border-style: outset;
opacity: 0.667;
}
dialog.lightbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: max-content;
height: max-content;
}
dialog.lightbox::backdrop {
background-color: rgba(0,0,0,0.94);
}
#sigma-img1 img {
object-fit: cover;
width: 100%;
height: calc(100vh - 0.25rem);
height: calc(100svh - 0.25rem);
max-height: -webkit-fill-available;
}
figure {
width: 500px;
}
figure > a:first-child {
display: block;
width: max-content;
height: max-content;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
figure img {
opacity: 0.667;
}
figure img.outset {
border-width: 2px;
border-style: outset;
}
figure img.dim.outset {
border-color: rgba(255,255,255,0.3);
}
figure a img:hover, a:focus img, a[data-lightbox] img:hover {
opacity: 0.94;
transition: opacity 0.15s ease-in;
}
figcaption {
opacity: 0.667;
}
figcaption :not(:first-child) {
font-size: 1rem;
}
figcaption :first-child * {
font-size: 1.25rem;
}
figcaption ul {
text-align: right;
}
figcaption ul li {
display: inline-block;
}
figcaption ul li:not(:last-child):after {
content: ',';
margin-right: 0.5em;
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.right.aligned {
text-align: right;
}
.right.floated ~ * {
clear: both;
}
.right.floated {
float: right;
clear: initial;
}
ul.inline {
padding-left: 0.75rem;
}
ul.inline > li {
display: inline;
padding-right: 0.75rem;
}
ul.disc > li:before {
content: "\2022";
padding-right: 0.75rem;
font-size: 1.953rem;
position: relative;
top: 0.125rem;
}
a-fleuron:before {
display: inline-block;
content: "\2767";
font-size: 1.87rem;
text-shadow: 0px 0px 4px #fff;
margin-left: 0.675rem;
margin-right: 0.675rem;
opacity: 0.675;
}
.fleuron {
text-align: center;
clear: both;
}
.mobile-fleuron {
display: none;
}
#SIGMA, #HERMES {
margin-bottom: 0.667rem;
}
.left.padded {
padding-left: 0.115rem;
}
@media (max-width:715px) {
html {
font-size: 0.83em;
}
main {
width: 98%;
margin-top: 1.5%;
margin-bottom: 0;
height: 98%;
}
.back.button {
width: 2.66rem;
height: 2.66rem;
}
nav ul li {
display: block;
width: 50%;
margin-top: 0.133rem;
}
nav ul li:after {
display: none;
}
nav ul li:nth-child(even) {
text-align: left;
margin-left: calc(50% - 1.33rem);
}
nav ul li:nth-child(odd) {
text-align: right;
margin-left: 0.33rem;
}
.mobile-fleuron {
display: flex;
font-size: 1.7rem;
text-shadow: 0px 0px 4px #fff;
margin-top: -1.23rem;
}
.prefleuron, .fleuron {
display: none;
}
a-fleuron:before {
opacity: 0.75;
}
figure {
width: 100%;
}
figure img {
width: 80vw;
}
.right.floated {
float: none;
clear: none;
}
a[data-lightbox] {
margin-left: auto;
margin-right: auto;
display: block;
width: fit-content;
}
article:last-child {
margin-bottom: 4rem;
}
}
@media (max-width:411px) {
html {
font-size: clamp(0.1rem, 2.3vw + 0.1rem, 1rem);
}
}
@media (max-width:177px) {
html {
font-size: clamp(0.1rem, 1.5vw + 0.1rem, 1rem);
}
h1 {
font-size: calc(1rem + (100vw / 33))
}
}
@media (max-height:715px) and (orientation:landscape) {
main {
margin-top: 1.5%;
height: 94%;
}
.lightbox img {
height: 100vh !important;
height: 100svh !important;
}
}
@media (orientation:portrait) {
.lightbox img {
width: 100vw !important;
height: fit-content !important;
}
}