:root {
    --bg: #101014;
    --border: #404044;
    --card: #202024;
    --color: #b1b4b2;
    --link: #e7aa11;
    --hover: #F5D681;
    --border-width: 2px;
    --border-radius: 12px;
    --gradient:
            conic-gradient(from 180deg at 50% 70%,
            hsla(0, 0%, 98%, 1) 0deg, #eec32d 72.0000010728836deg, #ec4b4b 144.0000021457672deg, #709ab9 216.00000858306885deg, #4dffbf 288.0000042915344deg,
            hsla(0, 0%, 98%, 1) 1turn);
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

@property --start {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:400;src:local('Play'), local('Play-Regular'), url(/font/Play-Regular-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:400;src:local('Play'), local('Play-Regular'), url(/font/Play-Regular-cyr.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:400;src:local('Play'), local('Play-Regular'), url(/font/Play-Regular-lat-ext.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:400;src:local('Play'), local('Play-Regular'), url(/font/Play-Regular-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:700;src:local('Play Bold'), local('Play-Bold'), url(/font/Play-Bold-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:700;src:local('Play Bold'), local('Play-Bold'), url(/font/Play-Bold-cyr.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:700;src:local('Play Bold'), local('Play-Bold'), url(/font/Play-Bold-lat-ext.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:700;src:local('Play Bold'), local('Play-Bold'), url(/font/Play-Bold-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:400;src:local('Play'), local('Play-Regular'), url(/font/Play-Regular.woff) format('woff');}
@font-face{font-display: swap;font-family:'Play';font-style:normal;font-weight:700;src:local('Play Bold'), local('Play-Bold'), url(/font/Play-Bold.woff) format('woff');}

body {
    background: var(--bg);
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: "Play", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
    font-weight: 70;
    color: var(--color);
}

a, a:hover {
    cursor: pointer;
    text-decoration: none;
    color: var(--link);
    transition: color 0.5s;
}

a:hover {
    color: var(--hover);
    transition: color 0.2s;
}

.container-glowing {
    --spread: 60;
}

.name {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    place-items: center;
    position: relative;
}

.name-box {
    font-size: 30px;
    line-height: 10px;
    display: flex;
    justify-content: center;
    place-items: center;
    position: relative;
}

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--direction);
    gap: 30px;
    margin: 0 auto;
    justify-content: center;
    place-items: center;
    position: relative;
    touch-action: none;
}

.upper-container {
    padding: 2rem;
}

.container-glowing {
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--direction);
    margin: 0 auto;
    position: relative;
    touch-action: none;
}

.glowing {
    --active: 0.15;
    --start: 0;
}

article {
    background: var(--card);
    padding: 2rem;
    border-radius: var(--border-radius);
    display: flex;
    position: relative;
}

.upper-article {
    height: 100%;
    background: var(--card);
    padding: 2rem;
    aspect-ratio: 6 / 4;
    border-radius: var(--border-radius);
    min-width: 600px;
    max-width: 600px;
    display: flex;
    position: relative;
    justify-content: center;
    place-items: center;
}

.glowing:is(:hover, :focus-visible) {
    z-index: 2;
}

.glows {
    pointer-events: none;
    position: absolute;
    inset: 0;
    filter: blur(calc(var(--blur) * 1px));
}

.glows::after,
.glows::before {
    --alpha: 0;
    content: "";
    background: var(--gradient);
    background-attachment: fixed;
    position: absolute;
    inset: -5px;
    border: 10px solid transparent;
    border-radius: var(--border-radius);
    -webkit-mask: linear-gradient(#0000, #0000),
    conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
    mask: linear-gradient(#0000, #0000),
    conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    opacity: var(--active);
    transition: opacity 1s;
}

.glowing::before {
    position: absolute;
    inset: 0;
    border: var(--border-width) solid transparent;
    content: "";
    pointer-events: none;
    background: var(--border);
    background-attachment: fixed;
    border-radius: var(--border-radius);
    -webkit-mask: linear-gradient(#0000, #0000),
    conic-gradient(
            from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
            hsl(0 0% 100% / 0.15) 0deg,
            white,
            hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
    mask: linear-gradient(#0000, #0000),
    conic-gradient(
            from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
            hsl(0 0% 100% / 0.15) 0deg,
            white,
            hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    opacity: var(--active);
    transition: opacity 1s;
}

.glowing::after {
    --bg-size: 100%;
    content: "";
    pointer-events: none;
    position: absolute;
    background: var(--gradient);
    background-attachment: fixed;
    border-radius: var(--border-radius);
    opacity: var(--active, 0);
    transition: opacity 1s;
    --alpha: 0;
    inset: 0;
    border: var(--border-width) solid transparent;
    -webkit-mask: linear-gradient(#0000, #0000),
    conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
    mask: linear-gradient(#0000, #0000),
    conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
    filter: brightness(1.5);
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
}

.badge {
    border: 2px solid var(--border);
    align-self: start;
    border-radius: 100px;
    padding: 0.5rem 0.7rem;
    font-size: 0.675rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 50;
}


article h2 {
    margin: 0;
    padding: 1rem 0;
    font-weight: 100;
    font-size: 1.5rem;
}

.header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 100px;
    font-weight: bold;
}

.subheader {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 30px;
    color: var(--color);
}

.badge svg {
    width: 16px;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--direction);
    margin: 0 auto;
    position: relative;
    justify-content: space-between;
    padding: 0 2rem;
}

.footer-block {
    display: flex;
    position: relative;
    place-items: center;
    margin: 0 0 1rem 0;
}

.box-icons{
    display: flex;
    flex-direction: var(--direction);
    margin: 0 auto;
    position: relative;
    justify-content: flex-end;
}

.social-icons {
}

.social-icons a {
}

.social-icons svg {
    height: 30px;
    width: 30px;
    fill: var(--color);
    transition: fill 0.5s;
    margin-left: 1rem;
}

.social-icons a:hover svg {
    fill: #fff;
    transition: fill 0.5s;
}

@media (max-width: 650px) {
    body {
        place-items: inherit;
    }
    .upper-article {
        min-width: 300px;
        max-width: 300px;
    }
    .footer {
        justify-content: center;
    }
}