:root {
    --main: #00062a;
    --back: #efeff3;
    --accent: #0371B5;
    --accent-light: rgba(0, 64, 104, 1);
}

@media (prefers-color-scheme: dark) {
     :root {
        --main: #f2e3d5;
        --back: #00062a;
        --accent: #047DC8;
         --accent-light: rgba(187, 222, 245, 0.94)
    }
}

body,
html {
    background: var(--back);
    color: var(--main);
    margin: 0;
    padding: 0;
    font-family: reason-new, sans-serif;
    font-weight: 300;
    font-display: swap;
    line-height: 1.5em;
}

body .sl-overlay {
    background: var(--back);
}

body .sl-wrapper .sl-close,
body .sl-wrapper .sl-navigation .sl-next,
body .sl-wrapper .sl-navigation .sl-prev,
body .sl-wrapper .sl-spinner {
    color: var(--main);
}

p {
    margin: 1em auto;
}

p+iframe {
    margin-top: 2em;
}

footer {
    min-height: 15vh;
}

h2,
h3 {
    margin-top: 4em;
    margin-bottom: 1.2em;
}

.container > h3:first-child {
    margin-top: 0
}

h2 {
    margin-top: 2em;
}

h4 {
    margin-top: 2em;
}

h3 > small,
h4 > small{
    font-weight: 300;
    color: var(--accent-light);
    padding-left: .2em;
}

a,
a:active,
a:visited,
a:focus,
a:hover {
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}
.gallery a {
    border-bottom: none;
    text-decoration: none;
}

@media screen and (min-width: 767.98px) {
    .hide-desktop {
        display: none;
    }
}

@media screen and (max-width: 767.98px) {
    .hide-xs {
        display: none;
    }
}


/* HEADER */

#center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45vh;
}

#mariusmandal-no-page #center-container {
    min-height: 30vh;
    height: unset;
}
@media screen and (max-width: 767.98px) {
    #mariusmandal-no-page #center-container {
        padding-top: 5vh;
        padding-bottom: 7vh;
    }
    #mariusmandal-no-page #center-container #slogan {
        margin-top: 3vh;
    }
}
#mariusmandal-no #center-container {
    height: 90vh;
    flex-direction: column;
}

#mariusmandal-no #brand-container {
    margin-bottom: 4rem;
}

#brand-container {
    text-align: center;
}

#brand {
    text-align: center;
    fill: var(--main);
    width: 28vw;
    margin: 1.5em 1em;
}

@media screen and (min-width: 767.98px) {
    #brand {
        /* 30em = (bounding box w1117 / h76 * 2em) */
        min-width: 30em;
    }
}

#slogan {
    font-family: reason-new, sans-serif;
    font-display: swap;
    font-weight: 300;
    font-style: normal;
    margin-left: 10vw;
    margin-right: 10vw;
}

@media screen and (max-width: 767.98px) {
    #center-container {
        height: 60vh;
    }
    #brand {
        width: 60vw;
        margin: 5vw 1em;
    }
    #slogan {
        font-size: 3vw;
    }
}

@media screen and (max-width: 575.98px) {
    #brand {}
    #slogan {
        font-size: 4vw;
    }
}


/* CONTENT */

#two-part {
    max-width: 80vw;
    margin-left: 10vw;
    display: flex;
    flex-direction: column;
}

#center-container > article {
    text-align: center;
    padding-left: 10vw;
    padding-right: 10vw;
}

@media screen and (min-width: 1198.98px) {
    #two-part {
        flex-direction: row;
    }
    #two-part div+div {
        margin-left: 4em;
    }
    #intro {
        min-width: 20vw;
    }
}

span.type {
    color: var(--main);
    text-transform: uppercase;
    font-size: .8rem;
}

.gallery {
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
}

.gallery img {
    width: calc(100%/3 - (2 * 4px));
    margin: 2px;
}

@media screen and (min-width: 767.98px) {
    .gallery img {
        width: calc(100%/6 - (2 * 4px));
    }
}

p#business {
    margin-bottom: 5em;
    margin-top: calc(5em - 4rem);
}
p#socials-intro {
    margin-bottom: -.2em;
}
p#email {
    margin-top: -.2em;
}

.indent {
    margin-left: 2em;
}