/*
    Standard base text: headers
 */
@font-face {
    font-family: "Sono Regular";
    src: url(fonts/Sono/static/Sono-Regular.ttf) format("truetype");
}

/*
    Standard base text: body
 */
@font-face {
    font-family: "Sono Light";
    src: url(fonts/Sono/static/Sono-Light.ttf) format("truetype");
}

/*
    Standard base text: links, other
 */
@font-face {
    font-family: "Sono Extra Light";
    src: url(fonts/Sono/static/Sono-ExtraLight.ttf) format("truetype");
}

/*
    For distinct content
*/
@font-face {
    font-family: "Epilogue";
    src: url(fonts/Epilogue/static/Epilogue-ExtraLight.ttf) format("truetype");
}

:root {
    /* LIGHT MODE - comfort coffee palette */
    /* https://www.schemecolor.com/hex/FDFCF8 */
    /* Inspired by https://www.devroom.io/ */
    --lm-bg-color: #FDFCF8;
    --lm-text-color: black;
    --lm-soft-border-color: #CCCAC8;
    --lm-coffee-brown: black;
    --lm-coffee-contrast: #443229;

    /* default DARK MODE - space color palette */
    --dm-vv-pale-grey: #E5E5E5; /* medium light */
    --dm-vv-dark-blue: #0B1222; /* medium dark */
    --dm-vvv-dark-blue: black; /* very dark */
    --dm-high-contrast: #FCA311;
    --dm-soft-background: rgb(255, 255, 255, 0.05);
    
    /* --------- */

    --mode-bg-color: var(--dm-vv-dark-blue);

    --mode-nav-bg-color: var(--dm-vvv-dark-blue);
    --mode-nav-text-color: var(--dm-vv-pale-grey);
    --mode-nav-border-color: var(--dm-vvv-dark-blue);

    --mode-highlight-bg-color: var(--dm-vv-pale-grey);
    --mode-highlight-bg-color-alt: var(--dm-high-contrast);

    --mode-footer-bg-color: var(--mode-nav-bg-color);
    --mode-footer-text-color: var(--mode-nav-text-color);

    --mode-soft-highlight-bg-color: var(--dm-soft-background);
}

.light_mode {
    --mode-bg-color: var(--lm-bg-color);

    --mode-nav-bg-color: var(--lm-bg-color);
    --mode-nav-text-color: var(--lm-text-color);
    --mode-nav-border-color:  var(--lm-soft-border-color);

    --mode-highlight-bg-color: var(--lm-coffee-brown);
    --mode-highlight-bg-color-alt: var(--lm-coffee-contrast);

    --mode-footer-bg-color: var(--mode-highlight-bg-color);
    --mode-footer-text-color: var(--mode-nav-bg-color);
}

html {
    font-family: "Sono Light", monospace;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background-color: var(--mode-nav-bg-color);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 200;
    line-height: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

h1 {
    margin: 0;
    padding: 0;
}

.navbar {
    overflow: hidden;
    background-color: var(--mode-nav-bg-color);
    border-bottom: 1px solid var(--mode-nav-border-color);
    top: 0;
    width: 100%;

}

.navbar a {
    float: left;
    display: block;
    color: var(--mode-nav-text-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background: var(--mode-nav-text-color);
    color: var(--mode-nav-bg-color);
}

.footer {
    background-color: var(--mode-footer-bg-color);
    color: var(--mode-footer-text-color);
    text-align: center;
    min-height: 32px;
    font-size: 1em;
    padding: 3em;
    padding-top: 1%;
    padding-top: 1em;
    padding-bottom: 5em;
}

.footer .acknowledgement {
    font-family: "Epilogue", 'Times New Roman', Times, serif;
    padding-top: 1em;
    font-size: 0.9em;
    text-align: left;
}

.LayoutContent,
.block,
.headerTitleContent {
    background-color: var(--mode-highlight-bg-color);
}

.NavPageContent,
header,
.LayoutContent {
    background-color: var(--mode-bg-color);
}

.headerTitleContent {
    color: var(--mode-nav-bg-color);
    border-radius: 5px;
    margin: 1em;
}

.roundedContentBlock-white {
    border-style: solid;
    border-width: 2px;
    border-color: var(--mode-highlight-bg-color);
}

.roundedContentBlock-gold {
    border-style: dashed;
    border-width: 0.5px;
    border-color: var(--mode-highlight-bg-color-alt);
}

.roundedContentBlock-white,
.roundedContentBlock-gold {
    color: var(--mode-highlight-bg-color);
    line-height: 1.5;
    font-size: 16px;
    width: 45vmax;
    text-align: left;
    border-radius: 10px;
    margin: 1em;
    padding: 0.5em;
}

.roundedContentBlock-white p,
.roundedContentBlock-white ul,
.roundedContentBlock-gold p,
.roundedContentBlock-gold ul {
    margin-left: 2%;
    margin-right: 2%;
}

.roundedContentBlock__careerLogo {
    margin-right: 1%;
    max-width: 100px;
    float: right;
    padding: 1%;
}

.roundedContentBlock__title {
    font-family: "Sono Regular";
    width: 95%;
    background-color: var(--mode-soft-highlight-bg-color);
}

.roundedContentBlock-imageContainer {
    text-align: center;
    background-color: var(--mode-soft-highlight-bg-color);
    padding-top: 1em;
    padding-bottom: 1em;
}

.roundedContentBlock-imageContainer__image {
    max-height: 200px;
}

.imageContentBlock {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1em;
    width: 95%;
    background-color: var(--mode-soft-highlight-bg-color);
}

.imageContentBlock-imageContainer {
    padding: 1em;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.imageContentBlock-imageContainer-textColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.imageContentBlock-imageContainer__image {
    max-height: 250px;
}

.imageContentBlock-imageContainer__spanText {
    color: var(--mode-highlight-bg-color);
    font-size: 0.40em;
    font-weight: 100;
}

.landingAction {
    border: 0.5px dashed var(--mode-highlight-bg-color-alt);
    border-radius: 5px;
    margin: 0.4em;
}

.landingActionUnderlinedContainer {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
}

.NavPageContent {
    /* Minimum browser font size; grows slowly (half the rate of screen growth) */
    font-size: calc(1em + 0.25vw);
}

.LayoutContent {
    margin: 0;
    min-height: 100vh;
    text-align: center;
    font-size: calc(0.75em + 0.4vw);
}

.goldenList {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--mode-highlight-bg-color);
}

.goldenListItem {
    padding-left: 1em;
    text-indent: -.7em;
}

.goldenListItem::before {
    content: "• ";
    color: var(--mode-highlight-bg-color-alt);
}

.NavPageCTA {
    display: inline-block;
    font-size: 1em;
    font-weight: 800;
    margin: 0;
    padding: 0;
}

.landingActionContainer {
    font-size: 0.75em;
    width: 45vmax;
}

.landingContainer {
    font-size: calc(0.8em + 2vmin);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header {
    display: flex;
    width: 45vmax;
}

.headerTitleContent {
    align-items: center;
    justify-content: space-between;
}

.headerTitleContent-text {
    margin-left: 0.4em;
    text-align: left;
}

.headerTitleContent-text p {
    font-size: 16px;
    text-align: left;
}

.headerTitleContent-subTitle {
    font-size: 0.75em;
    display: inline-block;
    margin-left: 0.4em;
}

.headerSupportText-right {
    color: var(--mode-highlight-bg-color-alt);
    font-size: 0.5em;
    font-style: italic;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0.2rem;
}

.headerSupportText-left {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.headerSupportText-left {
    .link {
        width: 1em;
    }
}

.socialIcon {
    padding: 0.2em;
    margin-bottom: 0.2em;
    max-width: 40px;
}

.quoteIcon {
    padding: 0.2em;
    margin-bottom: 0.2em;
    max-width: 12px;
    vertical-align: bottom;
}

.quoteText {
    font-family: "Epilogue", 'Times New Roman', Times, serif;
    font-size: 1em;
}

.blockContainer {
    display: flex;
    height: 1em;
}

.blockContainer-left {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.blockContainer-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.soundclipContainer {
    color: var(--mode-highlight-bg-color);
    font-size: calc(0.3em + 2vmin);
    font-weight: 300;
    max-width: 45vmax;
}

.link,
.link:hover,
.link:link,
.link:visited,
.link:focus,
.link:active {
    font-family: "Sono Extra Light", monospace;
    background-color: transparent;
}

.internalLink {
    color: var(--mode-highlight-bg-color);
    text-decoration: underline;
    text-decoration-color: var(--mode-highlight-bg-color);
    text-decoration-style: dotted;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3em;
}

/* Inspired by https://cassidoo.co/ */
.externalLink {
    color: var(--mode-highlight-bg-color-alt);
    text-decoration: underline;
    text-decoration-color: var(--mode-highlight-bg-color-alt);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3em;
}