/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap');

/* You can override the default Infima variables here. */
:root {
    --ifm-color-primary: #2890a4;
    --ifm-color-primary-dark: #248294;
    --ifm-color-primary-darker: #227a8b;
    --ifm-color-primary-darkest: #1c6573;
    --ifm-color-primary-light: #2c9eb4;
    --ifm-color-primary-lighter: #2ea6bd;
    --ifm-color-primary-lightest: #3ab7cf;
    --ifm-code-font-size: 96%;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

    --ifm-font-family-base: "Roboto", sans-serif;
    --ifm-font-family-monospace: "Inconsolata", monospace;
    --ifm-font-weight-light: 300;
    --ifm-font-weight-normal: 400;
    --ifm-font-weight-semibold: 500;
    --ifm-font-weight-bold: 500;
    --ifm-heading-font-weight: var(--ifm-font-weight-semibold);
    --ifm-font-size-base: 16px;
    --ifm-font-size-monospace: 14px;
    --ifm-code-padding-horizontal: 0.2rem;

    --ifm-navbar-height: 5.75rem;
    --ifm-footer-padding-vertical: 1rem;
    --ifm-footer-background-color: #f2f2f2;
    --ifm-table-cell-padding: 0.5rem;
    --ifm-table-head-font-weight: var(--ifm-font-weight-semibold);

    --info-color: #dbebf5;
    --warning-color: #faecdf;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
    --ifm-color-primary: #54c1d5;
    --ifm-color-primary-dark: #3cb8cf;
    --ifm-color-primary-darker: #32b3cb;
    --ifm-color-primary-darkest: #2993a7;
    --ifm-color-primary-light: #6ccadb;
    --ifm-color-primary-lighter: #78cede;
    --ifm-color-primary-lightest: #9cdbe7;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
    --ifm-footer-background-color: #242526;

    --info-color: #2f3d46;
    --warning-color: #48443f;
}

[data-theme='light'] img[src$='#dark-mode-only'],
[data-theme='dark'] img[src$='#light-mode-only'],
[data-theme='light'] img.dark-mode-only,
[data-theme='dark'] img.light-mode-only {
    display: none;
}

code {
    position: relative;
    top: -1px;
}

.navbar__logo {
    height: 4rem;
    position: relative;
    top: -0.85rem;
}

.navbar-sidebar .navbar__logo {
    top: 0;
}

.navbar__items {
    position: relative;
    top: 0.85rem;
}

.main-wrapper {
    padding-top: 0.8em;
}

.menu {
    padding-top: 1rem !important;
}

.footer {
    font-size: 90%;
}

table {
    font-size: 90%;
}

.yt-embed {
    /* Default styling for screens wider than 560px */
    width: 560px;
    height: 315px;
}

.content-page h1 {
    font-size: 3rem;
    margin-bottom: 1.25rem;
}

.content-page h2 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content-page h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

@media screen and (max-width: 560px) {
    .yt-embed {
        /* Adjustments for screens 560px wide or less */
        width: 92vw;
        height: calc(92vw * 0.5625);
    }
}
