@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

*{
  scroll-behavior: smooth;
}

body{
	padding: 0px;
	margin: 0px;
	height: 100%;
	
	font-family: "Space Mono", monospace;
	font-size: 1.5vw;
	/*background-color: blue;*/
	
	overflow: hidden;
	
}

hr{
	margin: 0;
}
.content{
	display: flex;
	overflow: hidden;
}

.leftBar{
	width: fit-content;
	padding: 2vw;
	border-right: 0.5px solid black;
	height: 100lvh;
	position: sticky;
	top: 0px;
	/*background-color: green;*/
}

.page{
	width: 100%;
	min-height: 100%;
	height: 100vh;
	overflow-y: hidden;
	/*background-color: red;*/
}

.viewer{
	overflow-y: auto;
	height: 100vh;
}

.navigation{
	/* display: flex; */
	display: flex;
	/* justify-content: center; */
	align-items: center;
	padding: 1vw;
	border-bottom: 1px solid black;
	position: sticky;
	top: 0;
	text-align: left;
}

button{
	border: 1px solid rgb(114, 212, 152);
	border-radius: 0.5vw;
	padding: 0.9vw;
	padding-left: 5vw;
	padding-right: 5vw;
	font-family: "National Park";
	font-size: 1.5vw;
	background-color: white;
	color: rgb(114, 212, 152);
	/*transition: all 0.3s ease;*/
}

button:hover{
	background-color: rgb(114, 212, 152);
	border: 1px solid white;
	color: white;
	/*transition: all 0.3s ease;*/
	/*114, 212, 152 */
}

a{
	text-decoration: none;
	color: black;
}

a:hover{
	text-decoration: underline;
}

.articles{
	text-align: center;
}

p{
	margin: 1vw;
	text-align: justify;
}

*::-webkit-scrollbar {
  height: 6px;
  width: 0.7vw;
}

*::-webkit-scrollbar-track {
  border-radius: 0px;
}

*::-webkit-scrollbar-thumb {
  background-size: cover;
  border-radius: 0px;
}

img{
	max-width: 100%;
	border: 1px solid black;
	border-left: none;
	border-right: none;
	width: 100%;
}

#darkmode{
	padding: 0px;
}



.switch{
	position: relative;
	display: inline-block;
	width: 4vw;
	height: 2vw;
	
}

.switch input{
	opacity: 0;
	width: 0;
	height: 0;
}

.slider{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background-color: white;*/
	transition: 0.4s;
	/*border: 1px solid black;*/
}

.slider::before{
	position: absolute;
	content: "";
	height: 1.5vw;
	width: 1.5vw;
	left: 0.3vw;
	bottom: 0.15vw;
	background-color: black;
	transition: 0.4s;
	border: 1px solid black;
}
/*
input:checked + .slider{
	background-color: black;
}

input:checked + .slider::before {
	background-color: white;
}
*/
input:checked + .slider::before{
	transform: translateX(1.7vw);
}

.foo{
	padding: 1vw;
	display: flex;
}

table{
	width: 100%;
	text-align: left;
	/* border: 2px solid greenyellow; */
	text-align: center;
}

.links a{
	font-size: 1.2vw;
}

#player{
	border: 1px solid black;
	border-left: none;
	min-width: 25%;
	max-width: 25%;
	/* min-width: 0%;
	width: 0px;
	visibility: hidden; */
}

#player.visible{
	min-width: 25%;
	max-width: 25%;
	visibility: visible;
}

#albumCover{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

#discoveryquery{
	/* height: fit-content; */
	height: fit-content;
}

#categoriesquery{
	/* height: fit-content; */
	height: 75vh;
}

#playlistsquery{
	/* height: fit-content; */
	height: fit-content;
}

#playbt{
	width: 25%;
	padding: none;
	padding-left: 4.5%;
	padding-right: 4.5%;
	border: none;
	margin: none;
	aspect-ratio: 1 / 1;
	transition: all 0.1s ease;
}

#rewindbt{
	width: 25%;
	border: none;
	margin: none;
	aspect-ratio: 1 / 1;
}
#windbt{
	width: 25%;
	border: none;
	margin: none;
	aspect-ratio: 1 / 1;
}

.audiocontrols{
	display: flex;
	justify-content: center;
  	align-items: center;

	margin: none;
	width: 100%;
	padding-top: 5%;

}

#title{
	font-family: Impact;
	font-size: 2.5vw;
	text-align: center;

	padding-top: 5%;
	padding-bottom: 5%;

	overflow: hidden;
  	white-space: nowrap;
	width: 100%;

	border-bottom: 1px solid black;
}

.movin-text {
  display: inline-block;
  /* padding-left: 100%; */
  animation: marquee 10s linear infinite;
}

.cover{
	width: 25%;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.cover p{
	text-align: center;
}

.cover_row{
	display: flex;
}

.cover:hover{
	text-decoration: underline;
	transition: all 0.3s ease;
}