/* CSS Variables (converted from SCSS variables) */
:root {
    --myrtle-green: #297373ff;
    --verdigris: #3BA5A5;
    --nyanza: #d4f4ddff;
    --jet: #39393aff;
    --blush: #ce6a85ff;
    --fulvous: #e8871eff;
    --light-fulvous: rgba(232, 134, 30, 0.188);
    --robin-egg-blue: #5AC4C4;
    --fawn: #F1BA7E;
    --off-white: #fcfcfcff;
    --gray-light: #ddddde;
    --gradient: linear-gradient(45deg, var(--jet), var(--myrtle-green));
}

[class~="bg-primary"], [class~="btn-primary"], [class~="alert-primary"] {
    background-color: var(--myrtle-green) !important;
    border-color: var(--myrtle-green) !important;
}

[class~="bg-secondary"], [class~="btn-secondary"], [class~="alert-secondary"] {
    background-color: var(--blush) !important;
    border-color: var(--blush) !important;
}

[class~="bg-success"], [class~="btn-success"], [class~="alert-success"] {
    background-color: var(--verdigris) !important;
    border-color: var(--verdigris) !important;
}

[class~="bg-light"], [class~="btn-light"], [class~="alert-light"] {
    background-color: var(--nyanza) !important;
    border-color: var(--nyanza) !important;
}

[class~="bg-dark"], [class~="btn-dark"], [class~="alert-dark"] {
    background-color: var(--jet) !important;
    border-color: var(--jet) !important;
}

[class~="bg-gray"], [class~="btn-gray"], [class~="alert-gray"] {
    background-color: var(--gray-light) !important;
    border-color: var(--gray-light) !important;
}



/* General */
body, html { 
    overflow-x: hidden; 
}

body {
    height: -webkit-fill-available;
    min-width: 100vw;
    min-height: 100vh;
    background-image: var(--gradient);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'libre-baskerville', serif;
}

article {
    padding: 1em;
    border-radius: 1em;
    background-color: var(--off-white);
}

/* Fonts */
a, .btn-link {
    padding-top: 0;
    display: inline-block;
    color: var(--jet);
    text-decoration: underline;
    text-decoration-color: var(--fulvous);
}

a:hover, a:hover > small {
    text-decoration-color: var(--blush);
    background-color: var(--light-fulvous);
    color: var(--blush)
}

a.thicky {
    text-decoration: none;
    background-image: linear-gradient(var(--fulvous), var(--fulvous));
    background-repeat: no-repeat;
    background-position: 0% 100%;
    background-size: 100% 0.4em;
}

.no-wrap {
    white-space: nowrap;
}

@font-face {
    font-family: 'libre-baskerville';
    src: url('../fonts/LibreBaskerville-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'libre-baskerville';
    src: url('../fonts/LibreBaskerville-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: 'libre-baskerville';
    src: url('../fonts/LibreBaskerville-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Abril';
    src: url('../fonts/AbrilFatface-Regular.ttf');
}

p {
    margin-bottom: 1.5em;
}

blockquote {
    margin: 3em 0.5em 2em 0.5em;
    position: relative;
    font-style: italic;
    padding: 2em;
    background-color: var(--light-fulvous);
    border-radius: 1em;
}

blockquote::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' fill='%23ce6a85ff' class='bi bi-quote' viewBox='0 0 16 16'%3E%3Cpath d='M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z'/%3E%3C/svg%3E");
    position: absolute;
    left: -1.5em;
    top: -1.8em;
}

blockquote > p:not(:last-child) {
    margin-bottom: 1em;
}

blockquote > p:last-child {
    margin-bottom: 0;
}


.title {
    font-family: 'Abril', sans-serif;
    font-size: 9rem;
    hyphens: auto;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    color: var(--fulvous)
}

.subtitle {
    font-family: 'libre-baskerville', serif;
    font-size: 2rem;
    color: var(--fawn);
    margin-bottom: 1.5em;
}

/* Responsive font sizes for title */
@media (max-width: 1200px) {
    .title { font-size: 7rem; }
}

@media (max-width: 992px) {
    .title { font-size: 5rem; }
}

@media (max-width: 768px) {
    .title { font-size: 4rem; }
}

@media (max-width: 576px) {
    .title { font-size: 3rem; }
}

.post-title {
    overflow-wrap: normal;
}

.post {
    max-width: 700px;
}

.site-lede {
    font-size: 1.3em;
}

.site-footer {
    background-color: var(--off-white);
    padding: 1em;
    border-radius: 1em;
    color: var(--jet);
    font-family: 'libre-baskerville', serif;
}

.markdown > h2, .markdown > h3, .markdown > h4, .markdown > h5, .markdown > h6 {
    color: var(--jet);
    margin: 1em 0 1em 0;
    font-family: 'libre-baskerville', serif;
    font-style: italic;
    line-height: 1.7em;
}

.markdown {
    line-height: 1.7em;
}

.markdown.md-lede {
    font-size: larger;
    font-style: oblique;
    font-weight: 200;
}

.markdown.post-card > p {
    font-style: italic;
}

.markdown.post-card > p > strong, .markdown.post-card > p > b {
    font-style: normal;
}

.markdown a {
    font-style: oblique;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: anywhere;
    word-wrap: anywhere;
    display: inline;
}

.markdown p {
    overflow-wrap: anywhere;
    word-wrap: anywhere;
}

h2, h3, h4, h5, h6 {
    color: var(--jet);
    margin: 1em 0 1em 0;
    font-family: 'libre-baskerville', serif;
}

h1.light, h2.light, h3.light, h4.light, h5.light, h6.light {
    color: var(--fulvous);
}

h1:not(.title) {
    font-size: 2em;
    font-family: 'abril', sans-serif;
}

/* Cards & Alerts */
.alert {
    border-left: 10px solid var(--blush);
    border-right: 10px solid var(--blush);
    border-style: none solid none solid;
    border-radius: 1em;
}

.stripey {
    background: repeating-linear-gradient(45deg,
        var(--verdigris),
        var(--verdigris) 5px,
        var(--myrtle-green) 5px,
        var(--myrtle-green) 10px);
    border-radius: 1em;
}

.stripey.light {
    background: repeating-linear-gradient(45deg,
        var(--blush),
        var(--blush) 5px,
        var(--off-white) 5px,
        var(--off-white) 10px);
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.stripey.mustard {
    background: repeating-linear-gradient(45deg,
        var(--fulvous),
        var(--fulvous) 10px,
        var(--off-white) 5px,
        var(--off-white) 20px);
    margin: 1em;
}

.card {
    background-color: var(--off-white);
    border-radius: 1em;
    border: none;
}

.card-body > a {
    text-decoration: none;
    border: none;
}

.card-comment {
    background-color: var(--off-white);
    border-left: 8px solid var(--blush);
    border-style: none none none solid;
    border-radius: 1em;
    border: none;
}

.card-bio {
    background-color: var(--verdigris);
    border: 8px solid var(--blush);
    border-style: none solid none solid;
    border-radius: 1em;
}

/* Profile */
.content {
    min-height: 80vh;
}

/* Nav */
.nav-container {
    display: block;
    top: 0;
    z-index: 1020;
}

.navbar-brand {
    font-family: 'Abril', sans-serif;
    color: var(--fulvous);
}

.nav-link {
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--fulvous);
}

.nav-separator {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--myrtle-green);
    text-decoration: none;
    background: none;
    border: 0;
}

.nav-item.dropdown.active > a,
a.nav-item.active,
a.nav-link.active,
a.nav-link:focus,
a.nav-link:hover, .nav-link:focus, .nav-link:hover {
    color: var(--blush) !important;
    font-style: italic;
}

.dropdown-item {
    background-color: none;
}

.dropdown-item.active, .dropdown-item:hover {
    background-color: transparent;
    color: var(--blush);
    font-style: italic;
}

.dropdown-menu {
    background-color: var(--nyanza);
    border-left: 5px solid var(--verdigris);
    border-right: 5px solid var(--verdigris);
    border-style: none solid none solid;
    border-radius: 1em;
}

.dropdown-menu.active {
    font-style: italic;
}

.custom-tooltip .tooltip-inner {
    background-color: var(--fulvous);
    color: var(--jet);
}

/* Footer */

.modal-content {
    background-color: var(--nyanza);
    border: none !important;
}


/* Pagination */
ul.pagination {
    border: none;
    background: none;
    background-color: transparent;
}

.page-item .page-link{
    border: none;
    background-color: var(--nyanza);
    color: var(--jet);
}

.page-item.active .page-link {
    border: none;
    background-color: var(--fulvous);
    color: var(--jet);
}

textarea, textarea.form-control {
    border-radius: 1em;
}

#image-drop-zone {
    border: 2px dashed var(--blush);
    background-color: var(--blush-light);
    border-radius: 1em;
    padding: 1em;
    text-align: center;
    color: var(--jet);
}

.image {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.highlight {
    background-color: var(--jet);
    border-radius: 1em;
    padding: 1em;
    margin: 1em 0;
    overflow: scroll;
}

span.normal {
    margin-right: 1em;
}