html {
    font-size: 16px;
    scroll-behavior: smooth;
}

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

html, body {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: var(--background-color);
}

:root {
    --background-color: #F8F6F3;

    --text-primary: #1F1F1F;
    --text-secondary: #FFFFFF;
    --text-tertiary: #454545;
    --text-quaternary: #858585;
    --text-quinary: #E5E5E5;
    --text-detail: #4B007D;

    --btn-gradient: linear-gradient(135deg, #4B007D 0%, #8A05BE 100%);

    --footer-bg: #1F1F1F;
}

img {
    max-width: 100%;
    display: block;
}

@keyframes button-shine-sweep {

    0% {
        transform: translateX(-140%) skewX(-14deg);
    }

    100% {
        transform: translateX(260%) skewX(-14deg);
    }

}

button {
    border: none;
    background-color: var(--btn-gradient);
    cursor: pointer;
}

button:not(#mobileMenuToggle) {
    position: relative;
    overflow: hidden;
}

button:not(#mobileMenuToggle)::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 45%;
    height: 140%;
    background: linear-gradient(
        95deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.06) 58%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-140%) skewX(-14deg);
    animation: button-shine-sweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    button:not(#mobileMenuToggle)::before {
        animation: none;
        display: none;
    }

}