body {
	background-color: #333333;
}

@font-face {
	font-family: 'Akzidenz-Grotesk Std';
	src: url('./fonts/Akzidenz-Grotesk') format('otf')
		url('AkzidenzGrotesk.otf') format ('opentype');
}

#title {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 900px;
	font-family: Arial;
	top: 280;
	font-size: 60pt;
	font-weight: 600;
	letter-spacing: .3pt;
}

/*------------BUTTON----------------*/

#button {
	width: 600px;
	height: 600px;
	background-color: Gold;
	position: relative;
	top: 335;
	border-radius: 50% 50%;
	margin-left: auto;
	margin-right: auto;
	z-index: 20;
    cursor: pointer;
}

.arrow-up {
	width: 0;
	height: 0;
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	border-bottom: 90px solid gray;
	top: 10;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

#one {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 150;
	border-radius: 50% 50%;
	float: left;
	left: 25;
}

#one:hover {
	background-color: Darkred;
	cursor: pointer;
}

#two {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 150;
	border-radius: 50% 50%;
	float: left;
	left: 220;
}

#two:hover {
	background-color: Gold;
	cursor: pointer;
}

#three {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 150;
	border-radius: 50% 50%;
	float: left;
	left: 410;
}

#three:hover {
	background-color: LightBlue;
	cursor: pointer;
}

#four {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 150;
	border-radius: 50% 50%;
	float: left;
	left: 600;
}

#four:hover {
	background-color: violet;
	cursor: pointer;
}

#five {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 150;
	border-radius: 50% 50%;
	float: left;
	left: 790;
}

#five:hover {
	background-color: YellowGreen;
	cursor: pointer;
}


#six {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 1200;
	border-radius: 50% 50%;
	float: left;
	left: 25;
}

#six:hover {
	background-color: ForestGreen;
	cursor: pointer;
}

#seven {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 1200;
	border-radius: 50% 50%;
	float: left;
	left: 220;
}

#seven:hover {
	background-color: DarkTurquoise;
	cursor: pointer;
}

#eight {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 1200;
	border-radius: 50% 50%;
	float: left;
	left: 410;
}

#eight:hover {
	background-color: Orange;
	cursor: pointer;
}

#nine {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 1200;
	border-radius: 50% 50%;
	float: left;
	left: 600;
}

#nine:hover {
	background-color: MediumVioletRed;
	cursor: pointer;
}

#ten {
	width: 160px;
	height: 160px;
	background-color: #5A5A5A;
	position: fixed;
	top: 1200;
	border-radius: 50% 50%;
	float: left;
	left: 790;
}

#ten:hover {
	background-color: yellow;
	cursor: pointer;
}