.topo-repositorio{
    background: rgb(0, 91, 170);
    background: linear-gradient(180deg, rgba(0, 91, 170, 1) 0%, rgba(64, 147, 219, 1) 100%);
    padding: 80px 0px;
    color: #fff;
    margin-top: -2px;
    & h1{
        font-size: 2rem;
        text-align: center;
        margin: 15px 0;
        line-height: 1.2;
        font-weight: 700;
        width: 100%;
    }
    @media screen and (max-width: 480px) {
       padding: 30px 20px;
    }
}
.repositorio{
    display: flex;
    flex-direction: row;
    padding: 40px 5%;
    gap: 2rem;
    flex-wrap: wrap;
    & h2{
        font-size: 3rem;
        color: var(--azul1);
        text-align: center;
        margin: 10px auto 10px;
        line-height: 1.2;
        font-weight: 700;
        width: 100%;
        &::after{
            content: '';
            display: block;
            margin: 15px auto 0;
            background: #00d9ff;
            width: 50px;
            height: 5px;
            border-radius: 15px;
        }
    }
    & .filtro {
        width: calc(30% - 2rem);
        background: rgb(247, 247, 247);
        padding: 20px;
        border-radius: 15px;
        position: sticky;
        top: 120px;
        margin: 20px 0;
        max-height: calc(100vh - 130px);
        overflow-x: hidden;
        overflow-y: scroll;
        &::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 8px;
            height: 60px;
        }
        
        &::-webkit-scrollbar {
            width: 10px;
            height: 40px;
            border-radius: 8px;
            background-color: transparent;
        }
        
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: var(--azul2);
        }
        & .navbar-expand-xl {
            width: 100%;
            flex-direction: column;
        }
        & .navbar{
            padding: 0;
        }
        & .navbar-expand-xl .navbar-collapse{
            flex-direction: column;


        }
        #search {
            margin-bottom: 10px;
            color: #000;
            &::focus {
                border: solid 1px var(--azul2);
            }
            &::placeholder {
                color: #000;
            }
        }
        #ordenacao{
            width: 100%;
        }
        & input {
            background: #fff;
            width: 100%;
            border: solid 1px #fff;
            border-radius: 10px;
            padding: 12px 15px;
            outline: 0;
            width: 100%;
            transition: .3s;
            font-size: .85rem;
            &:focus{
                border: solid 1px var(--azul2);
            }
            & button[type="submit"] {
                background: var(--azul2);
                border: 0;
                outline: 0;
                color: #fff;
                padding: 8px 25px;
                border-radius: 15px;
                margin: 15px 0 0;
                transition: .3s;
                cursor: pointer;
            }
            button[type="submit"]:hover {
                background: var(--azul1);
            }
            &::placeholder {
                color: #000;
            }
        }
        & select {
            background: #fff;
            width: 100%;
            border: solid 1px #fff;
            border-radius: 10px;
            padding: 12px 15px;
            outline: 0;
            width: 100%;
            transition: .3s;
            font-size: .85rem;
            margin-bottom: 5px;
            &:focus {
                border: solid 1px var(--azul2);
            }
            &::placeholder {
                color: #000;
            }
            & option {
                padding: 5px;
                font-size: .75rem;
            }
        }
        & label {
            margin: 5px 0 3px;
            font-size: .9rem;
            color: var(--azul1);
            display: block;
            width: 100%;
            font-weight: 600;
        }
    }
    & main {
        width: calc(70% - 2rem);
        & .jogo{
            margin: 20px 0;
            padding: 30px;
            border: solid 1px #cbcbcb;
            border-radius: 15px;
            transition: .3s;
            font-size: .9rem;
            cursor: pointer;
            &:hover{
                background: #f1f1f1;
            }
            & h5{
                margin: 0;
                color: var(--azul1);
                font-weight: 700;
                line-height: 1.2;
                margin: 0 0 5px;
            }
            & strong{
                color: var(--azul1);
            }
            & a{
                & button{
                    display: block;
                    margin-top: 8px;
                    background: var(--azul1);
                    padding: 6px 30px;
                    border: 0;
                    border-radius: 5px;
                    color: #fff;
                    transition: .3s;
                    cursor: pointer;
                    &:hover{
                        background: var(--azul2);
                    }
                }
            }
        }
    }
    @media (min-width: 1441px) {
        padding: 40px 10%;
        & .filtro {
            padding: 30px;
        }

    }

    @media screen and (max-width: 1024px) {
            flex-direction: column;
            padding: 0;
            gap: 0;
            & .filtro {
                min-height: auto;
                padding: 15px 30px;
                margin: 0;
                width: 100%;
                position: sticky;
                top: 78px;
                z-index: 9999;
                display: flex;
                flex-direction: column-reverse;
                border-radius: 0;
            }
            & .navbar{
                width: 100%; padding: 0;
            }
            & .navbar-toggler {
                padding: 0;
                width: auto;
                display: flex;
                justify-content: center;
                font-weight: 500;
                font-size: 1.1rem;
                color: #000;
                & i{
                    color: var(--azul2);
                }
            }
            & .resultados{
                border: 0; 
                outline: 0; 
                margin-top: 30px; 
                background: var(--azul2); 
                width: 100%; 
                padding: 15px; 
                border-radius: 35px; 
                color: #fff; 
                font-weight: 600;
                & i{
                    color: #00d9ff;
                }
                &  a{
                    color: #fff; 
                    text-decoration: none;
                }
            }
            & main{
                width: 100%;
                padding: 30px;
            }

            }

    @media screen and (max-width: 480px) {
        & main {
            padding: 0;
            & .jogo {
                margin: 0;
                padding: 30px;
                border: 0;
                border-bottom: solid 1px #cbcbcb;
                border-radius: 0;
                &:last-child{
                    border-bottom: 0;
                }
             }
        }

    }
}