body{
	position: static;
	width: 100%;
	height:100%;
	z-index: -1;
	background:url("images/backgroundTile.png");
	background-repeat: repeat-y;
	background-size: cover;
	image-rendering: pixelated;
	overflow-x: hidden;
	margin:0px;
}

.bestOf{
	position:absolute;
	top:0px;
	width:30vw;
}

.indexBody{
	height: 100vh;
}
#iframeSizer{
	position:static;
	width: 100%;
	height:100%;
	margin:0px;
	padding:0px;
}

.imgTitle {
	display:block;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
	width:65%;
	image-rendering: pixelated;
	cursor: pointer;
}

.flex{
	width:100%;
}

.animation{
	position:static;
	image-rendering: pixelated;
	width: 40%;
	margin-left:19%;
}
.art{
	position:static;
	image-rendering: pixelated;
	width:18%;
	padding-left: 1%;
}

.music{
	position:static;
	image-rendering: pixelated;
	height: 100%;
	width:25%;
	margin-left:24%
}

.about{
	position:static;
	image-rendering: pixelated;
	height: 100%;
	width:25%
}

.thing{
	width: 20%;
	image-rendering: pixelated;
	margin-left: 37%
}

.topper{
	image-rendering: pixelated;
	width:100%
}

.back{
	position: absolute;
	width:25%;
	top:-0px;
	left:5%;
	image-rendering: pixelated;
}

.title{
	position: absolute;
	width:67%;
	margin-left: 30%;
	margin-top:-23%;
	image-rendering: pixelated;
}

.borderimg {
	border: 60px solid transparent;
	padding: 0px;
	image-rendering: smooth;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	width: 30vw;
	height:100%;
	align-self: flex-end;
	cursor: pointer;
}

.flex2{
	image-rendering: smooth;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap:10px;
	width:90vw;
	margin-top: 10vh;
	margin-left: 10vw;
	font-family: System;
	font-weight: bold;
	font-size: 1.5vw;
	color: #2B2D33;
}

.best{
	margin-top: calc(20vh + 300px);
}


#progressBar{
	flex-grow:1;
	background: url("images/mediaPlayer/progress.png");
	background-size:100% 100%;
	border: #2B2D33 3px solid;
	z-index: 0;
}

#seeker{
	position: relative;
	bottom: 7px;
	left: 0%;
	background-image: url( "images/mediaPlayer/seeker.png");
	background-size: 100% 100%;
	background-position: center;
	width: 4vw;
	height: 50px;
	cursor: pointer;
}
#seekedBar{
	opacity:0 ;
	position: relative;
	bottom: 46px;
	left:1%;
	width: calc(99% - 30px);
	height: 20%;
	z-index: 1;
	background-color: #FF0004;
	border:#4B0001 10px solid;
	cursor: pointer;
}

#backButton{
	background: url( "images/mediaPlayer/backButton.png");
	background-size: 100% 100%;
	width: calc(2vw + 30px);
	height:100%;
	align-self: flex-end;
	cursor: pointer;	
	border: #2B2D33 3px solid;

}

#playButton{
	background: url("images/mediaPlayer/playButton.png");
	background-size: 100% 100%;
	width: calc(2vw + 30px);
	height:100%;
	align-self: flex-end;
	cursor: pointer;	
	border: #2B2D33 3px solid;
}

#nextButton{
	background: url("images/mediaPlayer/nextButton.png");
	background-size: 100% 100%;
	width: calc(2vw + 30px);
	height:100%;
	align-self: flex-end;
	cursor: pointer;	
	border: #2B2D33 3px solid;
}
#volumeButton{
	background: url("images/mediaPlayer/volume3.png");
	background-size: 100% 100%;
	width: calc(2vw + 30px);
	height:100%;
	align-self: flex-end;
	cursor: pointer;	
	border: #2B2D33 3px solid;
}

.audioPlayer {
	display: flex;
	background:#FFFFFF;
}

.BoxContainer{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap:10px;
	width:80vw;
	margin-top: 5vh;
	margin-left: 10vw;
	margin-right: 10vw;
	font-family: System;
	font-weight: bold;
	font-size: 1.5vw;
	color: #2B2D33;
}

br{
	border:#2B2D33 3px solid;
}
.box{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box0{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box1{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box2{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box3{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box4{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box5{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box6{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box7{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box8{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box9{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box10{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box11{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}
#box12{
	width: 10vw;
	height: 10vw;
	border: 40px solid transparent;
	padding: 0px;
	image-rendering: pixelated;
	border-image: url("images/boundBox.png") 30% round;
	background-size: cover;
	background-color: white;
	cursor: pointer;
}