html, body {
    height: 100%;
}

body {
    min-width: 375px;
    display: flex;
    flex-direction: column;
    background-color: $off-white;

    header {
        background-image: linear-gradient(to bottom, $dundo-sun, $off-white);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 1em 0 3em 0;

        .container {
            max-width: 93.5rem;
            margin: 0 auto;
            padding: 0 2rem;

            .main-logo {
                display: block;
                img {
                    height: 100%;
                    width: 100%;
                }
            }
        }

        nav {
            width: 50%;
            max-width: 100%;
            padding: .5em 0;

            ul {
                display: flex;
                list-style: none;
                justify-content: space-evenly;
                padding: 0 12px;
                li {
                    padding: 0 5px;
                    position: relative;

                    a {
                        font-size: 1.25em;
                        text-decoration: none;
                        color: $dundo-black;
                        font-weight: 500;
                        font-family: Raleway;
                        &.current {
                            font-weight: 700;
                        }

                        &:hover::before {
                            transform: scaleX(1);
                            transform-origin: left;
                        }
                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            bottom: 23px;
                            width: 100%;
                            height: 3px;
                            background-color: #bacbc6;
                            transform: scaleX(0);
                            transition: .3s ease transform, .3s ease color;
                            transform-origin: right;
                        }
                    }
                }
            }
        }


    }

    main {
        padding: 0 15px;
        flex: 1 0 auto;
        display: flex;
        justify-content: center;

        .container {
            max-width: 900px;
        }
    }

    footer {
        display: flex;
        padding: 12px 12px;
        justify-content: center;
        height: 30px;

        .copyright {
            color: $dundo-brown;
            font-size: 11px;
            font-family: sans-serif;
        }
    }
}