html {
    color: var(--cor-texto-principal);
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte-primaria);
    margin: 0 auto;
    max-width: 1120px;
    background: var(--cor-fundo);
    background-size: 120% 120%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'main'
        'footer';

    padding-top: 60px;
}

main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

.titulo-secao {
    text-align: center;
    padding: 10px 0;
    font-size: 40px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--cor-texto-branco);
}

.subtitulo-habilidades {
    text-align: center;
    margin: 10px 0;
    font-size: 26px;
    font-weigth: 300;
    color: var(--cor-texto-branco);
}

.tela {
    min-height: calc(100vh - 60px);
    display: grid;
    align-content: center;
    padding: 60px 15px;
    scroll-margin-top: 60px;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}