<!DOCTYPE html>
<html lang="ru">
    <head>
        <!-- Yandex.Metrika counter -->
        <script type="text/javascript">
            (function (m, e, t, r, i, k, a) {
                m[i] =
                    m[i] ||
                    function () {
                        (m[i].a = m[i].a || []).push(arguments);
                    };
                m[i].l = 1 * new Date();
                for (var j = 0; j < document.scripts.length; j++) {
                    if (document.scripts[j].src === r) {
                        return;
                    }
                }
                (k = e.createElement(t)),
                    (a = e.getElementsByTagName(t)[0]),
                    (k.async = 1),
                    (k.src = r),
                    a.parentNode.insertBefore(k, a);
            })(
                window,
                document,
                "script",
                "https://mc.yandex.ru/metrika/tag.js",
                "ym"
            );

            ym(88952224, "init", {
                clickmap: true,
                trackLinks: true,
                accurateTrackBounce: true,
                webvisor: true,
            });
        </script>
        <noscript
            ><div>
                <img
                    src="https://mc.yandex.ru/watch/88952224"
                    style="position: absolute; left: -9999px"
                    alt=""
                /></div
        ></noscript>
        <!-- /Yandex.Metrika counter -->

        <meta charset="utf-16" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=1, viewport-fit=cover'"
        />
        <title>День молодёжи 2025</title>
        <meta name="description" content="День молодёжи 2025" />
        <meta property="og:title" content="День молодёжи 2025" />
        <meta property="og:description" content="День молодёжи 2025" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://youthday.ru/" />
        <meta property="og:image" content="https://youthday.ru/share.jpg" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />

        <meta name="twitter:image" content="https://youthday.ru/share.jpg" />
        <meta name="twitter:card" content="summary_large_image" />

        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body class="youth-day">
        <header class="youth-day__header">
            <img class="youth-day__logo" src="logo.png" alt="logo" />
        </header>
        <picture>
            <source srcset="dumM.png" media="(max-width: 950px)" />
            <img
                class="youth-day__img"
                src="dumD.png"
                alt="28.06 во всех городах России"
            />
        </picture>
    </body>
</html>

<style>
    .youth-day {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;

        width: 100vw;
        height: 100dvh;
        background-color: #8c64d8;
    }
    .youth-day__img {
        width: 100%;
        max-width: 800px;
        display: block;
        margin: 0 auto;
        pointer-events: none;
        user-select: none !important;
        @media (max-width: 950px) and (orientation: portrait) {
            width: 85%;
        }
    }
    .youth-day__header {
        top: 0;
        left: 0;
        padding: 2vw 5vw;
        position: absolute;
    }
    .youth-day__logo {
        width: 14vw;
        max-width: 150px;
        @media (max-width: 950px) and (orientation: portrait) {
            width: 40vw;
            max-width: 400px;
        }
    }
</style>