:root{
    --sour-gummy-font: "Poppins";
    --coming-soon: "Roboto";
    --primary-accent: #FE7179;
    --primary-bg: #1D1D1D;
    --secondary-bg: #203D5F;
    --primary-font-color: #fffff5;
    --border-radius-default: 4px;
}

body{
    font-family: var(--coming-soon), serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    background-color: var(--primary-bg);
    color: var(--primary-font-color);
    word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, .badge{
    font-family: var(--sour-gummy-font), serif;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6{
    margin-top: 3rem;
}

p, pre, ul, ol{
    margin-bottom: 2rem;
}

img{
    width: 80% !important;
    height: auto !important;
}

p:has(img){
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

pre{
    padding: 16px;
    border-radius: 4px;
    font-family: var(--sour-gummy-font), serif;
}

blockquote{
    background-color: var(--secondary-bg);
    padding: 8px 8px 0 8px;
    border-radius: var(--border-radius-default);
}


@media (max-width: 768px) {
    p > img{
        width: 100% !important;
    }
}

/**
    Bootstrap overrides
*/

.bg-body-tertiary{
    background-color: var(--primary-bg) !important;
}

.navbar-brand{
    color: var(--primary-font-color) !important;
}

.badge.text-bg-primary, .btn-primary{
    background-color: var(--primary-accent) !important;
    border: none;
}