header {
    display: flex;
    flex-direction: column;
    font-size: 2em;
    justify-content: center;
    align-items: center;

    & img {
        max-width: 35rem;
        height: min-content;
    }

    & span {
        display: flex;
        text-align: center;
        padding: 0 0.5rem;
    }
}

mdui-card {
    max-width: 1000px;
    width: 100%;
}

main > * > section {
    display: flex;
    flex-direction: column;
    scroll-margin-top: 1em;

    & div,
    mdui-card {
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    gap: 0.5em;
    padding: 1em 2em;

    & h2 {
        font-size: 2em;
    }

    & p {
        font-size: 1.3em;
    }

    &#certificates mdui-card {
        padding: 1em;
        flex-wrap: wrap;

        @media (max-width: 500px) {
            border: none;
        }

        & a {
            min-width: 150px;
            width: 15%;
        }
    }

    &#projects div {
        display: flex;
        flex-direction: column;
        gap: 1em;
        & mdui-card {
            & section {
                margin: 1em;
                padding: 1em;
                display: flex;
                gap: 2rem;
                justify-content: center;
                flex-wrap: wrap;
                & article {
                    & h3 {
                        font-size: 2em;
                        margin: 0.5em 0;
                    }
                    & p {
                        margin: 0;
                    }
                    width: 420px;
                }
                & aside {
                    display: flex;
                    justify-content: center;
                    width: 380px;
                    gap: 1em;
                    & img {
                        border-radius: var(--mdui-shape-corner-medium);
                        border: 2px solid rgb(var(--primary));

                        .double > & {
                            width: 45%;
                        }
                    }
                }
                :nth-child(2) > & {
                    flex-direction: row-reverse;
                }
            }

            @media (max-width: 500px) {
                border: none;

                & section {
                    padding: 0;
                }
            }
        }
    }

    &#about #stats div {
        flex-wrap: wrap;
        & img {
            max-width: 350px;
            min-width: 300px;
        }
    }

    @media (max-width: 1500px) {
        scroll-margin-top: 5em;
    }
}