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

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
:target { scroll-margin-block: 5ex; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3 { overflow-wrap: break-word; }
body { min-height: 100svh; }

/* Styles */
:root {
    --font: calc(min(5vw, 32px))/1.2 Work Sans, sans-serif;
}
body { min-width: 100vw; display: flex; align-items: center; justify-content: center; }

.back { position: fixed; top: 10px; left: 10px; width: calc(min(200px, 30vw)); height: calc(min(200px, 30vw) / 3.5); display: block; background-image: var(--url-back); background-size: 200% 100%; cursor: pointer; color: transparent; z-index: 1; }
.back:hover { background-position-x: -100%; }

.index { display: flex; flex-direction: column; align-items: center; }
.index > h1,
.index > a,
.index > span          { display: block; background-image: var(--url-menu); background-size: 200% 1100%; color: transparent; }
.index > a             { width: calc(min(90vw, 10svh * 4.166667)); height: calc(min(90vw / 4.166667, 10svh)); }
.index > span,
.index > h1            { width: calc(min(90vw, 15svh * 4.166667)); height: calc(min(90vw / 4.166667, 15svh)); }
.index > h1            { background-position-y: 0%; }
.index > .photo        { width: 20svh; height: 20svh; background-image: var(--url-photo); background-size: 200% 100%; }
.index > .photo:hover  { background-position: -100%; }
.index > .about        { background-position-y: 10%; }
.index > .illustration { background-position-y: 20%; }
.index > .animation    { background-position-y: 30%; }
.index > .photography  { background-position-y: 40%; }
.index > .mistechko    { background-position-y: 50%; }
.index > span,
.index > a:hover       { background-position-x: -100%; }

.index > .photo_dance  { background-position-y: 60%; }
.index > .photo_music  { background-position-y: 70%; }
.index > .photo_pride  { background-position-y: 80%; }

.snap { width: 100vw; height: 100svh; overflow-y: scroll; scroll-snap-type: y mandatory; }
.snap > * { scroll-snap-align: center; }

.page_about { display: flex; flex-direction: column; align-items: center; gap: 1em; font: var(--font); }
.page_about > p { width: calc(min(90vw, 30em)); }

.page_illustration > a { margin: 5svh auto; display: block; width: fit-content; }

.page_animation { padding-top: calc(min(250px, 40vw) / 2.4); }
.page_animation > video { margin: 5svh auto; }

.page_mistechko { display: flex; flex-direction: column; align-items: center; gap: 1em; }
.page_mistechko > .text { width: calc(min(90vw, 30em)); display: flex; flex-direction: column; gap: 1em; font: var(--font); margin: calc(min(250px, 40vw) / 2.4) 0 0 0; }
.gallery { margin: calc(min(250px, 40vw) / 2.4) 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 1em; align-items: center; justify-content: center; }
.gallery > a > img,
.gallery > video { width: min(90vw, 400px); height: min(90vw, 400px); object-fit: cover; }

strong > .hpquote { margin-left: -0.55em; }
strong > .hpspace { margin-right: 0.55em; }

.hpquote { margin-left: -0.5em; }
.hpspace { margin-right: 0.5em; }