html {
    scroll-behavior: smooth;
}


body::-webkit-scrollbar {
    width: 0.5em;
    background-color: rgb(62, 62, 62);
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.24);
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.847);
    border-radius: 0px;
}
body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(182, 182, 182, 0.847);
    
}

.menu-item {
    display: grid;
    animation: menuItemsOpacity 0.6s ease-out;

}
.left-cursor {
    cursor: url("/img/icons/left-arrow.svg"), auto;
}
.right-cursor {
    cursor: url("/img/icons/right-arrow.svg"), auto;
}

@keyframes menuItemsOpacity {
    0% {display: none; opacity: 0;}
    1% {display: grid; transform: scaleY(0); opacity: 0;}
    20% {transform: scaleY(0); opacity: 0;}
    75% {transform: scaleY(1); opacity: 0.5;}
    100% {transform: scaleY(1); opacity: 1;}
}
.on-load-very-short-animation{
    opacity: 1;
    animation: opacityOnLoad 100ms ease-out;
}
.on-load-short-animation{
    opacity: 1;
    animation: opacityOnLoad 250ms ease-out;
}
.on-load-medium-animation{
    opacity: 1;
    animation: opacityOnLoad 600ms ease-out;
}
.on-load-long-animation{
    opacity: 1;
    animation: opacityOnLoad 1200ms ease-out;
}
.on-load-very-long-animation{
    opacity: 1;
    animation: opacityOnLoad 2400ms ease-out;
}

@keyframes opacityOnLoad {
    0% { opacity: 0;}
    20% { opacity: 0;}
    100% {opacity: 1;}
}
.animate-scroll-bounce{
	animation: bounce 2s infinite ease-in-out;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
	0%, 100% {-webkit-transform: translateY(0);}	
	20% {-webkit-transform: translateY(-1.1rem);}

}
 
@-moz-keyframes bounce {
	0%, 100% {-moz-transform: translateY(0);}
	20% {-moz-transform: translateY(-1.1rem);}

}
 
@-o-keyframes bounce {
	0%, 100% {-o-transform: translateY(0);}
	20% {-o-transform: translateY(-1.1rem);}

}
@keyframes bounce {
	0%, 100% {transform: translateY(0);}
	20% {transform: translateY(-1.1rem);}

}

body.hasHover .menu-button:hover { 
    gap: 0.4rem;
 }

@media only screen and (min-width: 640px) {
    body.hasHover .menu-button:hover { 
        gap: 0.75rem;
     }
}