::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #c1363d;
    border-radius: 10px;
}

.modal-opening {
    overflow: hidden;
}

.cover {
    top: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
}

.cover .content {
    position: relative;
    width: 360px;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.cover .content:hover {
    transform: rotateY(180deg);
  }

.cover .front,
.cover .back {
    position: absolute;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.cover .front {
    background-color: #bbb;
    color: black;
}

/* Style the back side */
.cover .back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}

/* Cover */
.home-cover {
    background-image: url('/img/cover-mb.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: calc(100vh - 20vh);
}
@media (min-width: 640px) {
    .home-cover {
        background-position: right;
        background-image: url('/img/cover-lg.webp');
    }
}
/* navbar */

@media (min-width: 767px) {
    .user-modal {
        display: none;
        transition-duration: 200ms;
        background-color: white;
        position: absolute;
        top: 4rem;
        z-index: 99;
        padding: 1rem;
    }
}
@media (max-width: 767px) {
    .navbar-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        background-color: rgb(0, 0, 0, 0.4);
        z-index: 99;
    }

    .navbar-offcanvas.show {
        transform: translateX(0);
    }
    .navbar-offcanvas {
        transform: translateX(100%);
        transition-duration: 200ms;
        margin-left: auto;
        height: 100%;
        background-color: white;
        flex-direction: column;
        max-width: 375px;
        align-items: start;
        padding: 1rem;
    }
}