body {
    margin: 0;
    padding: 0;
    /*background: url('/static/img/moon.png');*/
    /*background-repeat: no-repeat;*/
    /*background-attachment: fixed;*/
    /*background-position: right top;*/
}

.background-image {
    position: fixed;
    z-index: 0;
}

#logo-row {
    height: 15vh;
    width: 100%;
    margin: 0 auto;
}

#title-row {
    height: 15vh;
    width: 100%;
    margin: 0 auto;
}

#content-row {
    min-height: 50vh;
    /*overflow: auto;*/  /* interferes with position sticky on the nav */
    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    justify-content: center;
}

footer {
    height: 10vh;
    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: row;  /* not sure I need flex here, but its solving my word wrap problem too */
    justify-content: flex-end;
}

/*.left-box {*/
    /*height: 100%;*/
    /*width: 15%;*/
    /*float: left;*/
/*}*/
/*.center-box {*/
    /*height: 100%;*/
    /*width: 70%;*/
    /*float: left;*/
    /*margin: 0 auto;*/
/*}*/
/*.right-box {*/
    /*height: 100%;*/
    /*width: 15%;*/
    /*float: left;*/
/*}*/