/* ==========================================================
   WEBSITE THEME
   Python-inspired blue / yellow theme
   ========================================================== */

:root {

    --site-blue-dark: #0B3D62;

    --site-blue: #0F6CBD;

    --site-blue-light: #DCECF8;

    --site-blue-soft: #EAF4FB;

    --site-yellow: #FFD43B;

    --site-background: #EAF3F8;

    --site-text: #1F2933;

    --site-muted: #64748B;

    --site-border: #C9DCEB;

}


/* ==========================================================
   BODY
   ========================================================== */

html {

    scroll-behavior: smooth;

}

body {

    background: var(--site-background);

    color: var(--site-text);

}


/* ==========================================================
   NAVBAR
   ========================================================== */

.custom-navbar {

    background-color: #3776AB !important;

    border-bottom: 4px solid #FFD343;

}

.custom-navbar .navbar-brand {

    color: #FFFFFF !important;

    font-size: 1.35rem;

    font-weight: 700;

    letter-spacing: .5px;

}

.custom-navbar .navbar-brand:hover {

    color: #FFD343 !important;

}

.custom-navbar .nav-link {

    color: #FFFFFF !important;

    opacity: .90;

    transition: .2s ease;

}

.custom-navbar .nav-link:hover {

    color: #FFD343 !important;

    opacity: 1;

}

.custom-navbar .nav-link.active {

    color: #FFD343 !important;

    font-weight: 700;

}
/* ==========================================================
   FOOTER
   ========================================================== */

.custom-footer {

    background-color: #2B5F8A !important;

    color: #FFFFFF;

    border-top: 4px solid #FFD343;

}

.custom-footer h5 {

    color: #FFFFFF;

}

.custom-footer p {

    color: rgba(255, 255, 255, .85);

}

.custom-footer a {

    color: #FFFFFF;

    transition: .2s ease;

}

.custom-footer a:hover {

    color: #FFD343;

}

.custom-footer small {

    color: rgba(255, 255, 255, .75);

}
/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary {

    background: var(--site-blue);

    border-color: var(--site-blue);

}

.btn-primary:hover {

    background: var(--site-blue-dark);

    border-color: var(--site-blue-dark);

}

.btn-outline-primary {

    color: var(--site-blue-dark);

    border-color: var(--site-blue);

}

.btn-outline-primary:hover {

    background: var(--site-blue);

    border-color: var(--site-blue);

    color: #FFFFFF;

}


/* ==========================================================
   BADGES
   ========================================================== */

.badge.bg-primary {

    background-color: var(--site-blue) !important;

}


/* ==========================================================
   CARDS
   ========================================================== */

.card {

    background: #FFFFFF;

    border: 1px solid var(--site-border);

    border-radius: .85rem;

    transition: .25s ease;

}

.card:hover {

    transform: translateY(-4px);

    border-color: var(--site-blue);

    box-shadow: 0 .75rem 1.5rem rgba(11, 61, 98, .12) !important;

}

.card-img-top {

    transition: .35s ease;

}

.card:hover .card-img-top {

    transform: scale(1.02);

}


/* ==========================================================
   HERO
   ========================================================== */

.hero {

    background: linear-gradient(
        135deg,
        var(--site-blue-dark),
        var(--site-blue)
    );

    color: #FFFFFF;

}

.hero .text-secondary {

    color: rgba(255, 255, 255, .80) !important;

}


/* ==========================================================
   PYTHON ACCENT
   ========================================================== */

.python-accent {

    display: inline-block;

    background: var(--site-yellow);

    color: #1F2933;

    padding: .35rem .75rem;

    border-radius: .5rem;

    font-weight: 700;

}


/* ==========================================================
   PROJECT CONTENT
   ========================================================== */

.project-content {

    max-width: 900px;

    margin: auto;

    font-size: 1.15rem;

    line-height: 1.9;

}


/* ==========================================================
   PROJECT ARTICLE BACKGROUND
   ========================================================== */

.project-content p {

    margin-bottom: 1.5rem;

}

.project-content p:first-of-type {

    font-size: 1.3rem;

    color: #475569;

}


/* ==========================================================
   PROJECT HEADINGS
   ========================================================== */

.project-content h1 {

    margin-top: 3rem;

    margin-bottom: 1rem;

    font-weight: 700;

}

.project-content h2 {

    margin-top: 4rem;

    margin-bottom: 1rem;

    padding-bottom: .5rem;

    border-bottom: 2px solid var(--site-border);

    font-weight: 700;

    color: var(--site-blue-dark);

}

.project-content h3 {

    margin-top: 3rem;

    margin-bottom: 1rem;

    font-weight: 600;

    color: var(--site-blue-dark);

}

.project-content h4 {

    margin-top: 1.5rem;

    margin-bottom: .75rem;

    font-weight: 600;

}


/* ==========================================================
   PROJECT IMAGES
   ========================================================== */

.project-content img {

    display: block;

    max-width: 100%;

    height: auto;

    margin: 2rem auto;

    border-radius: 12px;

    box-shadow: 0 .75rem 1.5rem rgba(11, 61, 98, .14);

    transition: .35s ease;

}

.project-content img:hover {

    transform: scale(1.01);

}


/* ==========================================================
   FIGURES
   ========================================================== */

.project-content figure {

    margin: 3rem auto;

    text-align: center;

}

.project-content figcaption {

    margin-top: .75rem;

    color: var(--site-muted);

    font-size: .95rem;

    font-style: italic;

}


/* ==========================================================
   LINKS
   ========================================================== */

.project-content a {

    color: var(--site-blue);

    text-decoration: none;

    font-weight: 600;

    transition: .2s ease;

}

.project-content a:hover {

    color: var(--site-blue-dark);

    text-decoration: underline;

}


/* ==========================================================
   LISTS
   ========================================================== */

.project-content ul,
.project-content ol {

    margin-bottom: 1.5rem;

    padding-left: 1.5rem;

}

.project-content li {

    margin-bottom: .75rem;

}


/* ==========================================================
   TABLES
   ========================================================== */

.project-content table {

    width: 100%;

    margin: 2rem 0;

    border-collapse: collapse;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 .5rem 1rem rgba(11, 61, 98, .08);

}

.project-content th {

    background: var(--site-blue-soft);

    color: var(--site-blue-dark);

    font-weight: 600;

}

.project-content th,
.project-content td {

    border: 1px solid var(--site-border);

    padding: .75rem;

}


/* ==========================================================
   INLINE CODE
   ========================================================== */

.project-content code {

    background: var(--site-blue-soft);

    color: var(--site-blue-dark);

    padding: .2rem .45rem;

    border-radius: .35rem;

}


/* ==========================================================
   CODE BLOCKS
   ========================================================== */

.project-content pre {

    background: #172B3A;

    color: #F8F9FA;

    padding: 1.5rem;

    border-radius: 14px;

    margin: 2rem 0;

    font-size: .95rem;

    overflow-x: auto;

}


/* ==========================================================
   BLOCKQUOTES
   ========================================================== */

.project-content blockquote {

    border-left: 5px solid var(--site-blue);

    padding-left: 1rem;

    margin: 2rem 0;

    color: var(--site-muted);

    font-style: italic;

}


/* ==========================================================
   HORIZONTAL RULE
   ========================================================== */

.project-content hr {

    margin: 4rem 0;

    border: 0;

    border-top: 1px solid var(--site-border);

}


/* ==========================================================
   IFRAME / YOUTUBE
   ========================================================== */

.project-content iframe {

    width: 100%;

    aspect-ratio: 16 / 9;

    border: 0;

    border-radius: 12px;

    margin: 2rem 0;

}


/* ==========================================================
   TEXT SELECTION
   ========================================================== */

.project-content ::selection {

    background: var(--site-blue);

    color: #FFFFFF;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 992px) {

    .project-content {

        font-size: 1.05rem;

    }

}