* {
    font-family: 'Inter', sans-serif;
    color: #333;
    scroll-behavior: smooth;
}

.mobile-navbar {
    transform: translateX(-100vw);
}

.navbar-active {
    transform: translateX(0);
}

.pure-css-bootstrap-modal {
    position: absolute; /* Don't take any space. */
}
.pure-css-bootstrap-modal label.close {
    /* Reset */
    padding: 0;
    margin: 0;
}

#modal-switch {
    display: none;
}

/* MODAL */
.modal {
    display: block;
}
#modal-switch:not(:checked) ~ .modal {
    /*
    In Bootstrap Model is hidden by `display: none`.
    Unfortunately I couldn't get this option to work with css transitions
    (they are disabled when `display: none` is present).
    We need other way to hide the modal, e.g. with `max-width`.
    */
    max-width: 0;
}
#modal-switch:checked ~ .fade,
#modal-switch:checked ~ .modal .fade {
    opacity: 1;
}

/* BACKDROP */
.modal-backdrop {
    margin: 0;
}
#modal-switch:not(:checked) ~ .modal .modal-backdrop {
    display: none;
}
#modal-switch:checked ~ .modal .modal-backdrop {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* DIALOG */
#modal-switch ~ .modal .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50%);
}
#modal-switch:checked ~ .modal .modal-dialog {
    transform: translate(0, 10%);
    z-index: 1050;
}

/* Scroll Bar Style */
.akunmu-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: #D0B5EC #fff !important;
    border-radius: 2px;
}

/*
background: linear-gradient(
    180deg,
    #E6D8F0 0%,
    #D0B5EC 20%,
    #B27AEF 50%,
    #A05AE8 75%,
    #7E3FD8 100%
);


/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}

.d-none {
    display: none !important;
}