style.css

/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
    /* colors */
    --clr-dark: 230 35% 7%;
    --clr-light: 231 77% 90%;
    --clr-white: 0 0% 100%;
  
    --apple-green: rgb(52, 199, 89);
    --apple-red: rgb(255, 59, 48);
    --apple-cyan: rgb(50, 173, 230);
    --apple-purple: rgb(88, 86, 214);
    --apple-orange: rgb(255, 149, 0);
    --apple-gray: rgb(72, 72, 74);
  
    --gradient-color: linear-gradient(90deg, #2ca2b4, #5598de 24%, #7f87ff 45%, #f65aad 76%, #ec3d43);


    /* font-sizes */
    --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
    --fs-800: 6.25rem;
    --fs-700: 3.5rem;
    --fs-600: 2rem;
    --fs-500: 1rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-200: 0.875rem;
    --fs-logo: 300;

    /* font-families */
    --ff-apple-normal: -apple-system,
        BlinkMacSystemFont,
        Segoe UI,
        Roboto,
        Oxygen-Sans,
        Ubuntu,
        Cantarell,
        Helvetica Neue,
        sans-serif;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--ff-apple-normal);
    color: hsl(var(--clr-dark));

    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/**/ 
path,
i,
svg {
    pointer-events: none !important; /* Allows us to tap in the button without tapping in the actual img */
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate;
}