:root {
    --bg-color: #dbe0f2;
    --waveform-bg-color: #efe4fa;
    --waveform-color: #efe4fa;
    --hover-color: #6c8cc7;
    --footer-color: #ffdddb;
    --play-btn-color: #c8c8c8;
    --active-color: #ff544c;
    --share-color: #c793ff;
}

@font-face {
    font-family: FoundersGrotesk;
    src: url('/static/fonts/FoundersGrotesk-Regular.otf');
}

@font-face {
    font-family: FoundersGroteskWeb;
    src: url('/static/fonts/FoundersGroteskWeb-Regular.woff');
}

@font-face {
    font-family: FoundersGroteskMono;
    src: url('/static/fonts/FoundersGroteskMono-Regular.otf');
}

.font-monospaced {
    font-family: FoundersGroteskMono, serif;
}

html, body {
    background: var(--bg-color);
    font-family: FoundersGroteskWeb, serif;
}

main > .container {
    padding: 60px 15px 0;
}

footer {
    background: var(--footer-color) !important;
}

.link-unstyled {
    text-decoration: none !important;
    /*color: unset;*/
    color: black !important;
}

.nav-link {
    font-size: 1.35rem;
}

.page-item.active .page-link {
    background-color: var(--active-color);
    border: var(--bg-color);
    color: black;
}

.page-link {
    color: black;
}

/* TODO: this feels like a hack... */
.fa, .fab {
    line-height: unset !important;
}

.btn-primary {
    background: var(--share-color) !important;
    border: 1px solid black;
    color: black;
}

.btn-outline-primary {
    border: 1px solid black;
    background: var(--bg-color) !important;
    transition: all 0.2s ease-in;
}

.btn-outline-primary:hover {
    background: var(--share-color) !important;
    border: 1px solid black;
}

.underline-on-hover {
    text-decoration: none;
}

.underline-on-hover:hover {
    text-decoration: underline;
}

.info-btn:hover {
    cursor: pointer;
}