@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@200;400&display=swap');

body
{
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: #111111;
	z-index: 0;
	font-family: Urbanist;
}

.pop
{
	margin: 0;
	padding: 0;
	height: 33.3333vh;
	width: 100vw;
	position: absolute;
	top: 0vh;
	left: 0;
	background-color: #FC0;
	user-select: none;
	line-height: 33.3333vh;
	font-size: 10vh;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	z-index: 1;
	transition: font-size 0.1s linear;
}

.pop:hover
{
	font-size: 13vh;
}

.rock
{
	margin: 0;
	padding: 0;
	height: 33.3333vh;
	width: 100vw;
	position: absolute;
	top: 33.3333vh;
	left: 0;
	background-color: #F39;
	user-select: none;
	line-height: 33.3333vh;
	font-size: 10vh;
	color: #FFF;
	text-align: center;	
	cursor: pointer;
	z-index: 1;
	transition: font-size 0.1s linear;
}

.rock:hover
{
	font-size: 13vh;
}

.blues
{
	margin: 0;
	padding: 0;
	height: 33.3333vh;
	width: 100vw;
	position: absolute;
	top: 66.6666vh;
	left: 0;
	background-color: #09F;
	user-select: none;
	line-height: 33.3333vh;
	font-size: 10vh;
	color: #FFF;
	text-align: center;	
	cursor: pointer;
	z-index: 1;
	transition: font-size 0.1s linear;
}

.blues:hover
{
	font-size: 13vh;
}

.back
{
	margin: 0;
	padding: 0;
	height: 6vh;
	width: 6vh;
	position: absolute;
	top: 3vh;
	left: 3vh;
	border-radius: 3vh;
	background-color: #FFF;
	user-select: none;
	line-height: 6vh;
	font-size: 4vh;
	color: #000;
	text-align: center;	
	cursor: pointer;
	z-index: 1;
	transition: transform 0.1s linear;
}

.back:hover
{
	transform: scale(1.2);	
}

.n
{
	margin: 0;
	padding: 0;
	height: 6vh;
	position: absolute;
	top: 20vh;
	user-select: none;
	line-height: 6vh;
	font-size: 5.5vh;
	font-weight: 200;
	color: #FFF;
	text-align: center;	
	z-index: 1;
	transition: font-weight 0.1s linear;
}

#n0
{
	left: calc(50vw - 10vh);
	font-weight: 1000;
}

#n1
{
	left: calc(50vw - 5vh);
}

#n2
{
	right: calc(50vw - 4vh);
	
}

#n3
{
	right: calc(50vw - 10vh);
}

.chord
{
	margin: 0;
	padding: 0;
	height: 30vh;
	width: 100vw;
	position: absolute;
	top: 36vh;
	left: 0;
	user-select: none;
	line-height: 30vh;
	font-size: 29vh;
	font-weight: 500;
	color: #FFF;
	text-align: center;	
	z-index: 1;
}

.time
{
	margin: 0;
	padding: 0;
	height: 1.5vh;
	width: 15vh;
	position: absolute;
	top: 78vh;
	left: calc(50vw - 15vh);
	background-color: #FFF;
	cursor: pointer;
	z-index: 2;
}

.timeBack
{
	margin: 0;
	padding: 0;
	height: 1.5vh;
	width: 30vh;
	position: absolute;
	top: 78vh;
	left: calc(50vw - 15vh);
	background-color: #222222;
	cursor: pointer;
	z-index: 1;
}

.min
{
	margin: 0;
	padding: 0;
	height: 2.5vh;
	position: absolute;
	top: 77.5vh;
	right: calc(50vw + 16vh);
	user-select: none;
	line-height: 2.5vh;
	font-size: 2.4vh;
	font-weight: 500;
	color: #FFF;
	text-align: center;	
	z-index: 1;
}

.max
{
	margin: 0;
	padding: 0;
	height: 2.5vh;
	position: absolute;
	top: 77.5vh;
	left: calc(50vw + 16vh);
	user-select: none;
	line-height: 2.5vh;
	font-size: 2.4vh;
	font-weight: 500;
	color: #FFF;
	text-align: center;	
	z-index: 1;
}

.current
{
	margin: 0;
	padding: 0;
	height: 2.5vh;
	width: 30vh;
	position: absolute;
	top: 81vh;
	left: calc(50vw - 15vh);
	user-select: none;
	line-height: 2.5vh;
	font-size: 2.4vh;
	font-weight: 500;
	color: #FFF;
	text-align: center;	
	z-index: 1;
}