body {
    background-color: rgb(250, 255, 255) !important;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.main {
    max-width: 1600px;
    margin: 0 auto;
    margin-bottom: 2rem;

}

.nav {
	align-items: center;
	justify-content: space-between;
}
.username {
    position: relative;
    margin-right: 2rem !important;
    font-family: 'Oswald', sans-serif;
  }

  .username>a {
    position: absolute;
    right: -20px;
    top: 0;

  }

#navbar>.container-fluid>button.navbar-toggler>i::before {
    transform: rotate(90deg) !important;
}

/* navbar */
.navbar {
    height: 58px !important;
}

.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    -webkit-box-shadow: 0px 0px 2px 1px rgba(212, 204, 212, 1);
    -moz-box-shadow: 0px 0px 2px 1px rgba(212, 204, 212, 1);
    box-shadow: 0px 0px 2px 1px rgba(212, 204, 212, 1);
}

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

.nav {
    width: 100%;
}

.nav-link {
    font-size: 1.5rem !important;
    margin-right: .5rem !important;
    font-family: 'Oswald', sans-serif;
    color: #3c3d3f !important;
}


.offcanvas {
    background-color: rgb(68, 64, 64) !important;
}

.modal-backdrop {
    background-color: aliceblue !important;
}

.ul-offcanvas {
    padding-left: 0 !important;
}

.navbar-nav>li>a {
    margin-right: .5rem;
}

/* navbar end*/


/* offcanvas */
.offcanvas {
    width: 200px !important;
}

.offcanvas, .hero {
    container-type: inline-size;
}


.card {
    font-family: 'Philosopher', sans-serif;
    min-height: 80vh;
}

/* hero */
/* .hero {
    container-name: hero;
}
 */



.siteDesc {
    font-size: clamp(1rem, 3.2vw, 2.5rem);
}


/* mode files */

.alert-warning {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 5px solid #a43c76 !important;
}

/* .noteWrapper{

    container-name: noteWrapper;
} */

.note>li {
    font-size: 1.3rem;
}


/* dataTable */

#example{
    font-size: .9rem !important;
}

/* animation fade-in */


@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* animation tracking-in-expand */

@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}



@container (max-width: 600px) {
    .nav-link {
        font-size: 1rem !important;
        margin-bottom: .5rem;
        color: White !important;
    }

    .nav-link:hover {
        color: white;
    }


}


/* @container hero (max-width: 767px) { */
    @media only screen and (max-width: 767px) {

    /* .dialog {
        text-align: center;
    } */
}







/* keyframe classes */

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-in-expand {
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}