*{
	box-sizing: border-box;
	font-family: ukij cjk;
}

body{
	width: 350px;
	height: 500px;
	margin: 0;
	font-size: 16px;
	direction: rtl;
}

header, section, h2, p{
	margin: 0 0 16px 0;
}

header{
	text-align: center;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

section{
	padding: 16px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
section:last-of-type{
	border-bottom: none;
}

section.inline{
	
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

h1.usual-text, h2.usual-text, h3.usual-text{
	font-size: 16px;
	font-weight: initial;
	margin-bottom: 0;
	display: inline;
	align-items: center;
}

select{
	display: block;
	width: 200px;
	padding: 8px;
	border: none;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 2px transparent;
	border-radius: 4px;
	background-color: #fafafa;
	font-size: inherit;
	cursor: pointer;
	transition: box-shadow 0.1s;
}
select:focus{
	outline: none;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(33, 150, 243, 1);
	background-color: #ffffff;
}
select option{
	font-size: 16px;
}

.text-sample{
	display: flex;
	flex-basis: 100%;
	padding-top: 16px;
	justify-content: center;
	font-size: initial;
	text-align: center;
}


.range{
	display: flex;
	flex-direction: column;
	flex-basis: 300px;
	padding-top: 20px;
}

.range input[type='range']{
	margin-bottom: 16px;
}

.range .labels{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.font-settings-row{
	padding-top: 20px;
}

input[type=range]{
	-webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: 4px;
	background: rgba(128, 128, 128, 0.2);
	border: none;
	border-radius: 100px;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background-color: rgba(33, 150, 243, 1);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(33, 150, 243, 0);
	margin-top: -4px;
	transition: box-shadow 0.4s;
	cursor: pointer;
}


input[type=range]:active::-webkit-slider-thumb {
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(33, 150, 243, 0.3);
}

input[type=range]:focus {
	outline: none;
}




/*
	Dark theme
*/
@media (prefers-color-scheme: dark){
	::-webkit-scrollbar{width: 4px;height: 4px;}
	::-webkit-scrollbar-track{background-color: #202124;border-left: 0px}
	::-webkit-scrollbar-thumb{background-color: #9aa0a6;}
	::-webkit-scrollbar-thumb:hover{background-color: #e7e9ec;}
	
	html, body{
		background-color: #202124;
		color: #e7e9ec;
	}
	select{
		background-color: rgba(0, 0, 0, .3);
		color: #e7e9ec;
	}
	select:focus{
		background-color: rgba(0, 0, 0, .3);
	}
	select option{
		background-color: #28292c;
		color: #e7e9ec;
	}
}