@import url("base.css");
@import url("components.css");

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "footer";

    font-size: large;
    background-color: var(--color-60);
    color: var(--color-content);
    width: 100%;
}

header {
    display: grid;
    grid-area: header;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: center;
    justify-items: center;
    padding: 16px;

    div {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 25%;
        }
    }

    nav {
        display: flex;
        justify-self: center;
        gap: 16px;
    }
}

main {
    display: grid;
    grid-area: main;
    max-width: 1200px;
    margin: 0 auto;
    gap: 96px;
    padding: 32px;
}

#hero,
#problem,
#solution,
#about {
    display: grid;
    gap: 24px;
}

#about {
    align-self: start;
}

#contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 64px;

    .contact-text {
        display: grid;
        align-self: start;
        gap: 20px;
    }

    .contact-links {
        display: grid;
        grid-template-columns: 1fr;

        .btn,
        .btn-secondary {
            justify-self: unset;
        }
    }

    .contact-form {
        display: grid;
        gap: 20px;
    }
}

#success {
    display: grid;
    min-height: 60vh;
    gap: 16px;
}

footer {
    display: grid;
    grid-area: footer;
    align-items: center;
    justify-items: center;
    text-align: center;
    color: var(--color-content);
    opacity: 0.7;
    font-size: 0.9rem;
    padding: 32px;
}