/* fonts */
@font-face {
    font-family: Chough;
    src: url(/assets/fonts/Chough-Regular.woff);
}

@font-face {
    font-family: Chough;
    src: url(/assets/fonts/Chough-Italic.woff);
    font-style: italic;
}

@font-face {
    font-family: Chough;
    src: url(/assets/fonts/Chough-Bold.woff);
    font-weight: bold;
}

@font-face {
    font-family: Chough;
    src: url(/assets/fonts/Chough-BoldItalic.woff);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Chough;
    src: url(/assets/fonts/Chough-Black.woff);
    font-weight: 900;
}

@font-face {
    font-family: Chough;
    src: url(/assets/fonts/Chough-BlackItalic.woff);
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: Fretless;
    src: url(/assets/fonts/Fretless-Regular.woff);
}

@font-face {
    font-family: Fretless;
    src: url(/assets/fonts/Fretless-Italic.woff);
    font-style: italic;
}

@font-face {
    font-family: Fretless;
    src: url(/assets/fonts/Fretless-Bold.woff);
    font-weight: bold;
}

@font-face {
    font-family: Fretless;
    src: url(/assets/fonts/Fretless-BoldItalic.woff);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Fretless;
    src: url(/assets/fonts/Fretless-Black.woff);
    font-weight: 900;
}

@font-face {
    font-family: Fretless;
    src: url(/assets/fonts/Fretless-BlackItalic.woff);
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: Reckonly;
    src: url(/assets/fonts/Reckonly-Regular.woff);
}

@font-face {
    font-family: Reckonly;
    src: url(/assets/fonts/Reckonly-Bold.woff);
    font-weight: bold;
}

@font-face {
    font-family: Reckonly;
    src: url(/assets/fonts/Reckonly-Black.woff);
    font-weight: 900;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-Regular.woff);
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-Italic.woff);
    font-style: italic;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-Bold.woff);
    font-weight: bold;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-BoldItalic.woff);
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-Black.woff);
    font-weight: 900;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-BlackItalic.woff);
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-Condensed.woff);
    font-stretch: condensed;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-CondensedItalic.woff);
    font-style: italic;
    font-stretch: condensed;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-CondensedBold.woff);
    font-weight: bold;
    font-stretch: condensed;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-CondensedBoldItalic.woff);
    font-weight: bold;
    font-style: italic;
    font-stretch: condensed;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-CondensedBlack.woff);
    font-weight: 900;
    font-stretch: condensed;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-CondensedBlackItalic.woff);
    font-weight: 900;
    font-style: italic;
    font-stretch: condensed;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-Expanded.woff);
    font-stretch: expanded;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-ExpandedItalic.woff);
    font-style: italic;
    font-stretch: expanded;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-ExpandedBold.woff);
    font-weight: bold;
    font-stretch: expanded;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-ExpandedBoldItalic.woff);
    font-weight: bold;
    font-style: italic;
    font-stretch: expanded;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-ExpandedBlack.woff);
    font-weight: 900;
    font-stretch: expanded;
}

@font-face {
    font-family: Gnawbone;
    src: url(/assets/fonts/Gnawbone-CondensedBlackItalic.woff);
    font-weight: 900;
    font-style: italic;
    font-stretch: expanded;
}

/* elements */
body {
    font-family: Fretless, "Times New Roman", serif;
    font-variant-ligatures: discretionary-ligatures;
    font-feature-settings: "ss01" off;
    line-height: 140%;
    margin: 0 0;
    color: black;
    background-color: white;
}

.main {
    font-family: Chough, Verdana, sans-serif;
    font-size: 36pt;
    line-height: 140%;
    text-align: center;
}

a {
    text-decoration: none;
    color: RoyalBlue;
}

a:hover {
    text-decoration: underline;
}

tt, code, kbd, samp {
    font-family: Menlo, "Andale Mono", Courier, fixed;
    font-size: 90%;
    background-color: #eee;
    border-radius: .3em;
    border-width: thin;
    border-color: #ccc;
    border-style: solid;
    padding: 0 .15em;
}

h1, h2, h3, h4 {
    font-family: Chough, Verdana, sans-serif;
}

h2 {
    margin-top: 1.5em;
}

h3 + h4 {
    margin-top: -1em;
}

h4 {
    font-style: italic;
}

#navbar {
    width: 100%;
    padding: 10px 0;
    margin: 0;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: black;
    background-color: LightCyan;
    font-family: Chough, Verdana, sans-serif;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

#navbar li.spacer {
    flex-grow: 1;
}

#navbar li a {
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#navbar li a:hover {
    color: white;
    background-color: RoyalBlue;
}

#navbar li a.selected {
    background-color: white;
}

#content {
    width: 80%;
    margin: auto;
}

#content h1 {
    font-size: 32pt;
}

#content p {
}

.date {
    font-family: Chough, Verdana, sans-serif;
    font-size: 90%;
    font-style: italic;
    font-weight: normal;
    color: gray;
    margin-left: 0.3em;
}

p .date {
    margin: 0; /* no extra space for inline dates */
}

.toc {
    font-size: 80%;
}

.skills {
    margin-top: -0.5em;
    padding: 0;
}

.skills li {
    display: inline;
    font-size: 90%;
    background-color: #eee;
    border-radius: .3em;
    border-width: thin;
    border-color: #ccc;
    border-style: none;
    padding: 0 .15em;
    font-style: italic;
}

.font-line {
    /* TODO: finish this stuff out. good inspo for specimen page: https://www.allcapstype.com/typefaces/youth */
    text-wrap-mode: nowrap;
    font-style: normal;
    font-weight: 900;
    font-size: 40pt;
    line-height: 100%;
    text-align: center;
}

iframe {
    margin-bottom: 2em; /* separate soundcloud iframes a bit */
}