* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Rubik", sans-serif;
    font-size: 18px;
}

img {
    height: auto;
    max-width: 100%;
}

.title {
	display: block;
	margin: 0 auto;
	font-size: 72px;
	font-style: italic;
	max-width: 100%;
	text-align: center;
	}

.nf {
	display: flex;
	justify-content: center;
	}

.sort-container {
    display: flex;
	flex-wrap: wrap;
    gap: 24px;
    border: 1px solid #bdbdbd;
    padding: 24px;
	justify-content: center;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 215px;

	label {
		margin-bottom: 10px;
	}
}

input[type='search'] {
    padding: 12px;
}

fieldset {
    padding: 12px;
    display: flex;
    gap: 24px;
}

.sort-container,
.user-container {
    max-width: 1450px;
    padding: 24px;
    margin: 24px auto;
    border: 1px solid #bdbdbd;
}

.user-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
   
}

.user {
    border: 1px solid #bdbdbd;
    padding: 12px;
    max-width: 332px;
}

.user-photo {
    margin-bottom: 18px;
}

.user-name {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.user-age {
    font-size: 20px;
    margin-bottom: 12px;
}



/**/

 
:root {
	--bg: #e3e4e8;
	--fg: #17181c;
	--bs1: #ffffff;
	--bs2: #dee6ff;
	--tick: #bcceff;
	--transDur: 0.1s;
 
}
 
 
 
 
input[type=range]  {
	border-radius: 50px;
	overflow: hidden;
	background-color: transparent;
	box-shadow:
		0.3em 0.3em 0.4em var(--bs2) inset,
		-0.3em -0.3em 0.4em var(--bs1) inset;
	display: block;
	padding: 0 0.1em;
	width: 100%;
	height: 1.5em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type=range]:focus {
	outline: transparent;
}
input[type=range]::-webkit-slider-thumb {
	background-color: #6e97ff;
	border: 0;
	border-radius: 50%;
	box-shadow:
		-0.3em -0.3em 0.5em #6e97ff inset,
		0 -0.2em 0.2em 0 rgba(67, 67, 67, 0.267),
		0.3em 0.9em 0.8em rgba(64, 64, 64, 0.467);
	cursor: pointer;
	position: relative;
	width: 1.3em;
	height: 1.3em;
	transition: all var(--transDur) linear;
	z-index: 1;
	-webkit-appearance: none;
	appearance: none;
}
input[type=range]:focus::-webkit-slider-thumb {
	background-color: #5583f6;
	box-shadow:
		-0.3em -0.3em 0.5em #6e97ff inset,
		0 -0.2em 0.2em 0 rgba(85, 85, 85, 0.234),
		0.3em 0.9em 0.8em rgba(46, 46, 46, 0.153);
}
input[type=range]::-moz-range-thumb {
	background-color: #255ff4;
	border: 0;
	border-radius: 50%;
	box-shadow:
		-0.3em -0.3em 0.5em #6e97ff inset,
		0 -0.2em 0.2em 0 rgba(69, 69, 69, 0.099),
		0.3em 0.9em 0.8em rgba(63, 63, 63, 0.138);
	cursor: pointer;
	position: relative;
	width: 1.3em;
	height: 1.3em;
	transform: translateZ(1px);
	transition: all var(--transDur) linear;
	z-index: 1;
	-moz-appearance: none;
	appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
	background-color: #5583f6;
	box-shadow:
		-0.3em -0.3em 0.5em #0b46da inset,
		0 -0.2em 0.2em 0 rgba(55, 55, 55, 0.267),
		0.3em 0.9em 0.8em rgba(60, 60, 60, 0.467);
}
input[type=range]::-moz-focus-outer {
	border: 0;
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #2e3138;
		--fg: #e3e4e8;
		--bs1: #3c4049;
		--bs2: #202227;
		--tick: #c7cad1;
	}
}