@import "layout.css";

.main {
    max-width: var(--layout-max-width);

    h1 {
        font-size: 3rem;
        font-weight: 900;
        font-family: "Fugaz One", "Poppins", sans-serif;
        color: var(--quinary-color);
    }

    .projects {
        background-color: var(--quaternary-color);
        border-radius: 5px;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        article {
            background-color: var(--secondary-color);
            border-radius: 5px;
            padding: 20px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
            font-size: 1.125rem;

            header {
                font-size: 1.25rem;
            }
        }
    }
}

@media (max-width: 1024px) {
    .main {
        margin: 1.2rem;

        h1 {
            font-size: 2rem;
        }
    }
}