*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #fff;
	font-family: 'poppins', sans-serif;
}

/* Logo css */
.logo {
	width:15em;
	justify-content: center;
}
.logo img {
	width: auto;
	justify-self: center;
}

body {
	min-height: 100vh;
	background-image: linear-gradient(
		180deg,
		rgb(32, 117, 48) 0%,
		rgb(26, 73, 37) 100%
	);
	display: flex;
	place-items: center;
	justify-content: center;
	flex-direction: column;
}

.main {
	position: relative;
	width: 95%;
	border-radius: 18px;
	overflow: hidden;
}

.main .playing_part {
	margin-top: 20px;
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.main .playing_part .img {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0.1px 4px 8px 2px rgba(0,0,0,0.1);
}

.main .playing_part .img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	animation: rotate 3s linear infinite;
	animation-play-state: paused;
}

.main.playing_part.img.play img {
	animation-play-state: running;
}

/* control_part */
.main .control_part {
	margin-top: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.main .control_part .song_title {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.main .control_part .song_title p:first-child {
	font-size: 22px;
	text-transform: capitalize;
	text-align: center;
}

.main .control_part .song_title p {
	font-size: 14px;
}

.main .control_part .control_buttons {
	margin-top: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}

.main .control_part .control_buttons .main_btns {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
}

.main .control_part .control_buttons .main_btns button {
	height: 3em;
	width: 3em;
	border-radius: 50%;
	font-size: 30px;
	border: none;
	outline: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 18px;
	background: rgba(0,0,0,0.08);
	box-shadow: 0.1px 8px 8px 2px rgba(0,0,0,0.2);
	margin-bottom: 0.5em;
	margin-top: 1em;
}

.main .control_part .control_buttons .main_btns #play_btn {
	background-image: linear-gradient(
		180deg,
		rgb(32, 117, 48) 0%,
		rgb(45, 142, 63) 100%
	);
	box-shadow: 0.1px 8px 8px 2px rgba(0,0,0,0.2) inset,
	            0.1px 8px 8px 2px rgba(0,0,0,0.2);
}

/* İstek butonu */
.request {
	width: 8em;
	height: 3em;
	margin-top: 20px;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	padding-top: 10px; 
	background-image: linear-gradient(
		180deg,
		rgb(172, 1, 1)0%,
		rgba(122, 0, 0, 1) 100%
	);
	box-shadow: 0.1px 8px 8px 2px rgba(0,0,0,0.2);
	margin-bottom: 50px;
}

.request:hover {
	cursor: pointer;
	background-image: linear-gradient(
		0deg,
		rgb(172, 1, 1)0%,
		rgba(122, 0, 0, 1) 100%
	);
}

/* Rotation keyframe (plak animasyonu) */
@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Range slider */
.range_slider {
	width: 60%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.range_slider p {
	font-size: 13px;
}

.main .control_part #slider {
	-webkit-appearance: none;
	outline: none;
	width: 85%;
	height: 4px;
	cursor: pointer;
	position: relative;
	border-radius: 3px;
	background: #fff;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	background-image: linear-gradient(
		180deg,
		rgb(32, 117, 48) 0%,
		rgb(45, 142, 63) 100%
	);
	box-shadow: 0.1px 8px 8px 2px rgba(0,0,0,0.2) inset,
	            0.1px 8px 8px 2px rgba(0,0,0,0.2);
}