/* Custom colors BEGIN */
/* TODO Implement a dark mode - Bootstrap now supports color modes as of v5.3.0 */
/* https://getbootstrap.com/docs/5.3/customize/color-modes/ */

:root {
    --bs-body-bg: var(--material-color-gray-300);
    /* Change the following to use different colors on your website */
    --bs-primary: var(--material-color-green-600);
    --bs-primary-rgb: 67, 160, 71;
    --bs-link-hover-color: var(--material-color-green-800);
    --bs-link-hover-color-rgb: 46, 125, 50;
}

.card {
    --bs-card-bg: var(--material-color-white);
    --bs-card-cap-bg: var(--material-color-gray-100);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--material-color-white);
    --bs-dropdown-link-hover-bg: var(--material-color-gray-200);
}

.img-thumbnail {
    background-color: var(--material-color-white);
}

.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
    --bs-offcanvas-bg: var(--material-color-white);
}

/* Custom colors END */

/* Suggest to Bootswatch Materia: changes to make it easier to customize colors */

:root { /* Line 15 of bootstrap.css */
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
}

.btn-primary { /* Line 3074 */
    --bs-btn-bg: var(--bs-primary);
}

.dropdown-menu { /* Line 3446 */
    --bs-dropdown-link-active-bg: var(--bs-link-hover-color);
}

.btn-primary:hover, .btn-primary:active:hover { /* Line 12153 */
    background-color: var(--bs-link-hover-color);
}

textarea:focus, /* Line 12795 */
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: inset 0 -2px 0 var(--bs-primary);
}

/* Suggest to Bootswatch Materia END */

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.alert a {
    text-decoration: underline;
}

.btn:hover,
.dropdown-item:hover,
.navbar-brand:hover,
.nav-link:hover {
    text-decoration: none;
}

#main-container > .row {
    margin-top: 5.5rem !important;
}

.form-label {
    font-weight: 700 !important; /* same font-weight as .fw-bold */
    margin-bottom: 0.25rem;
}

.gap {
    margin-bottom: 30px;
}

.gap-small {
    margin-bottom: 15px;
}

/* Header */

#navbar-search-button:hover {
    cursor: pointer;
}

/* Mobile Navbar */

#mobile-navbar {
    max-width: 80%;
}

#mobile-navbar .btn-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1045; /* same z-index as .offcanvas */
}

/* Collapsible Search */

#collapsible-search {
    height: 90px;
}

/* Translations */

#language-modal .list-group .list-group-item:not(.disabled) {
    padding-left: 2.5rem;
}

/* About and Author */

#about img,
#author img {
    max-width: min(75%, 150px);
}

@media (min-width: 991px) {
    #about img {
        max-width: 200px;
    }
}

/* Pagination */

.pagination .page-item > .page-link {
    border-radius: 15px;
}

.pagination .disabled.page-item {
    cursor: not-allowed;
}

/* Blog posts */

.blog-post-link,
.blog-post-link:focus,
.blog-post-link:hover {
    color: var(--bs-body-color);
}

@media (max-width: 767px) {
    .blog-post-share {
        max-width: 140px;
    }
}

/* Prevent problems with Google Custom Search Engine */
/* https://getbootstrap.com/docs/5.1/getting-started/introduction/#box-sizing */

.reset-box-sizing {
    box-sizing: content-box;
}

/* Embed Responsively */
/* https://embedresponsively.com */

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Code highlighting */

.highlight .lineno {
    -moz-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    border-right: 1px solid var(--material-color-blue-gray-100);
    color: var(--material-color-blue-gray-100);
    padding-right: 10px;
}

.rouge-code {
    padding-left: 10px;
}

/* I hope someday we will get line highlights back */
.highlight .hll {
    background-color: var(--material-color-yellow-a100);
}

/* Archives */

h2.blog-archive-title a {
    color: var(--material-color-white);
}

/* Floating Action Button
Borrowed from:
https://pro.propeller.in/components/floating-button.php
*/
#fab {
    bottom: 1rem;
    position: fixed;
    right: 1rem;
    z-index: 1000;
}

/* openSUSE Countdown */

#countdown {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Facebook Page Plugin */

@media (min-width: 992px) {
    #facebook-page-plugin-wrapper {
        height: 450px;
        min-width: 250px;
        overflow: hidden;
        width: 100%;
    }
}

/* Follow Buttons */

div.follow-buttons a {
    height: 50px;
    width: 50px;
}

div.follow-buttons .btn-facebook {
    background-color: var(--material-color-indigo-600);
}

div.follow-buttons .btn-twitter {
    background-color: var(--material-color-blue-500);
}

div.follow-buttons .btn-instagram {
    background-color: var(--material-color-pink-500);
}

div.follow-buttons .btn-linkedin {
    background-color: var(--material-color-blue-800);
}

div.follow-buttons .btn-youtube {
    background-color: var(--material-color-red-a700);
}

div.follow-buttons .btn-telegram {
    background-color: var(--material-color-light-blue-700);
}

div.follow-buttons .btn-foursquare {
    background-color: var(--material-color-pink-a200);
}

div.follow-buttons .btn-github {
    background-color: var(--material-color-gray-900);
}

div.follow-buttons .btn-gitlab {
    background-color: var(--material-color-deep-orange-700);
}

div.follow-buttons .btn-rss {
    background-color: var(--material-color-orange-700);
}

/* Linktree */

#linktree-logo {
    max-width: 96px;
}

#linktree-brand {
    color: inherit;
    font-size: calc(1.275rem + .3vw); /* Same as h4 */
    font-weight: 500;
}