@tailwind base;
@tailwind components;
@tailwind utilities;

*{
scroll-behavior: smooth;
}
/* width */
::-webkit-scrollbar {
width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #84540f;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #d39f6f;
}


body{
    font-family: "Poppins", serif;
    background-color: #f8f8f8;
}


/* mobile nav toggle */
.view{
    left: -300px;
}
.app{
    background-image: url(../assets/heg/download\ \(1\).png);
}
.list-image div{
    width: calc(100% / 4);
    transition: width 1.5s;
}
.list-image .active{
    width: 100%;
}


/* face and back */
.flip-container {
    perspective: 1000px;
}
.flipper {
    transform-style: preserve-3d;
    transition: transform 0.5s ease-in-out;
}
.flip-container:hover .flipper {
    transform: rotateY(180deg);
}
.front, .back {
    backface-visibility: hidden;
}
.back {
    transform: rotateY(180deg);
}

/* top button */
.top{
    display: none;
}


/* Notification */
.Notification{
    display: none;
    transition:opacity 0.3s , transform 0.3s ;
}
.Notification.show{
    display: block;
    transform: translateY(0);
}


/* back image */
.what{
    background-image: url(../assets/heg/download\ \(1\).png);
}