:root {
	background-color: #000000;
	background-image: url("/images/matrix.jpeg");
	color: #FFFFFF;
	font-family: Arial;
	font-size: 14pt;
}

body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 10%;
	padding-right: 10%;
}

.navbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #404040;
	min-height: 60px;
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
}

.footer {
	background-color: #404040;
	min-height: 60px;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.content {
	background-color: #202020;
	display: flex;
	flex-direction: column;
	align-items: start;
	padding: 20px;
	border-radius: 5px;
	gap: 20px;
	a {
		text-decoration: none;
		color: #FFFFFF;
	};
}

.card-container {
	background-color: #404040;
	border-radius: 5px;
	width: auto;
	height: auto;
	padding: 20px;
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	justify-content: space-evenly;
	align-content: space-evenly;
}

.card-item {
	background-color: #202020;
	border-radius: 5px;
	height: 100px;
	width: 250px;
	padding: 5px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.textbox {
	background-color: #404040;
	border-radius: 5px;
	padding: 20px;
	text-align: justify;
	text-justify: inter-word;
}

.img {
	display: flex;
	align-self: center;
	max-width: 200px;
	border-radius: 5px;
}

.message-page {
	background-color: #202020;
	height: 500px;
	width: 100%;
	display: flex;
	align-self: center;
	gap: 20px;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}