/* © 2020-2023 Omar Stefan Evans. All rights reserved. */

/* MARK: Fonts */

/* Montserrat */
@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/Montserrat.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/Montserrat-Italic.woff2') format('woff2');
}

/* Replaces some charcters with versions from from Stylistic Set 1 (ss01).
   
   Replacements (normal):
     - 'a' (U+61): The single storey lowercase 'a' in ss01 harmonizes well with lowercase letters
                   'b', 'd', 'g', 'o', 'p', and, 'q'.
     - 'y' (U+79): The lowercase 'y' in the default set is angular and has a unique descender,
                   wheras in ss01 it is rounded and has the same style descender as 'g'.
   Replacements (italic):
     - 'y' (U+79): As above.
 */
@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/Montserrat.woff2') format('woff2');
    font-feature-settings: "ss01" on;
    unicode-range: U+61, U+79;
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 100 900;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/Montserrat-Italic.woff2') format('woff2');
    font-feature-settings: "ss01" on;
    font-variant: styleset("ss01")
    unicode-range: U+79;
}

/* Exo 2 */
@font-face {
    font-family: 'Exo 2';
    font-weight: 100 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/Exo2.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-weight: 100 900;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/Exo2-Italic.woff2') format('woff2');
}


/* MARK: Main styles */

body {
    margin: 0 16px;
    background-color: hsla(0, 0%, 13%, 1.0);
    color: hsla(0, 0%, 90%, 1.0);
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 1.5;
}

p, h1, h2, h3, h4, h5, h6 { margin: 1.5em 0;  /* matches line-height*/ }

a:link { color: #7ABBFF; }
a:visited { color: #B9A8FF; }

nav ul { list-style-type: none; padding: 0; }
footer a { color: inherit !important; text-decoration: none }

.nobreak { word-break: keep-all; }
.green-text { color: #7D9D00; }
.yellow-text { color: #A1902E; }
.orange-text { color: #C17E62; }
.thin { font-weight: 100; }
.light { font-weight: 300; }
.medium { font-weight: 500; }
.semi-bold { font-weight: 600; }
.bold { font-weight: 700; }
.underline { text-decoration: underline; text-decoration-skip-ink: none;}

.vstack { display: flex; flex-direction: column; }
.expands { flex-grow: 1; }


.page-content { min-height: 100vh; }
.page-header h1 { margin: 1.5rem 0; }
.page-footer { margin-top: 1.5em; }
.photo img { display: block; }
.signature {  margin-left: 1ch; }

@media(min-width: 700px) {
    body { font-size: 24px }
    .wide-media-hstack { display: flex; flex-direction: row; align-items: start; }

    .photo-caption { margin-left: 1em; }
    .photo-caption p:first-child { margin-top: 0 }
}

@media(min-width: 1050px) {
    .page-content { max-width: 1200px; margin: 0 auto; }
    .page-header h1 { font-size: 4em; margin: 0.5em 0; }
}

.social-media-buttons { display: flex; align-items: center; justify-content: center; }
.social-media-buttons img { margin-left: 8px; margin-right: 8px; }
.social-media-buttons a:hover { filter: brightness(80%); }