/*
article div.logo{
  background-color: red;
  padding: 1rem;
  font-size: 2em;
  text-transform: uppercase;
  line-height: 1;
}
*/

/*
#newlogo {
transform: rotate(-1deg);
mix-blend-mode: screen;
letter-spacing: -1px;
background: white;
font-size: 1.2em;
padding: 0.5em;
display: flex;
flex-direction: column;
line-height: 1.1;
font-weight: 400;
border-radius: 2px;
justify-self: center;
}
#newlogo > div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#newlogo div:first-child > span:nth-child(2) {
padding: 0 0em;
}
#newlogo > div:nth-child(2) {
letter-spacing: 0px;
margin-bottom: 0.2em;
}
#newlogo div:nth-child(1),
#newlogo div:nth-child(2) {
letter-spacing: 2px;
display: inline-flex;
border-bottom: 3px solid;
}
 */

:root {
        --headlines: 2em;
        --background: #ffffff;
        --typo: #333333;
        --primary: #02fbcb;
        --secondary: #ff026a;
}

@font-face {
        font-weight: 800;
        font-family: "GT-Super-Display";
        src: url("gtsuper/GT-Super-Display-Bold.woff2");
}

@font-face {
        font-weight: 800;
        font-style: italic;
        font-family: "GT-Super-Display";
        src: url("gtsuper/GT-Super-Display-Bold-Italic.woff2");
}

@font-face {
        font-family: "GT-Super-Display";
        font-style: italic;
        src: url("gtsuper/GT-Super-Display-Light-Italic.woff2");
}

@font-face {
        font-family: "GT-Super-Display";
        src: url("gtsuper/GT-Super-Display-Light.woff2");
}

@font-face {
        font-family: "GT-Super-Text";
        src: url("gtsuper/GT-Super-Text-Book.woff2");
}

@font-face {
        font-family: "GT-Super-Text";
        font-style: italic;
        src: url("gtsuper/GT-Super-Text-Book-Italic.woff2");
}

@font-face {
        font-weight: 600;
        font-family: "GT-Super-Text";
        src: url("gtsuper/GT-Super-Text-Bold.woff2");
}

@font-face {
        font-weight: 600;
        font-family: "GT-Super-Text";
        font-style: italic;
        src: url("gtsuper/GT-Super-Text-Bold-Italic.woff2");
}

body {
        background: var(--background);
        color: var(--typo);
        font-family: "GT-Super-Text";
        line-height: 1.5;
}

body.black:after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: black;
        z-index: 9999999999;
}

* {
        padding: 0;
        margin: 0;
}

::selection {
        background: var(--primary);
}

::-moz-selection {
        background: var(--primary);
}

#newsletter {
}

#newsletter form:not(:focus-within) input[type="submit"] {
        opacity: 0;
}

#newsletter form {
        max-height: 100vh;
        transition: max-height 0.5s ease;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
}

#newsletter form input {
        font-size: inherit;
        background: var(--primary);
        display: inline-block;
        margin: 0 0.1em 0 0;
        border: none;
        border-bottom: 1px solid;
        padding: 1rem 1em;
        border-radius: 0;
        transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
        cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
        border: 1px solid;
        -webkit-box-shadow: 0 0 0px 1000px var(--primary) inset;
        transition: background-color 5000s ease-in-out 0s;
}

#newsletter form input[type="email"] {
        flex-grow: 1;
        padding-top: 30vh;
        margin-top: 10vh;
}

#newsletter form input[type="email"]:focus {
        background: var(--primary);
}

#newsletter form.success + #thanks {
        max-height: 15em;
}

#newsletter form.busy {
        filter: blur(2px);
}

#newsletter form.success {
        overflow: hidden;
        max-height: 0;
}

#newsletter input[type="submit"] {
}

#newsletter input[type="submit"]:hover {
        background: black;
        color: white;
}

#newsletter a {
        font-size: 2em;
        text-decoration: none;
        padding: 1em;
}

#newsletter #thanks {
        overflow: hidden;
        max-height: 0em;
        transition: max-height 0.3s ease 0.5s;
}

#colorForm {
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        padding: 1em;
        z-index: 999999;
}

#colorForm label {
        border-radius: 2em;
        overflow: hidden;
        width: 2em;
        height: 2em;
        display: flex;
        margin: 0.5em;
        justify-content: center;
        align-items: center;
        box-shadow: 5px 6px 3px rgba(0, 0, 0, 0.2);
}

#colorForm input[type="color"] {
        border: none;
        outline: 0;
        min-width: 55px;
        min-height: 55px;
}

.fn:after {
        content: attr(data-count);
        font-weight: 800;
        font-size: 0.7em;
        padding: 0 0.2em;
        vertical-align: top;
}

input.linklisttoggle,
input.linklisttoggle:not(:checked) + label + ul {
        display: none;
}

input.linklisttoggle:checked + label:after {
        content: "-";
        padding-left: 0.5em;
}

input.linklisttoggle:not(:checked) + label:after {
        content: "+";
        padding-left: 0.5em;
}

input.linklisttoggle + label {
        cursor: pointer;
        grid-column: sidebar;
        text-align: right;
        z-index: 9999999;
        padding: 1em 2em;
        margin-top: 10em;
        background: var(--background);
}

ul.linklist {
        margin-top: 10em;
}

ul.linklist li {
        list-style-type: none;
        word-break: break-all;
}

article div.logo span {
        display: block;
        background: yellow;
        border: 1px solid blue;
}

#list h2:focus + h3,
:focus {
        outline: 0;
}

body {
        background: var(--background);
        color: var(--typo);
        font-family: "GT-Super-Text";
        line-height: 1.5;
}

@keyframes slider {
        0% {
                transform: translateX(0%) scale(0, 1);
        }
        30% {
                transform: translateX(0%) scale(1, 1);
        }
        70% {
                transform: translateX(100%) scale(1, 1);
        }
        100% {
                transform: translateX(100%) scale(0, 1);
        }
}

@keyframes logodrop {
        from {
                transform: translateX(-50%) rotate3d(0, 1, 0, 270deg);
        }

        to {
                transform: translateX(-50%) rotate3d(0, 1, 0, 0deg);
        }
}

@keyframes fadein {
        from {
                opacity: 0;
        }
        to {
                opacity: 1;
        }
}

a {
        color: inherit;
}

.bignav a.h2,
#newsletter form > input,
#newsletter #thanks p,
h1,
h2,
article > blockquote,
footer p {
        font-family: "GT-Super-Display";
}

header > a {
        margin: 0 auto;
        text-decoration: none;
        z-index: 9999999;
}

header > figcaption {
        opacity: 0;
        grid-row: 1 / 3;
        grid-column: 3;
        color: var(--background);
        margin: 0.1em;
        padding: 2em 1em;
        transform: rotate(180deg);
        justify-self: flex-end;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 0.5em;
        display: inline-block;
        align-self: baseline;
        position: sticky;
        top: 1em;
        transition: opacity 0.4s ease 0.2s;
        user-select: none;
        pointer-events: none;
        display: none;
}

header:hover > figcaption {
        opacity: 1;
}

body.debug article > nav a,
body.debug article > h1,
body.debug article > h2,
body.debug article > h3,
body.debug article > h6,
body.debug article > li,
body.debug article > blockquote,
body.debug article > p,
body.debug nav > *,
body.debug article > ul {
        background-image: url("frame.svg");
}

img {
        max-width: 100%;
        max-height: 100vh;
}

video {
        max-width: 100%;
}

strong {
        font-weight: 800;
}

del {
        background: currentColor;
        padding: 0.24em;
}

#TableOfContents > ul {
        list-style: none;
        padding: 1rem;
}
#TableOfContents li {
        list-style: none;
}

#TableOfContents a {
        padding: 0.5em 0;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid transparent;
}

#TableOfContents a:before {
        content: "↓";
        padding-right: 1em;
}

#prolitteris {
        visibility: hidden;
}

article {
        display: flex;
        flex-direction: column;
        counter-reset: img;
        scroll-snap-type: y mandatory;
}
h2#news:after{
background: red;
   display: none;
}

article > header {
        order: -1;
}

article > nav.toplevel {
        grid-area: nav;
        order: -1;
}

article > nav a.active {
        position: relative;
        font-style: italic;
}

article > header > figure > video,
article > header > figure > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
}

article > header > figure {
        order: -3;
        grid-area: header;
        height: calc(100vh * 0.618);
        min-height: 24em;
        margin-bottom: 3em;
}

article > header > a {
        max-width: 7em;
        display: flex;
        align-items: center;
        margin: 0;
        transform: translate(-50%, 0);
        position: absolute;
        left: 50vmin;
        top: 50vmin;
}

article > header > a > svg {
        width: 100%;
        fill: var(--background);
        overflow: hidden;
}

article > header > a:hover {
        transform: translate(-50%, 0) scale(1.1);
}

article > time {
        padding: 1em;
        grid-area: timestamp;
}

/*
article > p > a{
	word-break: break-all;
}

header figure:after{
content: '';
height: 100px;
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
background-size: 100px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   width="10" height="10"><path d="M5,5L0,8L0,10L10,10" style="fill:white;"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"   width="10" height="10"><path d="M0,0L0,10L10,10" style="fill:white;"/></svg>');

}

 */

header figure {
        position: relative;
        aaaanimation: fadein 0.3s ease 0.2s both;
}
header figure svg {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10em;
        width: 100%;
}

.bignav a.h2,
article > h1,
article > h2,
article > h6,
#newsletter,
article > blockquote > p,
footer {
        font-size: 1.7em;
        font-weight: normal;
        line-height: 1.1;
}

article > h1 {
        padding: 2rem 1rem;
        font-weight: 600;
        overflow: hidden;
        order: -1;
}

article > h1:first-of-type {
        grid-area: title;
}

h1,
h2,
h3,
h4,
h5,
h6,
figure,
img,
blockquote,
table,
p {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
}

article > h2 {
        padding: 2em 1rem 1em;
}

article h4,
article h3 {
        padding: 1em 1em 0;
        font-size: 1em;
        font-weight: 800;
}

article > p + h5:before,
article > h3 + h5:before {
        content: "";
        height: 2em;
        grid-column: 1 / -1;
        padding-top: 2em;
}

article figure > div {
        line-height: 0;
}

article > pre > code {
        display: inline-block;
        padding: 1rem 1rem 2rem;
        font-size: 0.7em;
        white-space: pre-line;
}

article > nav > a {
        padding: 2em 1em;
        text-decoration: none;
}

article > nav > p {
        padding-top: 1em;
}

article > h5 {
        margin-top: 2em;
        padding-top: 5em;
}

article > h5 figure,
article > h5 img {
        z-index: 9999;
}

h6 > figure:nth-last-of-type(n + 2) + figure {
        height: 50%;
}

h6 > figure:nth-last-of-type(n + 2),
h6 > figure:nth-last-child(n + 2) + h6 > figure {
        height: 50%;
        transform: translate(0, 100%);
}

article > h5 > figure:first-child,
article > h5 > img:first-child {
        grid-column: 1 / -1;
        align: end;
}

article figure > figcaption {
        padding: 1rem;
        transform-origin: left top;
        font-weight: 400;
        font-size: 0.7rem;
}

article > h6 + blockquote {
        background: var(--primary);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

article > h6.black {
        background: black;
        color: var(--background);
}

article > h6.black strong {
        color: black;
}

article > h6.green {
        background: var(--primary);
}

article > h6.pink {
        color: var(--background);
        background: var(--secondary);
}
article > h6.pink strong {
        color: var(--secondary);
}

article > h6 + ol {
        display: block;
        list-style-position: inside;
        flex-direction: column;
        background: tomato;
        min-height: calc(100vh - 1rem);
        list-style: unset;
}

article > h6 + ol li {
        font-size: 2em;
        display: block;
}

article > h6 + ul,
article > h6 + * + ul,
article > h6 {
        background: var(--background);
        z-index: 9999999;
        position: relative;
        min-height: calc(100vh - 1rem);
        line-height: 1;
        padding: 1rem;
        font-family: "GT-Super-Display";
        scroll-snap-align: start;
}

article > h6 + ul,
article > h6 + * + ul {
        font-family: "GT-Super-Text";
        line-height: 1.2;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

article > h6 + ul > li,
article > h6 + * + ul > li {
        list-style-type: none;
        display: block;
}

article > h6 {
        font-weight: 900;
}

article > h6 em {
        font-weight: 200;
}

article > h6 strong {
        background-color: var(--background);
}

article > h6 > figure {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
}

article > h6 figure div {
        height: 100%;
        width: 100%;
}

article > h6 em > figure {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
        width: 50vmin;
        height: 50vmin;
        object-fit: cover;
        object-position: center;
}

article > h6 figcaption {
        transform-origin: right bottom;
        background: var(--background);
        padding: 1rem;
        font-size: 1rem;
        position: absolute;
        right: 0;
        bottom: 0;
}

article > h6 em > figure figcaption {
        display: none;
}

article > h6 figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
}

article > h6 + ul > li:nth-child(3n + 2) {
        grid-column-end: span 2;
        grid-row-end: span 2;
}

article > h5,
#list,
#list > a {
        display: contents;
}

article > h5 + p {
        padding-top: 1em;
}

.footnotes {
        font-size: 0.7em;
}

twitter-widget {
        padding: 3em 0;
}

article > ol {
        display: flex;
        flex-direction: column;
        padding: 5em 0.5em;
        list-style: none;
        background: var(--background);
        z-index: 99999;
}

article > ol > li > ul {
        list-style: none;
        flex-grow: 1;
}

article > ol > li > ul > li {
        padding: 0.7em 0 0.1em;
}

article > ol > li > ul > li {
        border-bottom: 1px dotted;
}

article > ol > li {
        padding: 1em 0.5em;
        flex-grow: 1;
        flex-basis: 10em;
        justify-content: flex-end;
}

article > ol > li > ul > li:first-child {
        border-bottom: 2px solid;
}

article > ul > li {
        padding: 0 1em 1em 0;
}

article p,
article p > a,
article > ul > li {
        max-width: 72ch;
        hyphens: auto;
}

article > ul > li {
        list-style-type: disc;
}

article p {
        padding: 0 1em 1em 1em;
}

article > hr {
        border: none;
        height: 16vh;
}

article > table {
        display: none;
}

article iframe {
        max-width: 100vw !important;
}

article > blockquote.active {
        opacity: 1;
}

.bignav a.h2,
article > blockquote {
        font-style: italic;
        text-indent: 2em;
        font-weight: 100;
        line-height: 1.2;
}

article > blockquote > p {
        padding: 2rem 1rem;
        max-width: 50ch;
        margin: 0 auto;
        hyphens: auto;
}

article > blockquote > p + p {
        padding-top: 0em;
}

article > ul {
        padding: 1em 0 1em 2em;
}

article > ul > li {
        position: relative;
}

article > p > ul > li:before {
        position: absolute;
        left: -1em;
        top: 0.4em;
        display: inline-block;
        content: "";
        min-width: 0.8em;
        min-height: 0.8em;
        border-radius: 50%;
        background-color: currentColor;
}

article > *:not(figure) {
        counter-reset: aka;
}

article h5 figure {
        z-index: 999999;
}

/* article>figure::before, */
/* article>p>figure::before, */
/* article>h5>figure::before { */
/* 	counter-increment: img; */
/* 	text-align: right; */
/* 	font-weight: normal; */
/* 	background: yellow; */
/* 	content: "#" counter(img); */
/* 	display: block; */
/* 	transform-origin: right bottom; */
/* 	padding: 1em 0; */
/* 	text-transform: uppercase; */
/* 	letter-spacing: 2px; */
/* 	transform: scale(0.5); */
/* } */

footer {
        position: relative;
        background-repeat: no-repeat;
        background-size: 37vw;
        background-position: right bottom;
        background-attachment: fixed;
}

footer #fux {
        display: inline-block;
        width: 3rem;
}

footer a#impressumlink {
        grid-column: story;
        display: inline-block;
        font-size: 0.5rem;
        padding: 2em;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        text-decoration: none;
}

footer p {
        padding: 1rem;
}

article h2 > span > span {
        line-height: 1.1;
}
article h3 > span,
article h2 > span {
        position: relative;
        display: inline-block;
        overflow: hidden;
}

article h3 > span:after,
article h2 > span:after,
.linkblink > a:after {
        content: "";
        display: inline-block;
        background: var(--primary);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        animation-name: slider;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        transform-origin: 0 0;
}

article h3 > span:after {
        animation-duration: calc(1s + var(--delay) * 1.3);
        animation-delay: calc(var(--delay) * 0.25);
}

article h2 > span:after {
        animation-duration: calc(1s + var(--delay) * 2.3);
        animation-delay: calc(var(--delay) * 0.35);
}

.linkblink > a {
        font-style: italic;
        overflow: hidden;
        padding-right: 0.1em;
        position: relative;
        display: inline-block;
        font-weight: 100;
}

.linkblink > a:hover:after {
        animation-play-state: paused;
}

.linkblink > a:nth-child(2n + 2):after {
        animation-delay: 0.2s;
}

.linkblink > a:nth-child(3n + 2):after {
        animation-delay: 0.5s;
}

.linkblink > a:nth-child(4n + 2):after {
        animation-delay: 0.7s;
}

nav#tags .wrap .active {
        background: var(--primary);
}

nav#tags .wrap ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
}

nav#tags .wrap li {
        display: flex;
        padding: 1rem;
}

nav#tags a {
        text-decoration: none;
}

#list:before,
#list:after {
        content: "";
        display: block;
        height: 20vmin;
        margin: 3em 50%;
        border-left: 1px solid;
}

#list a.ext h4,
#list a.ext h2 {
        quotes: "«" "»" "‹" "›";
}

#list a.ext h2 {
        text-indent: -0.5em;
}

#list a.ext h2 > span {
        padding-left: 0.5em;
}

#list a.ext h2 > span > span::before {
        content: open-quote;
}

#list a.ext h2 > span > span:after {
        content: close-quote;
}

#list > a h2 {
        /*
	padding: 1rem 1rem 1rem 4rem;
	*/
        padding: 2rem 1rem 0.5rem 1rem;
        font-weight: 600;
}

#list > a h3 {
        line-height: 1.2;
        padding: 0 1rem 1em;
        font-weight: 200;
}

#list > a div figure {
        transform-origin: bottom right;
        transform: scale(0.5);
        margin-top: -8em;
}

#list > a time {
        display: block;
}

#navtoggle {
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s ease;
        margin: 3vmin;
        position: sticky;
        top: 1.5em;
        grid-column: 1;
        z-index: 999999999;
}

#navtoggle:before {
}
#navtoggle:after {
}

#navtoggle:before,
#navtoggle:after {
        content: "";
        width: 1.5em;
        flex-grow: 1;
        padding: 0.2em 0;
        border-top: 2px solid;
        border-radius: 2px;
        display: flex;
}

nav.bignav {
        padding: 5em 0 10em;
        display: grid;
        grid-column: 1 / 3;
        grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}

nav.bignav a:hover {
        background: var(--primary);
        transition: background 0.3s ease;
}

nav.bignav a:hover img {
        transform: scale(0.98);
        z-index: 9999999;
}

#list a:hover h3 span,
nav.bignav a:hover span {
        text-decoration: underline;
}

nav.bignav a {
        transition: background 2.3s ease;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        padding: 0;
}

nav.bignav a img {
        transition: opacity 0.3s ease, transform 0.5s ease;
        max-width: 100%;
        opacity: 0;
}

nav.bignav a img.ok {
        opacity: 1;
}

nav.bignav a.h2 {
        grid-column-end: span 2;
}

nav.bignav a.h2 > span {
        padding: 1rem;
}

nav.bignav a span {
        padding: 0.5em 1em;
}

nav.bignav a:nth-child(2n + 2) {
        flex-direction: column-reverse;
}

@media print {
        #navtoggle {
                display: none;
        }
}

nav#list .illu {
        display: none;
}


#menu {
}

#menu input#menutoggle + label {
        position: fixed;
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 99999991;
        width: 3em;
        height: 3em;
}

#menu input#menutoggle + label:before {
        transform: translate(0, -0.3em);
}
#menu input#menutoggle + label:after {
        transform: translate(0, 0.3em);
}
#menu input#menutoggle + label:before,
#menu input#menutoggle + label:after {
        content: "";
        display: inline-block;
        background: currentColor;
        height: 2px;
        border-radius: 2px;
        width: 50%;
        transition: transform 0.25s ease;
        position: absolute;
        left: 25%;
        top: 50%;
}

#menu input#menutoggle {
        display: none;
}

#menu input#menutoggle:checked + label:before {
        transform: rotate(45deg);
}

#menu input#menutoggle:checked + label:after {
        transform: rotate(-45deg);
}

#menu input#menutoggle:not(:checked) + label + div {
        display: none;
}

#menu input#menutoggle + label + div li {
        overflow: hidden;
}

@keyframes reveal {
        from {
                max-height: 0em;
        }
        to {
                max-height: 5em;
        }
}
#menu input#menutoggle:checked + label + div li {
        animation: reveal 0.5s ease var(--delay) both;
}

#menu > div {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999999;
}

#menu #cover {
        position: absolute;
        width: 100vw;
        height: 100vh;
        background: var(--primary);
        z-index: 99999;
}
#menu ol > li {
        grid-column: 2;
}

#menu ol > li:nth-child(1) {
        --delay: 0s;
}

#menu ol > li:nth-child(2) {
        --delay: 0.1s;
}

#menu ol > li:nth-child(3) {
        --delay: 0.2s;
}

#menu ol > li:nth-child(4) {
        --delay: 0.3s;
}

#menu ol > li:nth-child(5) {
        --delay: 0.4s;
}

#menu ol > li:nth-child(6) {
        --delay: 0.5s;
}

#menu ol > li:nth-child(7) {
        --delay: 0.7s;
}

#menu ol > li:nth-child(8) {
        --delay: 0.8s;
}

#menu ol {
        flex-grow: 1;
        z-index: 999999;
        flex-direction: column;
        list-style-type: none;
}

#menu input#menutoggle:checked + label + div #cover {
        animation: fadein 0.5s ease 0s both;
}

#menu ol > li > a {
        display: block;
        text-decoration: none;
        padding: 1em;
        font-weight: 600;
        font-family: "GT-Super-Display";
}

#menu ol > li > a:hover {
        text-decoration: underline;
}



@media (min-width: 50em) {
        nav#list .illu {
                display: initial;
                width: 16em;
                z-index: 999;
                position: absolute;
                left: 5%;
                top: -7em;
                opacity: 0;
                transition: opacity 0.3s ease 0.5s;
        }

        nav#list > a:nth-child(2n + 2) .illu {
                left: 60%;
        }

        nav#list a:hover .illu {
                opacity: 1;
                transition: opacity 0.2s ease 0.1s;
        }

        article > h6 + ul,
        article > h6 + * + ul {
                font-weight: 600;
                font-size: 2em;
                line-height: 1.1;
                padding: 2em;
                grid-column: 1/3;
        }

        body {
                font-size: 1.2em;
                line-height: 1.6;
        }


        #menu ol > li > a{
            padding: 1em 0;
        }

        #menu div > ol,
        article {
                display: grid;
                grid-template-columns:
                        [sidebar-start] calc(100vw - 0.618 * 100vw)
                        [ sidebar-end story-start] 1fr [story-end];
                grid-template-areas:
                        "header header"
                        "timestamp nav"
                        "title title";
        }

        article > time {
                padding: 4em 8vw;
        }

        article > header > a {
                transform: translate(-50%, 0);
                position: initial;
                left: 0;
                top: 0;
                transition: transform 0.5s ease;
                grid-row: 1;
                grid-column: 2;
        }

        article p,
        article > ul {
                padding-left: 0;
        }

        article > h2 {
                text-align: right;
                background: var(--background);
                grid-column: sidebar;
                position: sticky;
                top: 0;
                top: 1em;
        }

        #extracover {
                background: var(--background);
                grid-column: 1 / 3;
                min-height: 100vh;
                margin-bottom: -100vh;
                position: sticky;
                top: 0;
        }

/*
        article > h2:after {
                content: " ";
                display: block;
                background: var(--background);
                position: absolute;
                top: 100%;
                left: 0;
                height: 100vh;
                width: 100%;
        }
*/

        article > h2 + * {
                margin-top: 1.5em;
        }

        article > h3 + ul {
                padding-top: 0em;
        }

        article > h3 {
                background: var(--background);
                position: sticky;
                top: 40vh;
                grid-column: 1;
                padding-top: 0;
                padding-right: 2em;
                font-weight: 400;
                text-align: right;
                transition: transform 0.3s ease;
        }

        article > h5 > div {
                grid-column: 1/3;
        }

        article > h3:after {
                content: " ";
                background: var(--background);
                position: absolute;
                top: 100%;
                left: 0;
                height: 100vh;
                width: 100%;
        }

        article h4 {
                padding-left: 0;
        }

        #TableOfContents {
                grid-column: story;
        }

        #TableOfContents a {
                text-decoration: none;
        }

        #TableOfContents > ul {
                padding: 1em 0;
                margin-bottom: 2em;
        }

        article > pre > code {
                padding-left: 0;
        }

        article > header {
                display: contents;
        }

        article > header > figure > * {
                transition: transform 1.5s ease 0.2s;
        }

        footer,
        article > h1 {
                padding: 5rem;
                padding-right: 2rem;
        }

        article > blockquote.twitter-tweet {
                padding-bottom: 3em;
                text-align: right;
                padding: 2rem;
        }

        article > blockquote.twitter-tweet p {
                text-align: initial;
                padding: 1em 0;
                display: block;
        }

        article > blockquote:not(.instagram-media) {
                grid-column: 1 / -1;
                z-index: 9999;
        }

        article > blockquote > p {
                hyphens: unset;
        }

        .bignav a.h2,
        article h2,
        #menu a,
        footer,
        article > blockquote > p {
                font-size: 2em;
                line-height: 1.2;
        }

        article > h2 {
                padding: 2rem 2rem 1em 1rem;
                transition: transform 0.3s ease;
        }

        article > * {
                grid-column: story;
        }

        article > h5:after {
                content: "";
                grid-column: 1 / 3;
        }

        article figure > figcaption {
                padding: 1em 0;
                max-width: 80ch;
        }

        article > h6 {
                grid-column: 1 / 3;
                padding: 5rem 5rem 0;
                min-height: calc(100vh - 5rem);
        }

        article > h6 + p {
                padding-top: 5em;
        }

        article > nav > p {
                padding-top: 4em;
        }

        article > blockquote > p {
                padding: 2em;
                padding-right: 2rem;
                bbackground: var(--background);
        }

        #list > a h2 {
                padding: 1rem 1rem 1rem 4rem;
                font-weight: 600;
        }

        nav#list > a div figure {
                margin-top: 0;
        }

        nav#list:before,
        nav#list:after {
                position: relative;
                grid-column: story;
                height: 30vh;
                max-height: 16em;
                margin: 3em 0;
        }

        nav#list hr {
                grid-column: 1 / 3;
                height: 5em;
        }

        nav#list > a > div {
                display: initial;
                position: relative;
                grid-column: 1 / -1;
                pointer-events: none;
        }

        article h2,
        article h3,
        nav#list > a > h2,
        nav#list > a > h3 {
                opacity: 0;
                transform: translateY(0.5rem);
                transition: opacity 1s ease 0s, transform 1s ease 0s;
        }

        /*
	article a>div,
	article .show,
	article .show~*{
		background: var(--primary);
	}
	*/
        @keyframes blink {
                0%,
                50% {
                        opacity: 0;
                }
                51%,
                100% {
                        opacity: 1;
                }
        }
        /*
article h2 span{
	background: var(--primary);
}
*/

        article a:not(.ext) h2 > span > span:after {
                content: "|";
                font-weight: 100;
                animation: blink 0.7s ease 0s both infinite;
        }

        article h2.show,
        article h3.show,
        nav#list > a > *.show {
                opacity: 1;
                transform: translateY(0em);
        }

        nav#list > a > div > figure {
                position: absolute;
                right: 4em;
                tttop: 0;
                width: 10em;
                opacity: 0;
                transform: scale(1);
                transition: opacity 0.5s ease 0.2s;
                overflow: hidden;
                position: fixed;
                bottom: 4em;
        }

        nav#list > a:hover {
                text-decoration: underline;
        }

        nav#list a:hover > div > figure {
                transform: scale(1);

                opacity: 1;
        }

        nav#list > a div > figure > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
        }

        nav#list > a h3 {
                position: relative;
                line-height: 1;
                grid-column: story;
                align-self: end;
                line-height: 1.3;
                padding: 0 1em 0 0;
        }

        nav#list > a div:before {
                display: block;
                content: "";
                grid-column: 1 / 3;
                height: 4em;
                height: 5em;
        }

        nav#list > a:nth-child(3n + 1) h2 {
                grid-column: 1 / 3;
        }

        article > h6,
        #newsletter #thanks p,
        article > h1,
        nav#list > a:nth-child(3n + 1) h2 {
                font-size: 8vw;
                line-height: 1;
                font-weight: 600;
                position: relative;
        }

        nav#list > a:nth-child(3n + 1) h2 {
                margin: 0 0 0 0.7em;
        }

        nav#list > a:nth-child(3n + 2) h2 {
                grid-column: story;
                padding-left: 0;
        }

        nav#list > a:nth-child(3n + 3) h2 {
                padding: 0 2rem 0 0;
                grid-column: sidebar;
                text-align: right;
        }

        article > ol {
                grid-column: 1 / -1;
                flex-direction: row;
                flex-wrap: wrap;
        }

        article > h5 > figure {
                padding-top: 2em;
        }

        article > h5 > figure:nth-child(2):before,
        article > h5:nth-of-type(2n + 1) > figure:nth-child(4) > figcaption,
        article > h5:nth-of-type(2n + 2) > figure:nth-child(2) > figcaption,
        article > h5 > figure:first-child > figcaption {
                padding: 1em;
        }

        h6 > figure:nth-last-of-type(n + 2) + figure {
                width: 50%;
                height: 100%;
                transform: translate(100%, 0);
        }

        h6 > figure:nth-last-of-type(n + 2),
        h6 > figure:nth-last-child(n + 2) + h6 > figure {
                width: 50%;
                height: 100%;
                transform: translate(0, 0);
        }

        article > h5 > figure:nth-last-child(n + 2):first-child,
        article > h5 > figure:nth-child(4),
        article > h5 > figure:nth-child(5) {
                grid-column: sidebar;
        }

        article > h5 > figure:nth-child(3) {
                grid-column: story;
        }

        article > h5 > figure:nth-child(5) {
                max-width: 50%;
        }

        article > h5 > figure > div {
                display: inline-block;
        }

        article > h5 > figure:nth-child(3) div {
                transform: translate(-50%, 0);
        }

        article > h5:nth-of-type(2n + 2) > figure:nth-child(4),
        article > h5:nth-of-type(2n + 2) > figure:nth-child(5) {
                transform: translate(100%, 0);
        }

        article > h5:nth-of-type(2n + 1) > figure:nth-child(5) {
                transform: translate(200%, 0);
        }

        article > h5:nth-of-type(2n + 2) > figure:first-of-type figcaption {
                padding-right: 0;
        }

        article
                > h5:nth-of-type(2n + 1)
                > figure:nth-last-child(n + 4)
                + figure
                + figure
                + figure
                figcaption {
                transform-origin: right top;
        }

        article > h5 > figure:nth-last-child(n + 2):first-child,
        article
                > h5:nth-of-type(2n + 1)
                > figure:nth-last-child(n + 4)
                + figure
                + figure
                + figure,
        article
                > h5
                > figure:nth-last-child(n + 5)
                + figure
                + figure
                + figure
                + figure
                figcaption,
        article > h5 > figure:nth-last-child(n + 2):first-child figcaption {
                transform-origin: right top;
                text-align: right;
        }

        article > h5:nth-of-type(2n + 1) > figure:nth-child(4) figcaption {
                padding-right: 0;
        }

        article > h5 > em {
                z-index: 999999;
                grid-column: 1 / 3;
                background: black;
        }

        article > h5:nth-of-type(2n + 1) > figure + figure {
                padding-top: 7em;
                padding-bottom: 5em;
        }

        article > h5:nth-of-type(2n + 2) > figure:first-child {
                align-self: end;
        }

        article > h5:nth-of-type(2n + 2) > figure + figure {
                padding-bottom: 7em;
        }

        article > h5 + h4 {
                padding-top: 5em;
        }

        footer p {
                padding-bottom: 7em;
                max-width: 37ch;
        }
        footer #fux {
                position: fixed;
                left: 1rem;
                bottom: 0;
                z-index: 999999;
        }
}

@keyframes bye {
        from {
                transform: scale(0, 1);
        }
}
@keyframes hoo {
        to {
                transform: translate(100%, 0);
        }
}

body:after {
        transform-origin: 0 0;
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        animation: hoo 0.5s ease 0.5s both;
        background: var(--secondary);
        z-index: 99999999;
}
body.bye:after {
        animation: bye 0.5s ease 0s both;
}

nav#list > a div > figure > img {
        border-radius: 50% 50% 0 0;
        background: var(--primary);
}

.linklist ~ ul li a:before {
        position: absolute;
        font-size: 0.5em;
        left: 0;
        top: 0;
        content: "\271B";
}

.linklist ~ ul li h5 {
        position: absolute;
        left: 0;
        top: 0;
        width: 30vw;
}

.linklist ~ ul li a:hover {
        background: var(--background);
}
.linklist ~ ul li a {
        position: relative;
        text-decoration: none;
        display: inline-block;
        padding: 1em 0 0 1em;
}

.linklist ~ ul li figure {
        z-index: -1;
        grid-column-end: span 3;
}

.linklist ~ ul li {
        padding: 0;
        line-height: 1;
        list-style: none;
        display: contents;
}

.linklist ~ ul {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
        grid-auto-rows: 4em;
}

.linklist {
        counter-reset: fnote;
}
/*
.linklist ~ ul li::before {
  font-weight: 800;
  counter-increment: fnote;
  content: counter(fnote);
  display: block;
}
*/