@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300..700&display=swap');

/* Container para a imagem com gradiente */
.imagem-banner {
    height: 10em;
    width: auto;
    margin: 1.5%;
    position: relative;
    border-radius: 1%;
    overflow-x: auto;
}

:root {
    background-color: rgb(24, 20, 45);
    margin: 0;
}

.titulo-doc {
    padding: 0.5%;
    margin: 0.5%;
    border: lightblue solid 0.01em;
    color: aliceblue;
    background-color: rgb(14, 37, 78);
    width: 30%;
    justify-content: center;
    justify-self: center;
}

body {
    font-family: "Consolas","monaco",monospace;
    font-weight: 700;
    margin: 0;
    color: rgb(195, 197, 255);
}

p {
    margin: 3%;
}

.footer {
    font-size: small;
    text-align: center;
}

.code-block {
    padding: 3%;
    background-color: rgb(7, 18, 38);
    color: rgb(233, 64, 64);
}

/* Container flexível para layout lado a lado */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza horizontalmente */
    background: rgb(24, 20, 45);
    padding: 2%;
    color: rgb(195, 197, 255);
    font-size: xx-large;
    gap: 10%; /* Espaço entre imagem e texto */
    max-width: 1200px; /* Limita largura máxima */
    margin: 0 auto; /* Centraliza o container */
}

/* Container da imagem */
.image-wrapper {
    flex-shrink: 0; /* Impede que a imagem encolha */
}

/* Texto de apresentação */
.presentation {
    font-size: large;
    margin: 0; /* Remove margem padrão do p */
    max-width: 400px; /* Limita largura do texto */
    text-align: justify; /* Justifica o texto */
    line-height: 1.4; /* Melhora espaçamento entre linhas */
}