* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: "Inter", "Britti Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1882352941);
    border-radius: 5px;
}

::-webkit-scrollbar-track-piece {
    background: rgba(255, 255, 255, 0.1882352941);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

::-webkit-resizer {
    background: rgba(0, 0, 0, 0);
    border-radius: 10px;
}

a, button, textarea, input {
    outline: none;
    text-decoration: none;
}

body {
    background: url(../img/bg.jpg), #0D0D0D;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.logos {
    padding: 36px 16px;
}
.logos > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 42px;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.main {
    padding: 120px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.main > h1 {
    color: #FFF;
    font-family: "Britti Sans";
    font-size: 86px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 9px;
}
.main > img {
    width: 100%;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -o-object-fit: contain;
       object-fit: contain;
    margin-bottom: 24px;
}

.links {
    margin-top: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    max-width: 896px;
    width: 100%;
}
.links > .item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    height: 63px;
    border-radius: 61px;
    background: #FFF;
    padding: 0px 22px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.links > .item > img {
    width: 26px;
    height: 26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -o-object-fit: contain;
       object-fit: contain;
}
.links > .item > p {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
}
.links > .item::after {
    position: relative;
    content: "";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.29289 5.29289C8.68342 4.90237 9.31658 4.90237 9.70711 5.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071C7.90237 18.3166 7.90237 17.6834 8.29289 17.2929L13.5858 12L8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.links > .item:hover {
    background: rgba(255, 255, 255, 0.8);
}

footer {
    text-align: center;
    margin-top: auto;
    padding: 24px 16px;
}
footer > p {
    color: #636363;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.live {
    z-index: 3;
    padding: 42px;
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 16px;
    pointer-events: none;
}
.live > .item {
    -webkit-animation: 0.2s show;
            animation: 0.2s show;
    max-width: 372px;
    width: 100%;
    gap: 9px;
    border-radius: 15px;
    border: 1px solid #3D3D3D;
    background: #151515;
    padding: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}
.live > .item > img {
    width: 26px;
    height: 26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -o-object-fit: contain;
       object-fit: contain;
}

.item-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
}
.item-info > h1 {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.item-info > h1 > span {
    color: #F7931A;
}
.item-info > h1 > span.xl {
    color: #B873FE;
}
.item-info > p {
    color: #D0D1D2;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.item-info > span {
    position: relative;
    margin-top: 10px;
    color: #5B5B5B;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}
.item-info > span::before {
    position: relative;
    content: "";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg clip-path='url(%23clip0_2875_49499)'%3E%3Cpath d='M9.99984 5.00033V10.0003L13.3332 11.667M18.3332 10.0003C18.3332 14.6027 14.6022 18.3337 9.99984 18.3337C5.39746 18.3337 1.6665 14.6027 1.6665 10.0003C1.6665 5.39795 5.39746 1.66699 9.99984 1.66699C14.6022 1.66699 18.3332 5.39795 18.3332 10.0003Z' stroke='%235B5B5B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2875_49499'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@-webkit-keyframes show {
    0% {
        scale: 0;
        opacity: 0;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}

@keyframes show {
    0% {
        scale: 0;
        opacity: 0;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}
@media screen and (max-width: 1100px) {
    .links {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .live {
        padding: 20px;
    }
    .live > .item {
        display: none;
    }
    .live > .item:last-child {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .main > h1 {
        font-size: 30px;
        text-align: center;
    }
    .main > img {
        height: 40px;
    }
    .links {
        margin-top: 20px;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
    }
    .links > .item {
        height: 46px;
        padding: 0px 14px;
    }
    .links > .item::after {
        width: 18px;
        height: 18px;
    }
    .links > .item > img {
        width: 20px;
        height: 20px;
    }
    .links > .item > p {
        font-size: 14px;
    }
    .logos {
        padding: 20px 0px;
    }
    .logos > img {
        height: 18px;
    }
    footer > p {
        font-size: 14px;
    }
    body {
        background: #0D0D0D;
    }
}
.video {
    max-width: 900px;
    width: 100%;
    margin-top: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.video > * {
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
.super {
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px #ffcc00;
    }
    100% {
        box-shadow: 0 0 20px #ffcc00;
    }
}