@import url('https://renan-santos.netlify.app/styles/reset.css');

:root {
    --bg: #fafafa;
    --texto: #2b2b2b;
    --cor-primaria: #ffae0a;
}

@media screen and (prefers-color-scheme: dark) {
    :root{
        --bg: #2b2b2b;
        --texto: #f0f0f0;
    }
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--bg);
    color: var(--texto);
    font-size: 1.1rem;
    background-image: url('../assets/grade.svg');
    background-repeat: repeat;
    background-size: 50px;
}

.corpo {
    position: relative;
    z-index: 2;
    width: min(800px, 100vw);
    margin-inline: auto;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 6rem;
    background: linear-gradient(to top, var(--bg) 50%, transparent 100%), url('../assets/carro-aplicativo.webp');
    background-size: contain;
    background-repeat: no-repeat;
}

.foto-perfil {
    --tamanho: clamp(150px, 50vw, 300px);
    border-radius: 50%;
    border: 10px solid var(--bg);
    object-fit: cover;
}

.hero__titulo {
    font-size: 2.75rem;
    margin-block: 1rem;
    color: var(--cor-primaria);
}

.hero__subtitulo {
    font-size: 1.5rem;
    font-weight: 500;
}

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    gap: 2rem;
    font-size: 1.2rem;
    margin-block: 4rem;

    li {
        border: 1px solid var(--cor-primaria);
        padding: 1rem 2rem;
        border-radius: 500px;
        background-color: var(--bg);

        &.destaque {
            background-color: var(--cor-primaria);
            color: #2b2b2b;
            box-shadow:  2px 2px 5px rgba(0,0,0,0.25),
                         -1px -1px 5px rgba(0,0,0,0.25);
        }
    }
}

.slogan {
    text-align: center;
    line-height: 1.5;
    font-size: 1.2rem;
    margin-bottom: 1em;
}

footer {
    padding: 1.2rem;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    font-size: .75rem;
}