:root {
	--dark-grey-transparent: #2A2B2CCC;
	--dark-grey: #282828;
	--medium-grey: #2A2B2C;
	--light-grey: #707070;
	--very-light-grey: #EBEBEB;
	--red: #BB3F3F;
	--hover-bgc: #37373780;
	--titlebar-height: 64px;
	--window-controls-width: 75px;
	--scrollbar-width: 0px;
}

body {
	color: white;
	background-color: var(--dark-grey);
	font-family: Roboto, HelveticaNeue, Arial;
	height: 100vh;
	margin: 0;
	display: grid;
	grid-template-rows: 1fr 50px;
}

.content-main {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.content-footer {
	width: 80%;
	margin: 0 auto;
	border-top: 1px solid white;
	position: relative;
}

.dl-info {
	text-align: center;
	margin: 50px 0;
}

.dl-info#all-dls {
	margin-top: 50px;
	font-size: small;
	color: var(--light-grey);
}

.dl-wrap {
	display: flex;
	justify-content: center;
}

.dl {
	margin: 0 25px;
	user-select: none;
	-moz-user-select: none;
}

.dl>a {
	border-radius: 8px;
	border: 1px solid var(--light-grey);
	color: var(--very-light-grey);
	display: inline-block;
	padding: 50px;
	transition: border-color 0.1s, background-color 0.1s;
	text-decoration: none;
	margin-bottom: 7px;
}

.dl>a:hover {
	border-color: white;
	background-color: var(--hover-bgc);
}

.dl>div {
	font-size: small;
	color: var(--light-grey);
}