@media (max-width: 860px) {

    .titulo {
        margin: 18px;
        font-size: 28px;
        
    }

    .espaco-letras {
        font-size: 28px;
        margin-top: 0px;
    }

    h2 {
        font-size: 20px;
        padding: 0px;
    }

    .aviso {
        font-size: 20px;
        margin-top: 0px;
    }


    .forca {
        position: absolute;
        right: 15%;
        top: 10%;
        z-index: 0;
    }


    .letras {
        top: 70%;
    }

    .letras ul {
        gap: 4px;
        margin-bottom: 5px;
    }

    .letras ul li button {
        width: 26px;
        height: 35px;
        text-align: center;
        font-size: 15px;
    }



    nav.menu-lateral {
        width: 35px;
        padding: 10px 0 10px .5%;
        box-shadow: 3px 0 0 rgb(121, 19, 180);
    }

    nav.menu-lateral.expandir {
        width: 100%;
    }

    .btn-expandir {
        padding: 0px;
    }

    .btn-expandir>i {
        font-size: 30px;
    }

    .ul-menu .item-menu a {
        font-size: 18px;
    }

    .ul-menu .item-menu a .icon>i {
        font-size: 18px;
        margin-left: 5px;
    }


    .popup {
        font-size: 15px;
    }

    .popup button {
        width: 120px;
        font-size: 15px;
    }

    .temas-cards{
        width: 98%;
        
    }
    .card-box{
      
        width: 120px;
        padding: 35px 0px 35px 0px;
      
    }
    
    .card{
        font-size: 15px;
    }
    .icon{
        font-size: 15px;
    }
    .card-box:hover{
        transition: 0s;
        transform: scale(1)
    
    }



}