:root { --font-tech: "Momo Trust Display", "Press Start 2P", "Courier New", monospace; --blue: #0000ff; --red: #ff1a1a; }

html, body { overflow-x: hidden; }
.landing { position: relative; min-height: 3000px; }
.top { position: absolute; inset: 0 0 auto 0; height: 130px; z-index: 5; }
.collage { position: relative; height: 3000px; }
.sec { display: contents; }

.it { position: absolute; margin: 0; left: calc(50% + (var(--x) - 749) * 1px); top: calc(var(--y) * 1px);
      width: calc(var(--w, 0) * 1px); height: calc(var(--h, 0) * 1px); transform: rotate(calc(var(--r, 0) * 1deg)); transform-origin: left top; }
.it:not([style*="--w"]) { width: auto; }
.it:not([style*="--h"]) { height: auto; }
img.it, .it > img, .it > svg { display: block; max-width: none; }
.it > img:not(.logo-img) { width: 100%; height: 100%; object-fit: contain; }
img.it { object-fit: cover; }
.it--shot { border-radius: 8px; }
.it--over { z-index: 2; }
.it--bleed { left: calc(50% + (var(--x) - 749) * 1px); }

.logo { display: inline-block; color: #fff; text-decoration: none; }
.logo-img { display: block; height: 52px; width: auto; max-width: none; }
.top .logo { position: absolute; left: 48px; top: 36px; }
.it.logo { width: auto; height: auto; }

.ring { position: absolute; right: -90px; top: -14px; width: 410px; height: 150px; border: 12px solid #1de000; border-radius: 50%; background: white}
.ring__a { position: absolute; color: var(--blue); font: 24px/1 Arial, Helvetica, sans-serif; text-decoration: none; }
.ring__a:hover { text-decoration: underline; }
.ring__a--1 { left: 38px; top: 34px; } .ring__a--2 { left: 205px; top: 48px; } .ring__a--3 { left: 90px; top: 82px; }

.it--b { font: 700 18px/1.3 var(--font); color: #fff; }
.it--text { font: 400 22px/1.4 var(--font); color: #fff; white-space: nowrap; }
.it--center { text-align: center; }
.it--shout { font: 700 23px/1.1 var(--font); white-space: nowrap; letter-spacing: .5px; }
.it--blue { color: var(--blue); font: 700 18px/1.3 Arial, Helvetica, sans-serif; word-break: break-all; text-decoration: none; }
.it--blue:hover { text-decoration: underline; }
.it--circle { border-radius: 50%; background: #fff; }
.it--title { font: 400 30px/1.2 var(--font); text-transform: uppercase; white-space: nowrap; }
.it--title s { text-decoration-color: var(--red); text-decoration-thickness: 4px; }
.it--hand { color: var(--red); font: 30px/1 "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.it--red { color: var(--red); font: 400 22px/1.2 var(--font); text-transform: uppercase; }
.it--whisper { color: #777; font: 400 16px/1.3 var(--font); text-transform: uppercase; white-space: nowrap; }
.it--pixel { font: 400 44px/1 var(--font-tech); color: #fff; letter-spacing: 1px; }
.it--h2 { font-size: 48px; }
.it--arrow { height: auto; }
.rule { height: 0; border: 0; border-top: 2px solid #5a5a5a; }
.button--vhod { height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 20px; text-transform: none; white-space: nowrap; width: 223px; }

.mobile-warning {
    display: none;
}

@media (max-width: 768px) {
    body > *:not(.mobile-warning) {
        display: none !important;
    }

    .mobile-warning {
        display: flex;
        position: fixed;
        inset: 0;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: #111;
        color: #fff;
        font-family: Roboto, sans-serif;
        font-size: 20px;
        text-align: center;
        z-index: 999999;
    }
}