style.css

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;700&family=IBM+Plex+Sans:wght@200;700&display=swap');

:root{
    /* Base Pastels */
    --red: #ff3633;
	--orange: #fea120;
	--yellow: #fcfc73;
	--green: #83d883;
	--blue: #84b1c2;
	--purple: #c185bd;

    /* Grey Scale */
    --black: #131515;
	--grey-1: #1b1d1c;
	--grey-2: #222423;
	--grey-3: #313330;
	--grey-4: #4e504b;
	--grey-5: #898a81;
	--grey-6: #a7a89c;
	--white: #ffffec;

    /* Expanded Colours */
    --s-red: #d62828;
	--s-orange: #f77f00;
	--s-yellow: #fcbf49;
	--s-blue: #0080ff;
	--s-purple: #7e84ff;
	--s-cyan: #88f8ff;

    /* CS++ Colours */
    --cspp-blue-1: #2a1191;
	--cspp-blue-2: #462ab3;
	--cspp-blue-3: #4159ff;
	--cspp-blue-4: #549fff;

	--evil: #b20300 !important;
}

html,
body {
	background-color: var(--black);
	font-family: 'IBM Plex Sans', sans-serif;
	color: var(--white);
	color-scheme: dark;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	width: 100%;
    height: 100%;

	/* align items in the center of the page */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.title {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	text-shadow: 5px 5px 5px 5px var(--grey-1);
}

.subtitle {
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 200;
	text-shadow: 5px 5px 5px 5px var(--grey-1);
}

.large {
	font-size: 3rem;
}

.medium {
	font-size: 2rem;
}

.nogap {
	margin: 0;
	padding: 0;
}

.logo {
	width: 10rem;
	height: auto;
	margin: 0;
	padding: 0;
}

.blue1{
    color: var(--cspp-blue-1);
}

.blue2{
    color: var(--cspp-blue-2);
}

.blue3{
    color: var(--cspp-blue-3);
}

.blue4{
    color: var(--cspp-blue-4);
}

.evil{
	color: var(--evil);
}