@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
:root{
	--pozadi:black;
	--panely:#121212;
	--texty:#343434;
	--textyHover:#646464;
	--nadpisy:white;
	--panelHover:#1F1F1F;
}
#back{
	color:white;
}

#player{
	    width: 95dvw;
		display:none;
}
#fullAudioPlayer{

	display:flex;
	position:fixed;
	bottom: 0;
	right: 0;
	flex-direction:column;
	    align-items: center;
	width:100%;
	
	
}
#fullAudioPlayer textarea{

    height: 512px;
	width:60%;
	user-select:none;
	min-height:512px;
	min-width:60%;
	font-size:2em;
	align-self:center;
	font-family:Poppins;
	background-color:black;
	color:white;
	outline:none;
	border:5px solid gray;
	
	display:none;
	cursor:grab;
	
	min-width:60%;
	max-width:60%;
	min-height:512px;
	max-height:512px;
	
}
#audioPlayer{
	display:flex;
	
	min-height:50px;
	padding:2%;
	background:black;
	color:white;
	border:5px solid gray;
	width:91%;
	gap:10px;
	align-items: center;
    justify-content: center;
	border-radius:15px;
}
#newAcc{
	display:flex;
	flex-direction:column;
	gap:10px;
}
input,button,select{
	font-size:2em;
	font-family:Poppins;
	padding:1%;
	outline:none;
	border-radius:5px;
}
#plusIcon{
	fill:white;
	width:1.5em;
}
#nahledAlba{
	width:23em;
	border:2px solid gray;
}
#autoriHudby{
	display:flex;
	flex-direction:row;
	gap:10px;
	align-items:center;
}
.stitekAutori{
	background-color:orange;
	padding:1%;
	border-radius:5px;
	color:black;
	font-weight:bold;
}
#volume{
	width:60px;
}
#audioPlayer #playBtn{
	fill:gray;
	
}
#stopIcon{
	display:none;
	
}

#audioPlayer #showTextBtn{
	background-color:white;
	color:black;
	padding-left:0.3%;
	padding-right:0.3%;
	cursor:pointer;
	user-select:none;
	border-radius:15px;
	
}
#myPlayer{
	display:block;
	width:95vw;
	height:20px;
	background-color:gray;
	cursor:pointer;
	border-radius:15px;
}

#myPlayer #track{
	background-color:white;
	width:35vw;
	height:20px;
	display:block;
	cursor:pointer;
	border-radius:15px;
}

 
main{
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items:Center;
}
.nadpis{
	font-weight:bold;
	font-size:6em;
	color:var(--nadpisy);
}
.nadpis2{
	font-weight:bold;
	font-size:1.5em;
	color:var(--nadpisy);
}
body{
	background:var(--pozadi);
	color:var(--texty);
	font-family:Poppins;
	min-width:425px;
}
#oMe,#alba{
	font-size:1.5em;
	background-color:var(--panely);
	padding:2%;
	margin:2%;
	width:70%;
	border-radius:10px;
	color:var(--textyHover);
	font-weight:bold;
}   

#coverPisne{
	width:40em;
}
.nazevPisne{
	font-weight:bold;
	font-size:3em;
	    width: 70%;
}
.prehrano{
width:20%;	
}
#pisnePanel{
    background-color: var(--panely);
    width: 90%;
    padding: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
	gap:50px;
	margin-bottom:5%;
}
#pisneBlok{
	display:flex;
	background-color:var(--panelHover);
	color:white;
	padding:1.5%;
	width: 90%;
}
.casPisne{
	width:10%;
}
.playBtn{
	fill:gray;
	width:35px;
	
}
.pisen{
	display:flex;
	align-items: center;
	width:100%;
}
#seznamAlb{
	display:flex;
	gap:100px;
	flex-direction:column;
	
}
.albumRadek{
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4em;
	background-color:var(--panelHover);
	border-radius:10px;
}
.albumRadek img{
	width:10em;
}
.nazevAlba{
	font-size:3em;
	color:var(--nadpisy);
}

.posulouchatBtn{
	color:black;
	background-color:white;
	padding:2%;
	border-radius:5px;
	text-align:center;
	
}
.cast1{
	display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 1%;
	
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: var(--panely);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--panelHover);
  border-radius: 20px;
}

textarea::-webkit-scrollbar {
  width: 20px;
}
textarea::-webkit-scrollbar-track {
  background: var(--panely);
}
textarea::-webkit-scrollbar-thumb {
  background-color: var(--panelHover);
  border-radius: 20px;
}

.stav{
	color:#BE8CB9;
}
.cast2{
	display:Flex;
	flex-direction:column;
	width:90%;
}
#autoriBlok,#registraceBlok{
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items:Center;
	
}

#autoriBlok a{
	font-size:4em;
	text-decoration:none;
	color:var(--texty);
	display:block;
	text-align:left;
}
#autoriBlok a:hover{
	color:var(--textyHover);
}

@media only screen and (max-width: 1306px) {
	.albumRadek{
		flex-direction: column;
		padding: 2%;
	}
	.albumRadek img{
		width:20em;
	}
	.cast2{
		display: flex;
		flex-direction: column;
		width: 90%;
		align-items: center;
		font-size: 1.5em;
		color:var(--textyHover);
	}
	
	
	.posulouchatBtn {
    
    width: 100%;
	}
	.nazevPisne{
	font-size:2em;
	   
	}
	.nadpis{
		font-size:3em;
	}
	#fullAudioPlayer textarea{

   
	font-size:1.3em;
	
	}
}

@media only screen and (max-width: 800px) {
	.albumRadek img{
		width:10em;
	}
	.cast2{
		
		font-size: 1.5em;
	}	
	.nadpis{
		font-size: 4em;
	}
	.nazevPisne{
	font-size:1.5em;
	   
	}
	.nadpis{
		font-size:2em;
	}
	#coverPisne {
    width: 30em;
	}
	#newAcc{
		
		width:90%;
	
	}
	#registraceBlok{
		width:100%;
		
	}
	
}

@media only screen and (max-width: 600px) {
	.nadpis{
		font-size: 3em;
	}
	
	.albumRadek img{
		width:10em;
	}
	.cast2{
		
		font-size: 0.9em;
	}
	#oMe,#alba{
		width:90%;
	}	
	.nazevPisne{
	font-size:1.3em;
	   
	}
	.nadpis{
		font-size:1.5em;
	}
	#coverPisne {
    width: 20em;
	}
	.prehrano,.casPisne{
		font-size:0.5em;
	}
	
	
	#fullAudioPlayer textarea{

    height: 512px;
	width:80%;
	font-size:1.1em;
	min-width:80%;
	max-width:80%;
	min-height:512px;
	max-height:512px;
	
	}
	#autoriBlok a {
    font-size: 2.5em;
	}
	
	
}