src/index.css

@import "./_settings/variables.css";

/*
===============
Global Styles
===============
*/
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* scrollbar css  */
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(229, 178, 239);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(186, 126, 198);
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    color: var(--clr-grey-1);
    line-height: 1.5;
    font-size: 0.875rem;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}
h1,
h2,
h3,
h4 {
    letter-spacing: var(--spacing);
    text-transform: capitalize;
    line-height: 1.25;
    margin-bottom: 0.75rem;
    color: var(--clr-red-dark);
}
h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 0.875rem;
}
p {
    margin-bottom: 1.25rem;
    color: var(--clr-grey-5);
}
span,
strong {
    font-size: 0.7rem;
}
@media screen and (min-width: 800px) {
    h1 {
        font-size: 4rem;
    }
    h2 {
        font-size: 2.5rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    h4 {
        font-size: 1rem;
    }
    body {
        font-size: 1rem;
    }
    h1,
    h2,
    h3,
    h4 {
        line-height: 1;
    }
    span,
    strong {
        font-size: 1rem;
    }
}
/*  global classes */

/* section */
.section {
    width: 90vw;
    margin: 0 auto;
    max-width: var(--max-width);
}

@media screen and (min-width: 992px) {
    .section {
        width: 95vw;
    }
}