video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.jogos {
    padding: 0 !important;
}

.div-video {
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;

    .logo-jogos,
    .logo-jogos-fixed {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        pointer-events: none;
        z-index: 9;
    }

    .logo-jogos-fixed {
        position: fixed;
        opacity: 0;
        z-index: initial;
    }

    &>.sombra {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 50px 20px #000;
        transition-duration: .5s;
        z-index: 10;

        & .play,
        & .play-fixed {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            background-color: #0008;
            backdrop-filter: blur(20px);
            border-radius: 50%;
            opacity: 1;
            transition-duration: .5s;
            z-index: 1 !important;

            & span {
                font-size: 40px;
            }

            &.efeito-hover:hover {
                transform: translate(-50%, -50%)scale(1.1);
            }
        }

        & .play-fixed {
            position: fixed;
            display: none;
        }
    }

    &>.videos {
        position: absolute !important;
    }
}

.div-info {
    position: relative;
    width: 100vw;
    height: 95svh;
    background-color: #00000088;
    box-shadow: inset 0 0 50px 20px #000;
    backdrop-filter: blur(20px);
    overflow-y: hidden;
    z-index: 10 !important;

    & .div-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        flex: 1;
        width: 100%;
        height: 100%;
        padding: 50px 15px;
        padding-bottom: 125px;
        margin: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar-track {
            background-image: none !important;
        }

        & .hr-jogos {
            height: 2px;
            width: 40px;
            background-color: #ffbb00;
            margin: 10px auto 20px;

            & span {
                opacity: 0 !important;
            }
        }

        & .indice {
            width: 200px !important;
            background-color: rgb(0, 0, 0, 0.25);
        }

        & ul {
            margin: 18px 0 !important;

            li {
                text-align: left !important;
                font-size: 12px;
            }
        }

        & p {
            font-size: 12px;
        }

        h1 {
            font-size: 25px;
        }

        h3 {
            font-size: 20px;
        }

        & h5 {
            width: 100%;
            text-align: left;
            border-left: 5px solid #ffbb00;
            font-size: 15px;
            margin-top: 30px !important;
            margin-bottom: 0 !important;
            padding: 0 10px;
        }
    }
}

#indice-jogos {
    display: inline-flex !important;
    padding: 30px 20px !important;
    width: 80%;
    margin: 0 !important;

    & ul>ul {
        margin-left: 25px;
    }
}