body{
    font-family: 'Inter', sans-serif;
    margin: 0 0 50px 0;
}

#conteudo-pagina-projetos{
    display: grid;
    grid-template-columns: 315px 2fr;
}

.comunidade{
    margin: 32px 32px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#projeto-card{
    display: inline-block;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    margin: 0 0 20px 0;
}

#quadro-projeto{    
    position: relative;
    width: 432px;
    height: 364px;
    background-color: #6BD1FF;
    border-radius: 8px;
}

#projeto-codigo{
    position: absolute;
    width: 368px;
    height: 300px;
    border-radius: 8px;
    background-color: #141414;
    box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.24);
    margin: 32px;
}

.botoes{
    position: absolute;
    margin: 13px 13px 0 295px;
    display: flex;
}

#editor-pequeno{
    display: block;
    position: absolute;
    white-space: pre-wrap;
    outline: none;
    overflow: auto;
    margin: 30px 0 0 0;
    width: 328px;
    height: 230px;
    background-color: #141414;
    border: none;
    color: #F8F8F8;
    font-family: 'Verdana', sans-serif;
    cursor: auto;
}
#editor-pequeno::-webkit-scrollbar{
    width: 10px;
}
#editor-pequeno::-webkit-scrollbar-track{
    background: #333;
    border-radius: 10px;
}
#editor-pequeno::-webkit-scrollbar-thumb{
    background: #555;
    border-radius: 10px;
}

#projeto-info{
    padding: 32px 0 32px 32px;
}

#projeto-titulo{
    font-size: 21px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    margin: 0 0 10px 0;
}

#projeto-descricao{
    color: #ffffff;
    opacity: 0.8;
}

#botao-codigo-desativo{
    background-color:rgba(80, 129, 251, 0.16);;
    border-radius: 16px;
    padding: 17px 15px;
}

#botao-comunidade-ativo{
    background-color:#5081FB;
    border-radius: 16px;
    padding: 17px 15px;
}


.sem-projetos-desativado{
    display: none;
}
.sem-projetos{
    position: absolute;
    margin: 75px 0 0 140px;
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-align: center;
}
.sem-projetos__linha1{
    font-size: 2rem;
    font-weight: bold;
}
.sem-projetos__linha2{
    font-size: 1.5rem;
    color: rgba(255,255,255,0.9);
}
.sinal__projetos{
    margin: 15px 0 0 0;
    width: 30px;
    background: rgba(45, 65, 91, 1);
    border-radius: 8px;
    padding: 10px;
}

.projetos-info-hidden-desativado{
    display: none;
}
.projetos-info-hidden{
    display: flex;
    justify-content: space-between;
    margin: 0 32px 20px 32px;
    animation: aparecer .8s linear;
}
.projetos-info-reacoes{
    width: 100px;
    display: flex;
    justify-content: space-between;
}

.projetos-reacoes-comentario{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.projetos-reacoes-curtida{
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.projetos-info-profile{
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.projetos-reacoes{
    color: #fff;
}
.excluir-projeto{
    margin: 0 0 0 88%;
}

@keyframes aparecer {
    from{opacity: 0;}
    to{opacity: 1;}
}


@media screen and (max-width: 768px){
    #conteudo-pagina-projetos{
        display: flex;
    }
    .comunidade{        
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 32px 64px 32px 32px;
    }
    #quadro-projeto{
        position: initial;
        width: 310px;
        padding: 1px;
    }
    #projeto-codigo{
        position: inherit;
        width: 246px;
    }
    .botoes{
        position: initial;
        margin: 13px 13px 0 172px;
        padding: 15px 0 0 0;
    }
    #editor-pequeno{
        position: initial;
        width: 205px;
        margin: 20px 0 0 0;
    }
    .sem-projetos{
        position: initial;
        margin: 50px 0 0 80px;
    }
}

@media screen and (max-width: 376px){
    #conteudo-pagina-projetos{
        display: flex;
    }
    .comunidade{
        margin: 32px;
    }
    #quadro-projeto{
        position: initial;
        width: 300px;
        padding: 1px;
    }
    #projeto-codigo{
        position: inherit;
        width: 236px;
    }
    .botoes{
        position: initial;
        margin: 13px 13px 0 163px;
        padding: 15px 0 0 0;
    }
    #editor-pequeno{
        position: initial;
        width: 195px;
        margin: 20px 0 0 0;
    }
    .sem-projetos{
        position: initial;
        margin: 30px 0 0 0;
    }
}