/* app\static\css\style.css */

body {
    background-color: var(--bs-body-bg);
    background-image: url("../img/bg01.png");
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
}

/* iOS/Safari scrool bug */
@media (max-width: 767.98px) {
    body {
        background-attachment: scroll;
    }
}

main a {
    text-decoration: none;
    color: steelblue;
}

main a:hover {
    text-decoration: none;
    color: steelblue;
}

.brand-i {
    color: red;
}

.brand-g {
    color: rgb(0, 196, 0);
}

.brand-v {
    color: rgb(90, 150, 255);
}

.navbar-brand small {
    font-size: .65rem;
}

.navbar a {
    color: orange;
}

.navbar a:hover {
    color: orangered;
}

.navbar .dropdown-menu a {
    color: orange;
}

.navbar .dropdown-menu a:hover {
    color: orangered;
    background-color: transparent;
}

footer a {
    color: orange;
    text-decoration: none;
}

footer a:hover {
    color: orangered;
}

footer small {
    font-size: .75rem;
}

@media (max-width: 767.98px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        background: #212529;
        padding: 1rem;
    }
}

#nav-logged-in,
#nav-logged-out {
    display: none;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar form {
        max-width: 220px;
    }

    .navbar .form-control {
        min-width: 0;
    }
}

.card-home .card-header,
.link-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    aspect-ratio: 16 / 9;
}

.card-home .card-header .bi {
    background-color: orange;
    color: #212529;
    font-size: 1.5rem;
    border-radius: 5px 0 10px 0;
}

/* Dark mode switch */
#themeSwitch {
    cursor: pointer;
    border-color: #adb5bd;
    background-color: #212529;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

#themeSwitch:checked {
    border-color: #fd7e14;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fd7e14'/%3e%3c/svg%3e");
}

.card-home:hover {
    box-shadow: var(--bs-box-shadow) !important;
}

.link-img iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.text-small {
    font-size: small;
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }

    .profile-card {
        width: fit-content;
    }
}