.titulo-principal{
    text-align: center;
    font-family:'Courier New', Courier, monospace;
    color: #02c15e;
}

.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca 0.7s infinite;
}
/* Animação aplicada ao content referente a classe *.titulo-principal* resultando num efeito de cursor piscando. */

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}
@keyframes slideInFromBottom {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
.alura {
    animation: slideInFromBottom 0.8s ease-out 1.2s forwards;
    opacity: 0;
            
            
}
.alura span{
    color: var(--quaternary-color);
    font-weight: bold;
}
.principal {
            
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
            
}

/* O Modal (background) */
.modal {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fica no lugar */
    z-index: 1000; /* Fica por cima de tudo */
    left: 0;
    top: 0;
    max-width: 100%; /* Largura total */
    height: auto; /* Altura total */
    overflow: auto; /* Habilita scroll se necessário */
    background-color: rgb(0,0,0); /* Cor de fallback */
    background-color: rgba(0,0,0,0.4); /* Preto com opacidade */
}
/* Conteúdo do Modal */
.modal-content {
    background-color: #1d1c1c;
    margin: 15% auto; /* 15% do topo e centralizado */
    padding: 20px;
    width: 90%; /* Pode ser mais ou menos, dependendo do tamanho da tela */
    border-radius: 10px;
    text-align: center;
}
.modal-content a{
    color: var(--quaternary-color);
    text-decoration: none;
}
.modal-content a:hover{
    text-decoration: underline;
}
/* O Botão de Fechar (x) */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.col{
    display: flex;  
}
.col-1{
    width: 30%;
}
    .col-1 img{
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
            
}
.col-2{
    width: 80%;
    margin-left: 20px;
    text-align: left;
}
.descricao p{
   
    
    font-size: 1.5rem;
   

}