style.css

:root {
    --sm-breakpoint: 400px;
    --lg-breakpoint: 768px;

    --sans-serif: -apple-system, BlinkMacSystemFont, system-ui,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --serif: Georgia, Times, "Times New Roman", serif;
    --monospace: "Fira Code", ui-monospace;

    --primary-font: var(--sans-serif);

    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: var();
}

/*

! -- reset styles --

*/
/*

! -- helper classes --

*/
/*

! -- components --

*/
/*

! -- app styles --

*/

/*

==============
?   Header
==============

*/

/*

==============
?    Main
==============

*/

.main {
}

/*

==============
*   Intro
==============

*/

.intro {
    text-align: center;
}
.intro__title {
    font-size: 5rem;
}
.intro__special-text {
    background: linear-gradient(#00b0ff, #fb8c00);
    background-clip: text;
    text-fill-color: transparent;
}

.example {
    display: grid;
    transition: all 0.5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}