style.css

@import url('https://fonts.googleapis.com/css?family=Noto%20Serif:700|Noto%20Serif:400');

:root {
    --text: hsl(247, 100%, 95%);
    --background: hsl(240, 60%, 1%);
    --primary: hsl(192, 76%, 58%);
    --secondary: hsl(243, 71%, 65%);
    --accent: hsl(306, 76%, 66%);

    --angle: 120deg;
    --linearPrimarySecondary: linear-gradient(var(--angle), var(--primary), var(--secondary));
    --linearPrimaryAccent: linear-gradient(var(--angle), var(--primary), var(--accent));
    --linearSecondaryAccent: linear-gradient(var(--angle), var(--secondary), var(--accent));
    --radialPrimarySecondary: radial-gradient(var(--angle), var(--primary), var(--secondary));
    --radialPrimaryAccent: radial-gradient(var(--angle), var(--primary), var(--accent));
    --radialSecondaryAccent: radial-gradient(var(--angle), var(--secondary), var(--accent));
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--text);
    border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: white;
}

body {
    font-family: 'Noto Serif';
    font-weight: 400;
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    border: 0;
}
  
h1, h2, h3, h4, h5 {
    font-family: 'Noto Serif';
    font-weight: 700;
}
  
html {font-size: 100%;} /* 16px */

h1 {font-size: 4.210rem; /* 67.36px */}

h2 {font-size: 3.158rem; /* 50.56px */}

h3 {font-size: 2.369rem; /* 37.92px */}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}