@font-face {
	font-family: "Hack";
	src : url("fonts/Hack-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

body {
	background-color: black;
	color: white;
	font-family: "Hack";
}

header {
	text-align: left;
	padding-left: 3px;
}

h1 {
	font-size: 48px;
	margin-bottom: 0%;
}

.seperator {
	height: 1px;
	width: 100%;
	background-color: white;
}

nav {
	text-align: center;
}

/*nav*/ button {
	display: inline-block;
	background-color: black;
	border-style: solid;
	border-width: 2px;
	border-color: white;
}

/*nav*/ button a {
	font-family: "Hack";
	color: white;
	display: block;
}

h2 {
	margin-top: 10px;
	margin-bottom: 0px;
}

.item {
	width: 500px;
	height: 120px;
	border-style: solid;
	border-width: 1px;
	border-color: white;

	margin: auto;
}
.item-picture {
	width: 25%;
	height: 100%;
	margin: auto;

	display: flex;
	align-items: center;
	justify-content: center;

	float: left;
}
.item-picture img {
	border-width: 2px;
	border-style: solid;
	border-color: white;
}
.item-content {
	width: 75%;
	height: 100%;
	float: right;
}

.item p {
	margin-top: 0px;
	margin-bottom: 0px;
}
.greytxt {
	color: grey;
}

p.small {
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: small;
}

.clear {
	clear: both;
}

a {
	color: white;
}

/* */

ul {
	list-style: none;
}

li {
	list-style: none;
	position: relative;
	padding-left: 1.5em;
}


li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;                 /* start in middle of line */
	transform: translateY(-50%); /* vertically center */
	width: 1em;               /* icon size matches font-size */
	height: 1em;              /* same as width for square SVG */
}

li#bluesky::before {
	background: url("media/bsky.svg") no-repeat center/contain;
}

li#twitter::before {
	background: url("media/twitter.svg") no-repeat center/contain;
}

li#youtube::before {
	background: url("media/youtube.svg") no-repeat center/contain;
}