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

header .mud-appbar {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

section {
    min-height: 100dvh;
}

.nav-link {
    @apply text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition;
}

html {
    scroll-behavior: smooth;
}

.scroll-downs {
    margin: 2.4rem 0 0 0;
    width: 34px;
    height: 55px;
}

.mousey {
    width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}

.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
    animation-iteration-count: infinite;
}

@keyframes scroll {
    0% {
        opacity: 0;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}