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

@import url(styles/header.css);
@import url(styles/inicio.css);
@import url(styles/sobre__mim.css);
@import url(styles/projetos.css);
@import url(styles/habilidades.css);
@import url(styles/footer.css);
@import url(styles/dark-mode.css);

:root {
    --branco: #fff;
    --preto: #000;
    --fundo: #F6F6F6;
    --azul: #00C2FF;
    --laranja: #faa200;
    --borda-botao-linkedin: #00FFF0;
    --background-botao-linkedin: rgba(0, 255, 240, 0.06);
    --background2-botao-linkedin: rgba(0, 255, 240, 0.2);
    --borda-botao-github: #C13FB4;
    --background-botao-github: rgba(193, 63, 180, 0.06);
    --background2-botao-github: rgba(193, 63, 180, 0.2);
    --montserrat: 'Montserrat', sans-serif;
    --roboto: 'Roboto', 'monospace';
}

body, html {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--fundo);
    color: var(--preto);
}

a, h3 {
    text-decoration: none;
    color: var(--preto);
}

.botoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 0.5em;
    border-radius: 2em;
    font-weight: 700;
    font-family: var(--roboto);
}

.botao-linkedin {

    border: 2px solid var(--borda-botao-linkedin);

    background: var(--background-botao-linkedin);

    width: 8em;
    height: 2em;

}
.botao-menu-linkedin, .botao-linkedin:hover {
    background: var(--background2-botao-linkedin);
}


.botao-github {

    border: 2px solid var(--borda-botao-github);

    background: var(--background-botao-github);

    width: 8em;
    height: 2em;

}
.botao-menu-github, .botao-github:hover {
    background: var(--background2-botao-github);
}

.logo-linkedin {
    width: 22%;
}
.logo-github {
    width: 23%;
}

.saiba__mais {
    width: 10em;
    height: 2em;

    background-color: var(--azul);

    border: 2px solid var(--borda-botao-linkedin);
    border-radius: 2em;

    font-family: var(--roboto);
    font-weight: 600;

    display: flex;
    justify-content: center;
    align-items: center;
}

.alura {
    text-decoration: underline;
}