body {
    overflow-x: visible;
}
.custom-background {
    background: hsla(0, 95%, 16%, 1);
    background: linear-gradient(-180deg, rgba(67, 0, 0, 0.19) 0%, rgb(45, 1, 1) 20%, hsla(0, 100%, 3%, 1) 40%, hsla(0, 0%, 0%, 1) 65%, hsla(0, 0%, 1%, 1) 100%);
    top: 91%;
    z-index:2;
}
.logo-fn::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 75%;
    top: 12%;
    background-color: #fff;
}
.nav-spy-link:has(.active) > .nav-link {
    color: #fff !important;
    background-color: transparent !important;
}

.nav-spy-link > .nav-link {
    color: #fff !important;
    padding-left: 0px !important;
    background-color: transparent !important;
}

.nav-spy-link:has(.active) {
    text-decoration: underline 3px  #ed0000;
    text-underline-offset: 8px;
}
.footer-bottom {
    border-bottom: .25rem solid #ed0000;
}
.navbar-toggler span {
    display: block;
    background-color: #ed0000;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

.navbar-dark .navbar-toggler {
    border-color: transparent;
}

button:focus {
    outline: 0 !important;
}

.navbar-toggler {
    border: 0px !important;
}

    /* Define the shape and color of the hamburger lines */
.navbar-toggler span {
    display: block;
    background-color: #ed0000;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}


/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/**
* Animate collapse into X.
*/

/**
* Animate collapse open into hamburger menu
*/

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg) ;
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg) ;
}

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg) ;
}

.button-slash-black {
    display: flex;
    /* width: 200px;
    height: 50px; */
    border: 2px solid black;
    background: linear-gradient(-60deg, #000 50%, #fff 50%);
    cursor: pointer;
    background-size: 250% 100%;
    background-position: bottom left;
    transition: all 0.1s ease-out;
    text-decoration: none;
    margin: auto;
}

.button-slash-black span {
    color: black;
    margin: auto;
    letter-spacing: 1px;
}

.button-slash-black:hover {
    text-decoration: none;
    background-position: bottom right;
    color: #fff;
}

.button-slash-black:hover span {
    color: #fff;
}

/* transparent */

.button-slash-transparent {
    display: flex;
    /* width: 200px;
    height: 50px; */
    border: 2px solid white;
    background: linear-gradient(-60deg, #fff 50%, transparent 50%);
    cursor: pointer;
    background-size: 250% 100%;
    background-position: bottom left;
    transition: all 0.1s ease-out;
    text-decoration: none;
    margin: auto;
}

.button-slash-transparent span {
    color: #fff;
    margin: auto;
    letter-spacing: 1px;
}

.button-slash-transparent:hover {
    text-decoration: none;
    background-position: bottom right;
    color: #000;
}

.button-slash-transparent:hover span {
    color: #000;
}

.bg-black {
    background-color: #000;
}

@-moz-document url-prefix() {
    .bg-shadow {
        transform: translateY(-100%);
    }

    .shadow-light {
        transform: translateY(-100%);
    }

    .shadow {
        transform: translateY(-100%);
    }
}

.mystery-card {
    z-index:-1;
    top:65%;
    left: 0%;
}

/* @media (min-width: 401px) and (max-width: 500px) {
    .mystery-card {
        top: 60% !important;
    }
} */

@media (max-width: 500px) {
    .mystery-card {
        top: 60% !important;
    }
}

.font-alamat {
    font-size: 1rem;
}

@media (width <= 400px) {
    .font-alamat {
        font-size: 1.15rem !important;
    }
}