/* Rubik Theme: modifies the default theme to use the chunkier Rubik for the header fonts. */

/* Use Open Sans as the default font and Roboto for headlines */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Source+Code+Pro:300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* See https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables for variables to override. */
:root {
    --bs-body-font-family: "M PLUS 1p";
    --bs-link-color: var(--bs-blue);
    --tf-pill-bg: var(--bs-gray);
    --tf-icon-fill: var(--bs-gray);
    --tf-icon-hover: var(--bs-gray-500);
    --tf-page-bg-color: var(--bs-white);
    --tf-footer-bg-color: var(--bs-gray-200);
    --tf-projects-bg-color: var(--bs-gray-100);
    --bs-nav-link-color: rgba(0, 0, 0, 0.55);
    --bs-nav-link-hover-color: rgba(0, 0, 0, 0.7);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: Rubik, Noto Sans JP;
}

/* Format social media icons */
.tf-social {
    display: inline-block;
    fill: var(--tf-icon-fill);
    height: 1.5em;
    vertical-align: -0.1em;
    width: 1.5em;
    transition: 0.2s;
}

.tf-social:hover {
    fill: var(--tf-icon-hover);
}

.card-social {
    display: inline-block;
    fill: var(--tf-icon-fill);
    height: 2em;
    vertical-align: middle;
    width: 2em;
    transition: 0.2s;
}

.card-social:hover {
    fill: var(--tf-icon-hover);
}

a {
    text-decoration: none;
}

@media (max-width: 500px) {
    .navbar-brand {
        display: none;
    }

    .navbar-brand-mobile {
        display: inline;
    }
}

.navbar-lang {
    color: var(--bs-nav-link-color);
}

.navbar-lang:hover {
    color: var(--bs-nav-link-hover-color);
}

.navbar-lang-active {
    font-weight: bold;
    color: var(--bs-nav-link-hover-color);
    text-decoration: underline;
    text-underline-offset: .25em;
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
    background-color: var(--bs-white);
    border-top: none;
}