/* @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap'); */

@font-face {
    font-family: 'Jost';
    src: url('fonts/jost/Jost-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: 'Jost';
    src: url('fonts/jost/Jost-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* @font-face {
    font-family: 'EB Garamond';
    src: url('fonts/eb_garamond/ebgaramond-variablefont_wght.woff2') format('woff2'),
         url('fonts/eb_garamond/ebgaramond-variablefont_wght.woff') format('woff');
    font-weight: 400 800;
    font-style: normal;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('fonts/eb_garamond/ebgaramond-italic-variablefont_wght.woff2') format('woff2'),
         url('fonts/eb_garamond/ebgaramond-italic-variablefont_wght.woff format') format('woff');
    font-weight: 400 800;
    font-style: italic;
}
@font-face {
    font-family: 'Pixelify Sans';
    src: url('fonts/pixelify_sans/PixelifySans-VariableFont_wght.ttf') format('truetype');
} */

* {
    /* outline: 1px solid; */
}

body {
    /* background-color: black; */
    /* background-color: #F4EFEC; */

    font-size: 12px;
    /* font-family: serif; */
    /* font-family: monospace; */
    font-family: 'Jost', sans-serif;
/* 
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center; */
    min-height: 100vh;

    /* min-width: 30em; */
    max-width: 100%;
    /* max-height: 100vh; */
    /* height: 100vh; */
}

main {
    /* flex: 1 1; */
    /* border: .2em solid; */
    /* border-radius: 0 0 0 1em; */

    /* max-width: min(48ch, 100%); */

    /* margin: .5em; */
    /* padding: .5em; */
    /* max-height: calc(100vh - 1em); */
    /* overflow-y: scroll; */
    /* max-height: min(48ch, 100vh); */
    /* aspect-ratio: 1/1; */
}
main *:last-child {
    margin-bottom: 0;
}

h1 {
    /* text-align: center; */
    text-align: left;
    letter-spacing: .25em;
    /* letter-spacing: .5em; */
    /* padding-left: .25em; */

    /* font-size: 1em; */
    font-size: 4em;
    font-weight: 300;

    margin-top: 1em;
    margin-bottom: 1em;

    background-clip: text;
    /* background: linear-gradient(to right, transparent, cornflowerblue); */
}

h2 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}
h2::before {
    content: "「 ";
}
h2::after {
    content: " 」";
}

p {
    text-align: justify;
    margin-top: 1em;
    margin-bottom: 1em;
}

img {
    /* margin: 1em auto; */
    margin-left: auto;
    margin-right: auto;
    /* width: auto; */
    height: auto;
}

nav {
    text-align: right;
}

a {
    color: inherit;
    text-decoration: none;
}
a::before { content: "["; }
a::after  {content: "]"; }
a:hover {
    text-decoration: underline;
}

/* figure {
    border: 1px solid;
    text-align: center;
    width: fit-content;
    margin: 1em auto;
    padding: 0.25em;
} */

pre, code {
    font-family: monospace;
}

.pixeltext {
    font-family: 'Pixelify Sans', monospace;
}

.widetext {
    letter-spacing: .25em;
    padding-left: .25em;
}

.lbox {
    /* background-color: white; */
    border: .2em solid;
    border-radius: 0 0 0 1em;
    padding: .5em;
    /* overflow-y: scroll; */
    flex-basis: 30em;
}

.rbox {
    /* background-color: white; */
    border: .2em solid;
    border-radius: 0 0 0 0;
    padding: .5em;
    /* overflow-y: scroll; */
}

.sbox {
    /* border: .2em solid; */
    border-radius: 0 0 0 0;
    padding: .5em;

    writing-mode: vertical-rl;
    background: linear-gradient(to bottom, transparent, cornflowerblue);
}

.sqbox {
    /* background-color: white; */
    border: .2em solid;
    border-radius: 0 0 0 0;
    padding: .5em;
    aspect-ratio: 1/1;
}

.ccon {
    display: flex;
    /* flex-flow: row wrap; */
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: center;
    /* min-height: 100vh; */
}

.hcon {
    display: flex;
    /* flex-flow: row wrap; */
    flex-flow: row nowrap;
    align-items: stretch;
    /* align-items: start; */
    justify-content: center;
    gap: .5em;
    /* outline: 1px solid blue; */
    /* width: 100%; */
    /* width: max-content; */
}

.pagemargin {
    margin: .5em;
}

.pageheight {
    max-height: 50vh;
}

.scrollbox {
    overflow-y: scroll;
}

.relative {
    position: relative;
}

.bottomright {
    /* position: absolute; */
    /* bottom: .5em; */
    /* right: .5em; */

    position: relative;
    margin: .5em 0;
    bottom: 0;
    right: 0;
}

.maxheight {
    max-height: 100%;
}

.gay {
    border: .2em transparent;
    position: relative;
    background-color: white;
    background-clip: padding-box;
}
.gay::before {
    content: "";
    background: linear-gradient(to bottom, hotpink, cornflowerblue);
    position: absolute;
    left: -.2em;
    right: -.2em;
    top: -.2em;
    bottom: -.2em;
    z-index: -1;
    border-radius: inherit;
}

.glass {
    /* background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(5px); */
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(10px);
}
.blackglass {
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(5px);
}

details.gallery {
    /* border-left: .2em solid; */
    border: .2em solid;
    margin: 1em 0;
    /* padding: 0 .5em; */
    /* background-color: darkcyan; */
    /* background: linear-gradient(.1turn, red, blue) */
}

details.gallery img:not(.rawgalleryimg) {
    margin: 1em auto;
    border: .2em solid;
    box-shadow: -.25em .25em 0 black;
    background-color: white;

    max-height: calc(100vh - 2em);
}

details.gallery div {
    /* margin-left: 1em; */
    margin: 1em;
    /* padding: 1em; */
    /* padding-bottom: 1em; */
}

details.gallery summary {
    /* margin-left: .5em; */
    padding-left: .5em;
    color: white;
    background-color: black;
    font-weight: 700;

    /* cool trick */
    position: sticky;
    top: -.5em;
}


details.gallery audio {
    display: block;
    width: 100%;

    margin: 1em auto;
    border: .2em solid;
    box-shadow: -.25em .25em 0 black;

    /* background: linear-gradient(.4turn, lemonchiffon, #f6358a); */
    /* padding: .5em; */
}

ul {
    list-style-position: outside;
    padding-left: 1em;
}
ol {
    list-style-position: outside;
    padding-left: 1.2em;
}

hr {
    height: 2em;
}