@font-face {
	font-family: 'Apparat-Medium';
	src: url("/assets/Apparat-Medium.woff2") format("woff2");
}

@font-face {
	font-family: 'Apparat-ExtraBold';
	src: url("/assets/Apparat-ExtraBold.woff2") format("woff2");
}

:root {
    --nfsv: 13vw;
    --currentfont: 'Apparat-Medium', sans-serif;
    --balfa: 8px;
    --balfax: clamp(2px, 1vw, 12px);
    --bbeta: 3em;
    --sp: var(--balfa);
    --bgc: #fefefe;
    --mainc: #010101;
    --bgcr: var(--mainc);
    --mainx: oklab(0.82 0 0);
    --bgcxz: var(--mainc);
    --add: color-mix(in srgb, var(--active), #fff);
    --active: #faca08;
    --brittle: oklab(0.87 0 0 / 0.35);
    --gap: var(--balfax);
    --sbc: oklch(0.98 0.02 72.19);
    --mfs2q: clamp(100%, 3vw, 130%);
    --nfs: clamp(2.75rem, var(--nfsv), 8.4rem);
    --nfs2: clamp(.7rem, 1.3vw, 2rem);
    --scale: scale(0);
    --logo: url('/assets/logo.svg') no-repeat center top;
    --logohover: url('/assets/logo-hover.svg') no-repeat center top;
    --insta: url('/assets/instagram.svg') no-repeat center top;
    --fb: url('/assets/facebook.svg') no-repeat center top;
    --yt: url('/assets/youtube.svg') no-repeat center top;
    --rrgi: "rri1" "rri2" "rri3" "rri4";
    --ntgggz: .3rem;
    --anty: none;
    --arpy: center;
    --rw1: 150vw;
    --rtr1: translate(0,0); 
    --rp1: static;
    --divzor: inline-block;
    --brizor: inline-block;
    --matopz: 2;
    --muska: 1200px;
    --smoteis:100vh;
    --fuuta: 1rem 0;
    --baika: calc(100% - 2rem);
    --mosku: 100%;
    --zom: calc(100vh - 50px);
    --swiper-pagination-bullet-width: 12px;
    --swiper-navigation-color: var(--mainc);
    --swiper-pagination-bullet-size: 12px;
    --swiper-navigation-sides-offset: 1.5rem;
    --swiper-theme-color: var(--mainc);
    --swiper-pagination-color: var(--mainc);
    --smiha: clamp(30px, 2.75vw, 40px);
				
   

    font-family: var(--currentfont);
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;
    font-size: var(--mfs2q);
}

.swiper-container img {
    --swiper-theme-color: var(--mainc);
}

.swiper-pagination-bullet {
    border: 1px solid green;
}

@media (max-width: 560px) {
    .content-footer button {
        text-transform: lowercase;
    }
}
@media (min-width: 640px) {
    :root {
        --nfsv: 14vw;
        --ntgggz:  1rem .5rem;
        --anty: '';
        --arpy: left;
        --rw1: 100%;
        --rl1: 50%;
        --rt1: 50%;
        --rtr1: translate(-50%,-50%); 
        --rp1: absolute;
        --matopz: inherit;
        --smoteis: calc(100vh - calc(var(--s) * 2));
        --fuuta: 0;
    }
}

@media (min-width: 1200px) {
    :root {
        --sp: 0;
        --baika: 100%; 
        --mosku: calc(100% - 2rem);
    }
}

@media (min-width: 1440px) {
    :root {
        --rl1: auto;
        --rt1: auto;
        --rtr1: translate(0,0); 
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.dark, footer {
    --swiper-pagination-bullet-inactive-color: var(--mainc);
    --bgc: #010101;
    --bgcxz: var(--bgc);
    --bgcr: var(--bgc);
    --mainc: #fefefe;
    --sbc: oklab(0.35 -0.05 -0.04);
    --logo: url('/assets/logo-dark.svg') no-repeat center top;
    --logohover: url('/assets/logo-hover-dark.svg') no-repeat center top;
    --insta: url('/assets/instagram-dark.svg') no-repeat center top;
    --fb: url('/assets/facebook-dark.svg') no-repeat center top;
    --yt: url('/assets/youtube-dark.svg') no-repeat center top;
}

.dark footer {
    --bgc:  #fefefe;
    --mainc: #010101;
    --insta: url('/assets/instagram.svg') no-repeat center top;
    --fb: url('/assets/facebook.svg') no-repeat center top;
    --yt: url('/assets/youtube.svg') no-repeat center top;
}

body {
    --s: clamp(16px, 3vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--smoteis);
    height: 100%;
}

body, dialog {
    background-color: var(--bgc);
    color: var(--mainc); 
}

ul, ol {
    list-style-position: inside;
}

html {
    height: 100%;
}

main,
.nav-panel {
    max-width: var(--muska);
    margin-inline: auto;
    width: var(--baika);
}

body > header {
    padding-top: clamp(2rem, 3vw, 3rem);
}

b, strong {
    font-family: 'Apparat-ExtraBold', sans-serif;
    font-weight: 900;
}

img {
    width: 100%;
    height: auto;
}

aside.open {
    padding-bottom: var(--bbeta);
}
button, select {
    background-color: var(--bginit);
    --bor: 0;
    --bginit: transparent;
}
select {
    border: none;
    border-radius: var(--balfa);
    color: var(--mainc);
}
input, select, textarea, button {
    font-size: inherit;
    font-family: inherit;
    border: 0;
}
textarea {
    width: 90%;
    min-height: 1em;
    text-align: center;
    padding-top: 1em;
    margin: auto;
}
textarea:focus {
    outline: 0;
    border-color: var(--circle-color);
}

.title-subtitle {
    font-size: clamp(.75rem, 1.6vw, .9rem);
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.title-subtitle p {
    flex: 1;
}

body > footer {
    padding: calc(var(--s) * 1.5) var(--s);
    margin-top: auto;
}

main p, main li {
    text-wrap: pretty;
}
main * + *:not(#introText):not(figure):not(.gallery-item):not(.btn-close):not(.open-container):not(swiper-container):not(swiper-slide) {
    margin-top: 1.5rem;
}

main a {
    color: var(--mainc);
    text-decoration: none;
    font-weight: bold;
    font-family: 'Apparat-ExtraBold', sans-serif;
}

address {
    font-style: normal;
}

iframe {
    width: 100%;
    margin-inline: auto;
    height: 60vw;
    max-height: 600px;
}

svg {
    transition: all .3s ease-in-out;
}
.title-main {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}
.title-article {
    font-size: var(--bbeta);
}

.active {
    font-weight: bold;
}

author-name {
    display: flex;
    gap: var(--balfa);
    align-content: center;
    padding: var(--balfa) 0 var(--bbeta);
    display: flex;
    justify-content: center;
    align-content: center;
}	

.nav-panel {
    align-items: center;
    font-size: clamp(.8rem, 1.8vw, 1rem);
}

body > header .nav-panel {
    min-height: clamp(164px, 44vw, 320px);
}

body > footer  .nav-panel {
    display: block;
}

lang-el {
    --pt: 1rem;
    --pr: 1rem;
    position: absolute;
    top: var(--pt);
    right: var(--pr);
    z-index: 1;
    align-items: center;
    gap: 0.2rem;
    display: flex;
    justify-content: flex-end;
}

top-nav, main, footer {
    transition-property: all;
}

gallery-container,
top-nav {
    opacity: 0;
    transition-delay: .5s;
    transition-duration: .6s;
}

top-nav + main {
    margin-top: 4rem;
}

.ready gallery-container,
.ready top-nav {
    opacity: 1;
}
.ready gallery-container {
    margin-block: 3rem;
}


main, 
footer,
body > header:not(.ready-header) {
    opacity: 0;
    transition-delay: .7s;
    transition-duration: .8s;
}

footer {
    border-top: 1px solid var(--mainx);
    background-color: var(--bgc);
}

.ready main, 
.ready footer,
.ready-header {
    opacity: 1;
}

.ready main {
    padding-block: clamp(48px, 18vw, 4rem);
}

.flex {
    display: flex;
}

.grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
}

.font-change {
    container-name: font-change;
    container-type: inline-size;
    display: flex;
    justify-content: space-between;
    position: relative;
    top: var(--balfa);
    margin: 0 var(--balfa);
    gap: var(--gap);
}
.content-footer button, .font-change button {
    color: var(--mainc);
    font-size: clamp(.8rem, 2vw, .9rem);
}

.dg {
    display: grid;
}

.rental .readable {
    grid-template-areas: var(--rrgi);
    grid-gap: clamp(1px, 2.2vw, 2rem);
}

.rental .readable > h2 {
    grid-area: rri1;
}

.rental .readable > p {
    grid-area: rri2;
}

.rental-image {
    grid-area: rri3;
}

.rental-image.open {
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;
    left: 0 ;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: auto;
    display: flex;
}

.rental-image.open img {
    width: var(--rw1);
    left: var(--rl1);
    top: var(--rt1);
    transform: var(--rtr1);
    position: var(--rp1);
    z-index: 2;
    margin: auto;
}

rental-details {
    grid-area: rri4;
}

.rental h2 + p {
    margin-top: 0;
}


#consent-banner-main dialog[open] { 
    --brem: 2rem;
    width: calc(var(--muska) / 2.5);
    max-width: var(--baika);
    position: fixed;
    border: 1px solid;
    border-radius: 5px;
    background-color: var(--bgc);
    background-image: url(/assets/logo.svg);
    background-position: var(--brem) var(--brem);
    background-repeat: no-repeat;
    background-size: calc(var(--brem) * 2);
    padding-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.consent-banner-modal-wrapper {
    padding: var(--brem);
    font-size: 70%;
    color: #4c4c4c;
}



.consent-banner-modal-wrapper span,
.consent-banner-modal-wrapper p {
    font-family: var(--currentfont);
    font-weight: bold;
}

.consent-banner-modal-wrapper span {
    margin-bottom: calc(var(--brem) / 2);
    display: block;
}

.consent-banner-modal-buttons {
    display: flex;
    margin: 1rem auto 0;
    justify-content: flex-start;
}

.consent-banner-button {
    color: inherit;
    text-decoration: none;
    padding: 0 calc(var(--brem) / 8);
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 12px;
}

.consent-banner-button:hover {
    background-color: var(--active);
}

@container font-change (width < 70ch) {
    button {
        font-size: .85rem;
        background-color: hsl(335, 100%, 73%);
        --mainc: #fff;
        width: 100%;
    }
    footer {
        width: 100%;
    }
}
.font-change span {
    font-style: italic;
}
.center {
    text-align: center;
    display: flex;
    width: 100%;
    justify-content: center;
}
.flicker {
    min-width: 40px;
    display: inline-block;
    text-align: center;
}
.highlight {
    background-color: yellow;
}
.rotate {
    transform: rotate(45deg);
}
.header-top {
    container-name: header-top;
    container-type: inline-size;
    margin-top: 4rem;
}
@container header-top (width < 60ch) {
    section {
        background-color: var(--sbc);
        margin: var(--bbeta) auto;
        padding: var(--balfa);
        border-radius: var(--balfa);
    }
    author-name {
        flex-direction: column;
        max-width: calc(100% - var(--balfa));
        justify-content: center;
    }
    .toggled {
        max-height: max-content;
    }
    aside.open {
        padding-bottom: 0;
    }
}
.mb {
    margin-bottom: var(--bbeta);
    padding-top: var(--bbeta);
}
.praise .devour-type, .devour .praise-type {display: none;}
.praise .praise-type, .devour .devour-type {display: flex; flex-direction: column;}

.ce {
    --szs: 12px;
    border-radius: 50%;
    border: 1px solid rgb(9, 25, 42);
    padding: 2px;
    width: var(--szs);
    height: var(--szs);
    line-height: var(--szs);
    text-align: center;
    margin-left: .125rem;
    font-size: .4rem;
}

.block-list a {
    display: block;
}

@media print {
    .header-top, .header-top aside, .font-change {
        display: none !important;
        height: 0;
    }
     * {
        break-before: auto;
        break-inside: avoid;
        break-after: auto;
    }
}

.circle {
    /*--circle-color: hsl(334, 67%, 64%);*/
    background-image: paint(circle);
    width: calc(var(--balfa)*2);
    aspect-ratio: 1;
}

.readable {
    max-width: 690px;
    width: var(--moscu);
    margin-inline: auto;
}

.sr-only {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }