header {
    position: relative;
    background-color: $background-header;
    padding-top: 3rem;
    padding-bottom: 3rem;

    @media (max-width: $sm) {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .top-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .brand {
            $brandSize: 64px;
            $smallBrandSize: $brandSize/2;

            display: flex;
            flex-direction: row;

            text-decoration: none;
            color: $text-color;
            user-select: none;

            .brand-logo {
                height: $brandSize;
                width: auto;

                @media (max-width: $md) {
                    height: $smallBrandSize;
                }
            }

            .brand-name {
                line-height: $brandSize;
                vertical-align: middle;
                font-size: 28px;

                margin-left: 2rem;

                @media (max-width: $md) {
                    line-height: $smallBrandSize;
                    font-size: 20px;
                }

                @media (max-width: $sm) {
                    font-size: 16px;
                }
            }
        }

        .site-nav {
            .nav-items {
                display: flex;
                flex-direction: row;
                margin: 0 auto;

                list-style: none;

                .nav-item {
                    a {
                        text-decoration: none;
                        color: $text-color;
                        user-select: none;
                    }
                }
            }
        }
    }

    .hero {
        max-width: 60%;
        margin-top: 4rem;
        margin-bottom: 4rem;

        @media (max-width: $lg) {
            max-width: 75%;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        @media (max-width: $md) {
            max-width: 100%;
            margin-top: 1rem;
        }

        h1 {
            color: $accent-color;
            font-size: 2.5rem;

            @media (max-width: $md) {
                font-size: 1.5rem;
            }
        }

        p {
            font-size: 14px;
            line-height: 2;
        }
    }

    .wave {
        overflow: hidden;
        display: block;

        height: 40px;
        z-index: 3;

        svg {
            position: absolute;
            left: -3%;
            right: -3%;
            bottom: 0;
            width: 106%;
            min-width: 600px;

            fill: $background-main;
        }
    }
}