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

.content {
  flex: 1;
}

footer {
    --dq-footer-content-color: white;
    --dq-footer-content-bg: #444B53;
    --dq-footer-content-link-color: var(--dq-footer-content-color);
    --dq-footer-content-link-color-visited: var(--dq-footer-content-link-color);
    --dq-footer-content-link-color-hover: var(--dq-footer-content-link-color);
    --dq-footer-content-link-color-focus: var(--dq-footer-content-link-color);

    --dq-footer-bottom-color: white;
    --dq-footer-bottom-bg: black;
    --dq-footer-bottom-link-color: var(--dq-footer-bottom-color);
    --dq-footer-bottom-link-color-visited: var(--dq-footer-bottom-link-color);
    --dq-footer-bottom-link-color-hover: var(--dq-footer-bottom-link-color);
    --dq-footer-bottom-link-color-focus: var(--dq-footer-bottom-link-color);

    margin-top: 60px;

    .content {
        padding-top: 40px;
        padding-bottom: 40px;

        color: var(--dq-footer-content-color);
        background-color: var(--dq-footer-content-bg);

        a {
            color: var(--dq-footer-content-link-color);

            &:visited {
                color: var(--dq-footer-content-link-color-visited);
            }
            &:hover {
                color: var(--dq-footer-content-link-color-hover);
            }
            &:focus {
                color: var(--dq-footer-content-link-color-focus);
            }
        }
    }

    .bottom {
        padding-top: 15px;
        padding-bottom: 15px;

        color: var(--dq-footer-bottom-color);
        background-color: var(--dq-footer-bottom-bg);

        p {
            margin: 0;

            // @media (min-width: $screen-xs-max) {
            //     display: inline-block;
            //     margin-right: 20px;
            // }
        }

        a {
            color: var(--dq-footer-bottom-link-color);

            &:visited {
                color: var(--dq-footer-bottom-link-color-visited);
            }
            &:hover {
                color: var(--dq-footer-bottom-link-color-hover);
            }
            &:focus {
                color: var(--dq-footer-bottom-link-color-focus);
            }
        }
    }
}
