@font-face {
    font-family: 'Heading Pro Wide';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/Heading-Pro-Wide-Bold.woff2') format('woff2');
}

a {
    color: #2523cf;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 35, 207, 0.2);
    cursor: pointer;
}

p a:hover:not(.promo), li a:hover {
    color: #ff5020 !important;
    border-bottom: 1px solid rgba(255, 80, 32, 0.2);
}

body {
    font-family:
        Helvetica Neue,
        Arial,
        sans-serif;
    position: relative;
}

body > header {
    padding-bottom: 32px;
    color: #fff;
    background: linear-gradient(120deg, #0066FF, #4d8cff, #0066FF);
    background-size: 200% 200%;
}

@keyframes heroGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body > header > div,
body > main > article,
body > footer > div {
    max-width: 1024px;
    margin: auto;
}

body > header > div {
    padding-top: 24px;
}

body > header > div > h1 {
    font-family: 'Heading Pro Wide', sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 100%;
}

body > header > div > p {
    margin-top: 24px;
    font-weight: 400;
    font-size: 32px;
    line-height: 110%;
    max-width: 80%;
}

body > header > div > div {
    margin-top: 32px;
}

body > header > div > div > a {
    display: inline-block;

    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

body > header > div > div > a.main-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2d81ff;
    color: white;
    transition: 150ms;
}

body > header > div > div > a.main-button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body > header > div > div > a.secondary-button {
    background: transparent;
    color: white;
    transition: 150ms;
}

body > header > div > div > a.main-button:hover {
    background: #ffa32d;
}

body > header > div > div > a.secondary-button:hover {
    opacity: .7;
}

body > header > div > div > a.secondary-button > span {
    border-bottom: 1px solid rgb(251 251 255 / 33%);
}

body > main > article {
    padding-top: 32px;
    padding-right: 64px;
}

body > main > article > h2 {
    font-weight: 400;
    margin-bottom: 8px;
}

body > main > article > p {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 130%;
}

body > main > article > p > a.promo {
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 14px;
    border-bottom: none;
    transition: 150ms;
}

body > main > article > p > a.promo:hover {
    opacity: .8;
}

body > main > article > p > a.promo.sotka {
    background: #1455ff;
    color: white;
}

body > main > article > p > a.promo.nplus1 {
    background: #f26e40;
    color: white;
}

body > main > article > p > a.promo.m18 {
    background: #cf0;
    color: black;
}

body > main > article > p > a.promo.yandex {
    background: #1e1e1e;
    color: white;
}

body > main > article > ol > li {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 130%;
}

body > main > article > ol.github {
    list-style: none;
    padding-left: 40px;
}

body > main > article > ol.github > li {
    position: relative;
}

body > main > article > ol.github > li::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 3px;
    width: 16px;
    height: 16px;
    background-color: #404040;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body > main > article > div.promo {
    align-items: center;
    gap: 16px;
    background: #f0f0f2;
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 16px;
    max-width: 840px;
}

body > main > article > div.promo > a.promo-title {
    display: inline;
    font-size: 22px;
    font-weight: 500;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}

body > main > article > div.promo > a.promo-title:hover {
    opacity: 0.8;
}

body > main > article > div.promo > a.promo-title > span {
    background: linear-gradient(135deg, #ff6b35, #ffd23f, #f4593a, #ffd23f);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: promoGradient 4s ease-in-out infinite;
    border-bottom: 1px solid rgba(255, 107, 53, 0.3);
}

body > main > article > div.promo > a.promo-title:hover > span {
    border-bottom-color: rgba(255, 80, 32, 0.5);
}

@keyframes promoGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body > main > article > div.promo > p.promo-desc {
    font-size: 18px;
    line-height: 130%;
    color: #404040;
    margin: 0;
    margin-top: 12px;
}

body > footer > div {
    padding-top: 24px;
    padding-bottom: 24px;
    opacity: 0.6;
    font-size: 14px;
}

body > footer > div > p {
    margin: 0;
}

@media screen and (max-width: 768px) {
    body > header > div > h1 {
        font-size: 40px;
    }

    body > header > div > p {
        font-size: 24px;
        max-width: 100%;
    }

    body > main > article {
        padding-right: 0;
    }

    body > header > div,
    body > main > article,
    body > footer > div {
        padding-left: 16px;
        padding-right: 16px;
    }

    body > main > article > ol,
    body > main > article > ol.github {
        padding-left: 24px;
    }

    body > main > article > div.promo {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        max-width: none;
    }
}

@media screen and (max-width: 480px) {
    body > header > div > h1 {
        font-size: 28px;
    }

    body > header > div > p {
        font-size: 20px;
    }
}