@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap');
@import url(./reset.css);
@import url(./header.css);
@import url(./sidebar.css);
@import url(./projetos.css);

:root {
    --cor-do-cabecalho: #1E5128;
    --cor-de-fundo: #191A19;
    --verde: #4E9F3D;
    --pastel: #D8E9A8;
    --font-family: 'Roboto Mono', monospace;
}

body {
    background-color: var(--cor-de-fundo);
    font-family: var(--font-family);
}

.container {
    border-bottom: 4px solid var(--verde);
    border-radius: 10px;
    background-color: var(--cor-do-cabecalho);
}


.pagina-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.principal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo {
    font-size: 2em;
    font-weight: 700;
    color: var(--pastel);
    text-align: center;
}


@media screen and (min-width: 640px){
    .pagina-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: flex-start;
        justify-items: center;
    }
}