:root {
	--black: #0a0a0a;
	--white: #fdfdfd;
	--gray-light: #f5f5f5;
	--gray-dark: #757575;
	--hover: #6a6a6a;
	--font-family: 'Nunito', sans-serif;
}

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow-y: hidden;
	background: var(--white);
}

header {
	/* This is the top header bar */
	height: 50px;
	width: 100%;
	position: fixed;
	display: flex;
	background-color: var(--black);
	align-items: center;
}

header h1 {
	/* The title in the header */
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	color: var(--white);
	font-family: var(--font-family);
	margin-left: 20px;
}

main {
	/* This is the section containing all content below the header */
	height: 100%;
	width: 100%;
	padding-top: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.section {
	/* General section style */
	width: fit-content;
	max-width: 90%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	gap: 20px;
	word-wrap: break-word;
}

.section.nobackg {
	/* To have sections without background */
	background: none;
}

.section.backg {
	/* To have sections with a subtle background */
	background: var(--gray-light);
	border-radius: 20px;
}

.section h2 {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	font-family: var(--font-family);
}

.section h3 {
	font-size: 26px;
	font-weight: 500;
	text-align: center;
	font-family: var(f--font-family);
}

.section p {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	font-family: var(--font-family);
	word-wrap: break-word;
}

.section button {
	padding: 8px 16px;
	width: auto;
	height: auto;
	background: var(--gray-dark);
	border: none;
	border-radius: 10px;
	transition: 0.3s;
	cursor: pointer;
	font-size: 24px;
	font-family: var(--font-family);
	font-weight: 600;
	color: var(--gray-light);
	text-decoration: none;
}

.section button:hover {
	transform: scale(105%);
	background: var(--hover);
	color: var(--white);
	cursor: pointer;
}

.section button:active {
	transform: scale(95%);
}

.btndiv {
	/* A div to contain buttons in a row */
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 10px;
}