:root {
                --color-green: rgb(7, 235, 7);
                --color-gray: rgb(128, 128, 128);
                --color-red: #f91e4e;
                --color-gray-black: #1e293b;
                --color-gray-title: #334155;
                --color-back: #293445;
}

body
{
                background-color: #0f172a;
}

.main {
                margin: 40px 0px 40px 0px;
}

.inlive {
                width: 10px;
                height: 10px;
                background-color: var(--color-green);
                border-radius: 50%;
                display: inline-block;
                animation: changeColor .7s infinite;
                animation-duration: 0.7s;
                animation-timing-function: ease;
                animation-delay: 0s;
                animation-iteration-count: infinite;
                animation-direction: normal;
                animation-fill-mode: none;
                animation-play-state: running;
                

}

.cardsection {
                border: white 0.5px solid;
                border-radius: 5px;
                position: relative;
                background-color: var(--color-gray-black);
                overflow: hidden;
                
}

.canal {
                border: var(--color-gray) 1px solid;
                border-radius: 5px;
                margin-left: 30px;
                margin-right: 30px;
}

.canal:hover {
                background-color: var(--color-back);
                border-color: var(--color-gray);

}

@keyframes changeColor {
                                100% { background-color: var(--color-green); }
                                0% { background-color: var(--color-gray); }
}

.line {
                border-left: var(--color-red) 3px solid;
                display: block;
}

.title {
                color: #fff;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                transform: skew(-35deg);
}

.header-title{
                background-color: var(--color-red);
                background-repeat: no-repeat;
                block-size: -webkit-fit-content;
                block-size: -moz-fit-content;
                block-size: fit-content;
                display: block;
                left: -10px;
                padding: 9px 50px;
                position: relative;
                transform: skew(35deg);
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content;
}

.header-title .item-game {
                color: #fff;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 24px;
                transform: skew(-35deg);
}

.text-inlive {
                color: var(--color-green);
}

.text-offline {
                color: var(--color-red);
}


.offline {
                width: 10px;
                height: 10px;
                background-color: var(--color-red);
                border-radius: 50%;
                display: inline-block;
                animation: changeColorOffline .7s infinite;
                animation-duration: 0.7s;
                animation-timing-function: ease;
                animation-delay: 0s;
                animation-iteration-count: infinite;
                animation-direction: normal;
                animation-fill-mode: none;
                animation-play-state: running;                
}

@keyframes changeColorOffline {
                                100% { background-color: var(--color-red); }
                                0% { background-color: var(--color-gray); }
}



.btn-red {
                background-color: var(--color-red);
}

@media (max-width: 768px) {
                .line {
                                display: none;
                }
}