/** Main parameters configuration */

:root {
       --primary: rgba(41, 150, 204, 1);
       --accent: rgba(186, 182, 185, 1);
       --warn: rgba(208, 50, 55, 1);

       --background-color: white;
       --logo: url('data:image/svg+xml;base64,PHN2ZyBpZ...DwvZz4KPC9zdmc+Cg==');
       --logo-size: auto 20px;
       --caption-font: normal 200 20px Roboto;

       --header-background-color: unset;
       --header-color: white;
       --header-background-image: var(--logo), linear-gradient(to right, transparent 0, ... var(--white) 8px);
       --header-background-position: 64px center, left, top;

       --h1-font: 100 44px Roboto;

       --button-border-radius: 0;
       --button-color: white;
       --primary-button-color: white;
}

The root section contains essential parameters that are used in the rest of the CSS file. Style your main colors, fonts and logos, etc. in this section.

/** CSS definitions **/

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

header {
        background-color: var(--header-background-color) !important;
        background-image: var(--header-background-image) !important;
        background-position: var(--header-background-position) !important;
        background-size: var(--logo-size), cover !important;
}

header .caption {
                 font: var(--caption-font) !important;
                 color: var(--header-color);
}

[...]

The rest of the CSS file contains CSS definitions for various UI elements you may want to style.
You can change them, or you can also define new CSS classes for individual elements.