body, html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-image: var(--background-image-url);
    background-repeat: repeat;
    background-size: var(--background-image-size);
}

.nav-font-color {
    color: var(--nav-font-color) !important;
}

.navbar-brand > img, .nav-link > img {
    width: 40px;
}

ul.navbar-nav > li {
    border-right: 2px solid var(--nav-font-color)
}

ul.navbar-nav > li:last-child {
    border: none;
}


.top-nav,
footer {
    background-color: var(--nav-background-color);
}

.link-nav-font-color {
    color:  var(--nav-font-color) !important;
}

.fab {
    position: fixed; /* Fixed/sticky position */
    bottom: 100px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    max-width: 6rem;
}

.btn-fab {
    /* Hidden by default */
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */

    cursor: pointer; /* Add a mouse pointer on hover */
    border-radius: 10px; /* Rounded corners */
}

.foot-img {
    max-height: 10em;
}

.user-img {
    max-height: 10em;
}

.main-body {
    background-color: rgba(255, 255, 255, 0.7);
    flex-grow: 1;
}

.main-body,
.top-nav,
.header-img,
.footer {
    max-width: 900px;
}

@media (min-width: 1400px) {
    .main-body,
    .top-nav,
    .header-img,
    .footer {
        max-width: 1200px;
    }
}



.record-div {
    width: 300px;
    margin: 0 auto;
    padding: 20px 0;
}

.record-link {
    display: inline-block;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
}

.record-link > p {
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 0px 0px 0px 5px;
    color: #939393;
}


.text-right {
    text-align: right !important;
}

.blog-content {
    background-color: rgba(255, 255, 255, 0.7);
}

.blog-content img {
    max-width: 100%;
    height: auto !important;
}

/* input:invalid {
  border-color: red;
} */

.img-art {
    max-width: 30%;
}


/* Hide spin buttons in WebKit browsers (Chrome, Safari, Edge) */
input[type="number"].no-spinbox::-webkit-outer-spin-button,
input[type="number"].no-spinbox::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Optional: Removes any default margin */
}

input[type="number"].no-spinbox {
    -moz-appearance: textfield;
}

.hover-brighten {
    transition: filter 0.3s ease;
}
.hover-brighten:hover {
    filter: brightness(1.2);
}