:root {
    --main-font: Georgia, 'Times New Roman', Times, serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--main-font);
    font-size: 1.1rem;
}

p {
    margin-block: 1em;
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 1em 0.5em;
}

a {
    color: purple;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    & > header, & > footer {
        flex-grow: 0;
        flex-shrink: 0;
    }

    & > main {
        flex-grow: 1;
    }
}

header {
    max-width: 900px;
    width: 100%;
    margin: auto;
    margin-block: 1em;

    @media (max-width: 932px) {
        margin-inline: 16px;
    }

    & > .logo {
        color: black;
        text-decoration: none;
        font-size: 1.5em;
        font-weight: 700;
    }
}

main {
    margin-block: 1em;
}

footer {
    max-width: 900px;
    margin: auto;
    margin-block: 1em;

    & > ul {
        list-style-type: none;
        display: flex;
        flex-direction: row;

        & > li {
            & > a {
                text-decoration: none;

                & > img {
                    padding-inline: 0.3em;
                    height: 24px;
                }
            }
        }
    }
}

section {
    max-width: 900px;
    margin: auto;

    @media (max-width: 932px) {
        margin-inline: 16px;
    }
}

.hero {
    display: flex;
    flex-direction: row;
    align-items: center;

    & > .hero-text {
        flex: 0.8;
    }

    & > .hero-img {
        width: 25%;
        margin-inline-start: 8px;
        border-radius: 50%;
    }

    @media (max-width: 700px) {
        flex-direction: column-reverse;

        & > .hero-img {
            width: 250px;
            margin-inline: 0;
            margin-block-end: 8px;
        }
    }
}

.timeline {
    list-style-type: none;

    & > li {
        margin-block: 0.75em;

        & > .aside {
            float: inline-end;
            margin-inline-start: 1em;
            margin-block-end: 0.5em;
        }
    }
}