@import url('inline-font1_1.900&display=swap');

:root {
	--primary: #EF53DB;
}

strong {
	color: #53dbef;
}

html {
	background: url(inline-font1_2.jpg) no-repeat center top fixed;
	background-size: cover
}

body {
	font-family: "Work Sans", sans-serif;
	margin: 2rem auto;
	max-width: 1140px;
	background: #181818;
	border-radius: 1rem;
	padding: 3rem 3rem 2rem;
	box-sizing: border-box
}

header {
	display: flex;
	justify-content: center;
	align-items: center;
}

form#search-form {
	background: #292929;
	position: relative;
	border-radius: 2rem;
	display: flex;
	padding: 8px;
	justify-content: space-between
}

span.filter-btn.btn.btn-sm {
	border-radius: 50rem;
	background: #0f0f0f;
	padding: .3rem .8rem;
	font-size: 10.8px;
	color: #888
}

input.form-control.search-input {
	background: none;
	border: none;
	color: var(--primary);
	text-align: center;
	flex-grow: 1;
	outline: none
}

form button {
	background: none;
	border: none;
	color: var(--primary)
}

p.btn-primary.px-5 {
	background: var(--primary);
	max-width: max-content;
	margin: 25px auto 40px;
	padding: 10px 40px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	color: #0f0f0f;
	cursor: pointer
}

p.btn-primary.px-5:hover {
	opacity: .9
}

article {
	color: #888;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5
}

h2,
h3 {
	color: #c3c3c3
}

h1 {
	text-align: center;
	color: #ff0;
	font-size: 24px;
	font-weight: 500
}

article img {
	max-width: 100%;
	margin: auto;
	height: auto;
	display: flex
}

@media only screen and (max-width:600px) {
	body {
		margin: 0;
		padding: 1rem
	}
}