style.scss

@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&family=Karla:wght@200;300;400;500;600;700&family=PT+Sans:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');


html {
	display: flex;
	flex-direction: column;

	background-color: whitesmoke;
	align-items: center;
	justify-content: center;
}

body {
	display: flex;
	flex-direction: column;
	// align-items: center;
	box-sizing: border-box;
	padding: 12px 24px;
	width: 96vw;
	border-radius: 8px;
	box-shadow: 20px 20px 80px;
	background: linear-gradient(rgb(43, 45, 46), rgb(27, 26, 29));
}

#header, #section {
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 4em;
}

#page-title {
	text-align: center;
	font-family: Raleway;
	font-size: 4vw;
	color: rgb(142, 88, 255);
	margin: 8px;
    background-color: rgb(216, 216, 216);
    padding: 0 36px;
	border-radius: 8px;
}

hr.top{
    margin-bottom : 24px;
}

hr.bottom{
    margin-top : 36px;
}

hr.line-1 {
    border-color: whitesmoke;
	width: 90vw;
}

hr.line-2{
    align-self: left;
    border-color: rgb(113, 119, 122);
    width: 80vw;
}

#content {
    font-family: Poppins;
    color: whitesmoke;
}

#content > h1 {
    font-weight: 500;
    margin-top: 64px;
    width: 100%;
    text-align: center;
    color: rgb(227, 121, 51);
}

#content > h2 {
    font-weight: 400;
}

.code {
    font-family: cascadia code;
    font-size: 1.1em;
    color: rgb(0, 202, 255);
}