HTMLify

@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
    --background: white;
	--primary-blue: #625BFE;
	--secondary-blue: #4bd7e3;
	--text-color: #4d5b7c;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--background);
    padding: 64px;
	font-family: Mulish;
	color: var(--text-color);
}

.progress__wrapper {
	position: fixed;
	top: 0;
	left: 0;
    z-index: 100;
	width: 100%;
	height: 10px;
	background-color: #2c2c2c;
}

.progress__bar {
	display: block;
	width: 0;
	height: inherit;
	background: linear-gradient(
		90deg, rgb(255, 192, 1) 0%, 
		rgb(215, 226, 0) 16.15%, 
		rgb(128, 211, 74) 33.85%, 
		rgb(0, 214, 136) 50.52%,
	    rgb(1, 208, 192) 66.15%, 
		var(--secondary-blue) 81.25%, 
		var(--primary-blue) 100%
	);
}

.article__content {
    max-width: 600px;
    margin: auto;
    display: flex;
    gap: 32px;
    flex-direction: column;
}

.article__content p {
	line-height: 1.5;
}

.article__content h1 {
	font-weight: 700;
    margin: 0;
	
    font-size: 38px;
}