/*=============================================
=            General Styles block            =
=============================================*/
*,
::after,
::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	font-size: 62.5%;
	height: 100%;
}




body {
	background-color: rgb(53, 53, 53);
	font-family: 'JetBrains Mono', monospace;
	font-size: 1.6rem;
	min-height: 100%;

}

body::-webkit-scrollbar{
	display:none;
}


button {
	text-decoration: none;
	border: none;
	background-color: transparent;
	font-family: inherit;
	padding: 0;
	cursor: pointer;
}

a:focus,
button:focus,
input:focus,
:focus {
	outline: none;
}

/*=====  End of Section comment block  ======*/

/*=============================================
=            Containers and boxes section           =
=============================================*/

#GradContainer {
	margin: 0 auto;
	max-width: 2000px;
	min-width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

#FullContainer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0;
	grid-template-areas:
		'PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer'
		'PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer'
		'PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer'
		'PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer'
		'PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer PlayerContainer'
		'Colors Colors Colors Colors Colors Colors Colors Colors Colors';

	width: 60%;
	height: auto;
}

#Colors {
	grid-area: Colors;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 2em;
	margin-top: 0.5em;
	border-radius: 15px;
	background-color: #0a090856;
	border: solid black 2px;
	transition: 1s;
	flex: 1 0 auto;
}

#Colors:hover {
	background-color: #0a0908c9;
	transition: 1s;
}

#PlayerContainer {
	grid-area: PlayerContainer;
	display: flex;
	backdrop-filter: blur(2px);
	height: auto;
}

#TrackContainer {
	flex: 1 2 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));

	grid-template-areas:
		'TrackDisplay TrackDisplay TrackDisplay'
		'LyricsDisplay LyricsDisplay LyricsDisplay'
		'LyricsDisplay LyricsDisplay LyricsDisplay'
		'LyricsDisplay LyricsDisplay LyricsDisplay';
}

#embedded-iframe {
	width: 100%;
	height: 100%;
}

#Input {
	padding: 2em;
	flex: 1 150px auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #0a090854;
	border-radius: 15px;
	margin-left: 0.5em;
	border: solid black 2px;
	transition: 1s;
}

#Input:hover {
	background-color: #0a0908b0;
	transition: 1s;
}

#TrackDisplay {
	grid-area: TrackDisplay;
	border-radius: 15px;
	color: white;
	min-width: 220px;
	max-height: 300px;
}

#LyricsDisplay {
	grid-area: LyricsDisplay;
	max-height: 300px;
	margin-top: 0.5em;
}

#btns-container {
	grid-area: btns-container;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.lyrics {
	height: 100%;
	background-color: #0a09088b;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 1em;
	border-radius: 15px;
	border: solid black 2px;
}

/*=====  End of Section comment block  ======*/

/*=============================================
=            Form Section block            =
=============================================*/

h2 {
	text-align: center;
	font-size: clamp(2rem, 0.95rem + 0.25vw, 1.25rem);
	color: white;
	font-weight: 700;
	margin-bottom: 1em;
}

label {
	display: block;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
	color: white;
	align-self: flex-start;
}

input {
	width: 100%;
	padding: 5px;
	font-size: 15px;
	border-width: 0px;
	border-color: #cccccc;
	background-color: #ffffff;
	color: #000000;
	border-style: solid;
	border-radius: 35px;
	padding: 0.5em;
}

input:hover {
	outline: 2px solid #2a9d8f;
	background-color: #ebebeb;
	transition: 0.2s;
}

input:focus {
	border: 2px solid #2a9d8f;
	background-color: #ebebeb;
	transition: 0.2s;
}

#Search {
	display: block;
	width: 100%;
	font-size: clamp(2rem, 0.95rem + 0.25vw, 1.25rem);
	background-color: #cc2854;
	color: #000000;
	border-radius: 35px;
	cursor: pointer;
	margin-top: 2em;
}

#Search:hover {
	background-color: #90213f;
}

/*=====  End of Section comment block  ======*/

/*=============================================
=            Buttons Section            =
=============================================*/

.Color {
	border-radius: 15px;
	cursor: pointer;
	color: #ffffff;
	font-size: 18px;
	padding: 0.5em;
	margin-left: 0.5em;
}

.btn-color {
	background-color: #18ab29;
	border-radius: 50px;
	cursor: pointer;
	color: #ffffff;
	font-size: 50px;
	padding: 0.5em;
}

.colorOne {
	background-color: yellow;
	transition: 0.8s ease-out;
}

.colorOne:hover {
	background-color: #ddfa3b;
	transform: scale(2.5);
	transition: 0.3s ease-in;
}
.colorOne:active {
	position: relative;
	top: 1px;
}

.colorTwo {
	background-color: blue;
	transition: 0.8s ease-out;
}

.colorTwo:hover {
	background-color: #5653ff;
	transform: scale(2.5);
	transition: 0.3s ease-in;
}
.colorTwo:active {
	position: relative;
	top: 1px;
}

.colorThree {
	background-color: red;
	transition: 0.8s ease-out;
}

.colorThree:hover {
	background-color: #fd6c6c;
	transform: scale(2.5);
	transition: 0.3s ease-in;
}
.colorThree:active {
	position: relative;
	top: 1px;
}

.colorFour {
	background-color: rgb(255, 0, 255);
	transition: 0.8s ease-out;
}

.colorFour:hover {
	background-color: rgb(255, 80, 255);
	transform: scale(2.5);
	transition: 0.3s ease-in;
}
.colorFour:active {
	position: relative;
	top: 1px;
}

.colorFive {
	background-color: purple;
	transition: 0.8s ease-out;
}

.colorFive:hover {
	background-color: #82248f;
	transform: scale(2.5);
	transition: 0.3s ease-in;
}
.colorFive:active {
	position: relative;
	top: 1px;
}
/*=====  End of Section comment block  ======*/

/*=============================================
=            Misc block            =
=============================================*/

#lyricsMusixmatch {
	white-space: pre-line;
}

.lyrics::-webkit-scrollbar {
	width: 1rem;
}

.lyrics::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 15px;
}

.lyrics::-webkit-scrollbar-thumb {
	background: rgb(0, 0, 0);
	border-radius: 15px;
}

.lyrics::-webkit-scrollbar-thumb:hover {
	background: #b30000;
}

/*=====  End of Section comment block  ======*/

/*=============================================
=            Media Queries block            =
=============================================*/

@media screen and (max-width: 850px) {
	* {
		margin: 0;
	}

	#GradContainer {
		align-items: flex-start;
	}

	#FullContainer {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
		grid-template-areas:
			'Colors'
			'PlayerContainer'
			'PlayerContainer'
			'PlayerContainer'
			'PlayerContainer'
			'PlayerContainer'
			'PlayerContainer';
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 0.5em;
	}

	#Colors {
		grid-area: Colors;
		height: 80%;
	}

	#PlayerContainer {
		grid-area: PlayerContainer;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
		grid-template-areas:
			'Input'
			'Input'
			'TrackContainer'
			'TrackContainer'
			'TrackContainer'
			'TrackContainer';
	}

	#Input {
		grid-area: Input;
		margin-left: 0;
	}
	#TrackContainer {
		grid-area: TrackContainer;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
		gap: 0px 0px;
		grid-template-areas:
			'TrackDisplay'
			'LyricsDisplay';
		width: 100%;
	}

	#TrackDisplay {
		grid-area: TrackDisplay;
		margin-top: 0.5em;
	}

	#embedded-iframe {
		height: 100%;
	}
	#LyricsDisplay {
		grid-area: LyricsDisplay;
		margin-top: 0px;
	}
}
/*=====  End of Section comment block  ======*/