@font-face {
    font-family: 'CC choreo-graphy';
    font-style: normal;
    src: url('/assets/fonts/CC-choreo-graphy-35.otf') format('opentype');
}

@font-face {
    font-family: 'G2 Erika Mono';
    font-style: normal;
    src: 
    url('/assets/fonts/G2-Erika-Mono.otf') format('opentype'), 
    url('/assets/fonts/G2-Erika-Mono.woff') format('woff'),
    url('/assets/fonts/G2-Erika-Mono.woff2') format('woff2');
}

@font-face {
    font-family: 'G2 Erika';
    font-style: normal;
    src: 
    url('/assets/fonts/G2-Erika-Regular.otf') format('opentype'), 
    url('/assets/fonts/G2-Erika-Regular.woff') format('woff'),
    url('/assets/fonts/G2-Erika-Regular.woff2') format('woff2');
}

* {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important;

    padding: 0;
    margin: 0;

    overflow: hidden;
    word-wrap: break-word;
    mix-blend-mode: multiply;

    /* unselectable */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
    background-color: #f4f4f4;

    font-family: 'G2 Erika Mono';
    font-weight: normal;
    font-size: 1em;
    color:#F15060;
}

.mobile-only {
    display: none;
}

main {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

h1 {
    position: absolute;
    bottom: 1.25em;
    z-index: 99;
    font-family: 'G2 Erika Mono';
    font-weight: normal;
    font-size: 1.25em;
    color: #F15060;
    mix-blend-mode: multiply;
    cursor: pointer;
    transition: .5s ease;
}

h1:hover {
    letter-spacing: 1px;
}

a {
    text-decoration: none;
    color: #3255A4;
}

a:hover {
    text-decoration: underline;
}

p {
    word-wrap: break-word;
}

.research-container > figcaption {
    color: #3255A4;
}

.process-container > figcaption {
    color: #00838A;
}

#input {
    position: absolute;
    z-index: 50;
    mix-blend-mode: multiply;

    max-width: 100vw;
    max-height: 100vh;

    font-family: 'CC choreo-graphy';
    /* font-size: 650px; */
    font-size: 83vh;
    text-align: center;
    color: #F15060;
    border: none;
}

#input:focus {
    border: none;
}

#input:focus-visible {
    /* outline: -webkit-focus-ring-color auto 1px; */
    outline: none;
    /* caret-color: transparent; */
}

#input::selection {
    color: #F15060;
    background: rgba(241, 80, 96, 0.1);
}

#input-mirror {
    position: absolute;
    font-family: 'CC choreo-graphy';
    font-size: 3em;
}

#main-container {
    width: 100vw;
    height: 100vh;
    mix-blend-mode: multiply;
}

.research-container, .process-container, #research-container {
    position: absolute;
}

.research-container, #research-container {
    background-color: #3255A4;
}

.process-container {
    background-color: #00838A;
}

figure {
    padding: 0 auto;
    margin: 0 auto;
}

figcaption {
    position: absolute;
    font-family: 'G2 Erika';
    font-size: 0.8em;
    margin-top: 0.25em;
}

.research, .process {
    position: absolute;
    max-width: 60vw;
    width: 200px !important;
    max-height: 80vh;
    height: auto;
    /* filter: grayscale(100%) blur(5px) brightness(90%); */
}

.research {filter: url('#monochrome-blue');}
.process {filter: url('#monochrome-teal');}

.shuffleButton {
    position: absolute;
    z-index: 100;
    font-size: 2em;
    cursor: pointer;
}

.shuffleButton:hover {
    font-weight: bold;
}

#shuffleResearchButton {
    top: 1em;
    left: 2em;
    color: #3255A4;
}

#shuffleProcessButton {
    top: 1em;
    left: 3em;
    color: #00838A;
}


/* about */

#modal {
    display: none;
    position: fixed;
    z-index: 99;
    overflow-y: auto;
    /* width: 80vw; */
    max-height: 100vh;
    padding: 10%;
    mix-blend-mode: multiply;
}

.close {
    position: fixed;
    font-size: 2em;
    top: 1em;
    right: 2em;
    cursor: pointer;
    z-index: 100;
}

.close:hover {
    font-weight: bold;
}

.about {
    display: flex;
    flex-flow: column nowrap;
    gap: 2.5em;
    font-size: 1.25em;
    line-height: 1.25;
    z-index: 99;
}

::-webkit-scrollbar {
    width: 10px;
}
   
::-webkit-scrollbar-thumb {
    background: rgba(241, 80, 96, 0.5);
    border-radius: 10px;
}
  
::-webkit-scrollbar-thumb:hover {
    cursor: grab;
}

article {
    display: flex;
    flex-flow: row wrap;
    gap: 2.5em;
    color: #3255A4;
}

article > p {
    width: 22%;
    flex: none;
}

.impressum {
    display: flex;
    flex-flow: column nowrap;
    gap: 2.5em;
    font-family: 'G2 Erika';
    /* font-size: 0.5em; */
    color: #3255A4;
}

details[open] > summary {
    list-style-type: none;
    text-decoration: underline;
}

details > summary {
    list-style: none;
    font-family: 'G2 Erika Mono';
}

summary:hover {
    cursor: pointer;
    text-decoration: underline;
}

/*
details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
}

details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: inside disclosure-closed;
}

*/

@media only screen and (max-width: 650px) {
    .mobile-only {
        display: block;
        position: absolute;
        font-family: 'G2 Erika';
        font-size: 1.25em;
        color: #00838A;

        animation: blinker 2s step-start infinite;
    }
      
    @keyframes blinker {
    40% {
        opacity: 0;
        }
    }

    article > p {
        width: 45%;
    }
}