:root {
	--text: #d6d6d6;
	--background: #111111;
	--primary: #2c2d2b;
	--highlight: #3a3b39;
	--navbar: #181818;
}

.background {
	background-image: linear-gradient(10deg, var(--background), var(--background));
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	color: var(--text);
	tab-size: 4;
	line-height: 2;
	min-height: 100%;
	height: auto;
}

.mod {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	align-content: center;

	background-color: var(--primary);
	border-radius: 10px;
	width: 600px;
	cursor: pointer;
}

.mod:hover {
	background-color: var(--highlight);
}

.icon {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	width: 80px;
}

.details {
	flex-direction: column;
}

.title {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	justify-content: left;
}

.description {
	text-wrap: wrap;
}

.loading {
	color: white;
}

.loading::before {
	content: "";
	background-image: url(https://www.svgrepo.com/show/485741/hourglass.svg);
	background-size: 25px 25px;
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
	top: 4px;
	display: inline-block;
	position: relative;
	filter: invert(100%);
}

div.search {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	width: 600px;
	margin-bottom: 10px;
}

input.search {
 outline: 0;
 border: 1px solid var(--highlight);
 border-radius: 10px;
 padding: 10px;
 background-color: var(--primary);
 color: var(--text);
 height: 20px;
	width: 95%;
}

img.search {
	width: 3%;
	height: 20px;
	filter: invert(100%);
}

@media (width <= 650px) {
 .mod { width: 400px; font-size: 8px; }
 div.search { width: 400px; }
 .icon { width: 50px; }
}

@media (width <= 450px) {
 .mod { width: 300px; font-size: 7px; }
 .title { font-size: 6px; }
 div.search { width: 300px; }
 .icon { width: 30px; }
}