/*
	import the 'Azeret Mono' font for
	usage: font-family: 'Azeret Mono', monospace;
*/
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,400;1,400&display=swap');

.unselectable
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*
{
	font-family: 'Azeret Mono', monospace;
	max-width: 100%;
}

body
{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #CFD8DC;
	background-color: #181921;
}

.test
{
	font-size: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 1.5s;
	width: 50px;
	height: 50px;
	background-color: #e36363;
}

.test:hover
{
	font-size: 72px;
	border-radius: 25px;
	position: relative;
	width: 160px;
	height: 90px;
	background-color: #b91111;
}

.content-item
{
	padding: 10px;
	border-width: 2px;
	border-style: solid;
	border-radius: 5px;
	border-color: #cfd8dc48;
	margin-bottom: 30px;
}

.navbar
{
	display: flex;
	list-style-type: none;
}

.navitem
{
	transition: color 0.5s, background-color 0.5s;
	font-size: 24px;
	padding: 12px;
	border-left: #dd2828 2px solid;
}

.navitem:hover
{
	background-color: #e47070;
	color: #181921;
}

img
{
	height: 200px;
}

p
{
	max-width: 750px;
}

ul
{
	max-width: 750px;
}

a, a:link
{
	color: #e36363;
}

a:hover
{
	color: #dd3d28;
}

a:visited
{
	color: #96e363;
}

a:active
{
	color: #46dd28;
}

div
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

canvas
{
	width: 200px;
	height: 200px;
}