@media screen and (max-width: 1080px) {
    html {
        font-size: 20px;
    }
}

:root {
    --navy: #122244;
    --purple: #874285;
    --teal: #009CA0;
    --navy-border: 1px solid var(--navy);
    --teal-border: 1px solid var(--teal);
    --purple-border: 1px solid var(--purple);
    --white-border: 1px solid white;
}
html, body {
    width: 100%;
    margin: 0;
    font-family: 'Gontserrat', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.layout {
    width: 100vw;
    height: 100vh;

    display: grid;
    grid:
        "header" auto
        "duotone" auto        
        "navbar" auto
        "main" 1fr
        "footer" auto
        / 1fr;
    gap: 0;
}

.header {
    grid-area: header;
    background: linear-gradient(to bottom, #021234 0%, var(--navy) 30%, var(--navy) 70%, #021234 100%);
    color: white;
    padding: 20pt;
}

.duotone {
    grid-area: duotone;
    background: linear-gradient(to right, var(--purple) 40%,var(--teal) 60%);
    /* background-color: var(--purple); */
    min-height: 3pt;
    display: block;
    width: 100%;
}

.logo_text {
    margin-left:auto;
    margin-right:auto;
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
}

.dove_only {
    height: 30pt;
}

.left_block {
    float: left;
    display: block;
}

.right_block {
    text-align: right;
    display: block;
    float: right;
}

.main {
    grid-area: main;
    background-color: white;
}

.main_content {
    height: 100%;
    text-align: center;
    vertical-align: middle;

    margin-left: 40px;
    margin-right: 40px;

    font-weight: normal;
    font-style: normal;    
}

.billboard {
    position: relative;
    top: 10%;
    transform: translateY(-50%);
    margin-left: 40px;
    margin-right: 40px;
}

.section_heading {
    border-left: 20px var(--navy) solid;
    padding-left: 8px;
    color: var(--navy);
}

.content_section {
    margin-top: 20px;
    margin-bottom: 40px;
}

.footer {
    grid-area: footer;
    background-color: var(--teal);
    color: black;
    padding: 8pt;
    vertical-align: middle;
    border-top: 1px solid var(--navy);
    border-bottom: 1px solid var(--navy);
}

.footer-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.footer-grid > div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
}

@media (max-width: 1080px) {
    .footer-grid {
        flex-direction: column;
    }
}

.address-align {
    display: flex;
}

.left-column {
    text-align: left;
    font-size: smaller;
}
.middle-column {
    text-align: justify;
    font-size: smaller;
}

.right-column {
    text-align: right;
    font-size: smaller;
}

.logo {
    margin-right: 2px;
}

/* --------------------------------------------------------------------------*/
/*                                 Menu stuff                                */
/* --------------------------------------------------------------------------*/
.navbar {
    grid-area: navbar;
    background-color: var(--navy);
    color: white;
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
}

.menu-column {
    flex: 1 1 200px;
    list-style-type: none;
}

.menu-column ul {
    display: flex;
    flex-direction: row;
}

.menu-column ul li {
    list-style-type: none;
}

.menu-item-right {
    margin-left: auto;
    margin-right: 40px;
}

.menu-column-expand {
    flex-grow: 1;
}

.menu-column li:not(:last-child) {
    margin-right: 20px;
}

.menu-column li a {
    text-decoration: none;
    color: white;
}

@media (max-width: 1080px) {
    .disabled {
        font-size: 1.5em;
    }
    .nav-menu {
        flex-direction: column;
    }

    .menu-column {
        flex-basis: auto;
    }

    .menu-column ul {
        flex-direction: column;
        margin: 0;
    }

    .menu-column ul li {
        text-align: center;
        margin-left: -40px; /* Can't figure out why! */
        padding: 10px
    }

    .menu-column ul li a {
        font-size: 1.5em;
    }

    .menu-item-right {
        margin-left: 0;
        margin-right: 0;
    }

    .menu-column li:not(:last-child) {
        margin-right: 0;
        border-bottom: var(--teal-border);
    }

}

span > a {
    color: white;
}

span > a:hover {
    color: yellow;
}

.menu_item:active {
    font-weight: 600;
}

div.privacy {
    padding-top: 8px;
}

div.privacy > a {
    color: black;
    font-size: 0.8em;
}

@media screen and (max-width: 750px) {
    div.privacy > a {
       font-size: large
    }
}

/* --------------------------------------------------------------------------*/
/*                               Box layout stuff                            */
/* --------------------------------------------------------------------------*/
.m4 {
    margin: 4pt;
}

.m4-left {
    margin-left: 4pt;
}

.m4-right {
    margin-right: 4pt;
}

/* --------------------------------------------------------------------------*/
/*                                 Text stuff                                */
/* --------------------------------------------------------------------------*/
.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.justify {
    text-align: justify-all;
}

.disabled {
    color: gray;
}

.space1-5 {
    line-height: 1.5em;
}

/* --------------------------------------------------------------------------*/
/*                                 Font stuff                                */
/* --------------------------------------------------------------------------*/
.bold {
    font-weight: bold;
}

.semi-bold {
    font-weight: 600;
}

.medium {
    font-weight: 500;
}

.thin {
    font-weight: 100;
}

.xx-large {
    font-size: xx-large;
}

.x-large {
    font-size: x-large;
}

.large {
    font-size: large;
}

.small {
    font-size: small;
}

.smaller {
    font-size: smaller;
}

.x-small {
    font-size: xx-small;
}

.informational {
    display: block;
    font-style: normal;
    padding-top: 4px;
    font-size: 0.7em;
    color: slategray;
}

.informational > a {
    color: #122244;
    text-decoration: underline;
}

.informational > a:hover {
    color: #874285;
}

.scripture {
    font-style: oblique;
    font-weight: normal;
}