body {
    background-color: #121212;
    font-family: 'SF Pro Display', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

body {
    background: linear-gradient(90deg, black, #2a2a2a, black);
    background-size: 300% 300%;
    animation: gradientAnimation 10s ease infinite;
    height: 100vh;
    margin: 0;
    font-family: 'SF Pro Display', sans-serif;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../../public/fonts/sf-fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}


@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}