html, body {					background-color: #d4d5d6; color: #d4d5d6; font-family: 'Source Sans Pro', sans-serif; margin: 0;}
.start {						min-height: calc(100vh - 100px); text-align: center; position: relative;}
.start h1 {					font-family: 'Orbitron', sans-serif; margin: 0; font-size: 40px; font-weight: 100; color: #63bc46; text-transform: uppercase; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);}
::-webkit-scrollbar {			width: 1px; height: 7px;}
::-webkit-scrollbar-thumb {		background-color: #63bc46; outline: 1px solid #63bc46; border-radius: 50px;}
::-webkit-scrollbar-track {		box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);}
* {							scrollbar-width: thin; scrollbar-color: #63bc46;}
.gray {						color: #d4d5d6;}
.bg-gray {					background-color: #373636;}
.page-content {				background-color: #373636; margin: 0 auto; width: 100%; max-width: 1920px; min-height: 100vh; display: flex; justify-content: flex-start; flex-direction: column;}
header {						width: 100%; height: 100px; border-bottom: 1px solid #d4d5d6; position: fixed; background-color: #373636; z-index: 100;}
.alfa-nav {					position: relative; max-width: calc(100% - 50px); margin: 0 25px; padding: 0 10px; overflow-x: auto; overflow-y: hidden; max-height: 100px;}
.alfa-nav:before, .alfa-nav:after {content: ""; display: block; width: 10px; height: 10px; background-color: #373636; position: absolute; bottom: 0;}
.alfa-nav:before {				left: 0;}
.alfa-nav:after {				left: 100%;}
.alfa-nav__back {				display: block; width: calc(100% - 100px); height: 100px; margin: 0 auto; position: absolute; background-color: #d4d5d6;}
.progress-bar {				content: ""; display: block; width: 0px; height: 100px; margin: 0 auto; position: absolute; background-color: #63bc46; left: 0; top: 0; transition: 2.5s all ease;}
.alfa-nav__front {				content: ""; display: block; background-image: url("../images/full-mobile.png"); background-size: 52px 100px; height: 100px; margin-top: 0; position: relative;}
.alfa-nav__shape {				width: 26px; padding: 0 0px; position: relative; top: 12px; left: -12px; float: left; text-align: center;}
.alfa-nav__shape:nth-child(2n-1) {	top: 61px;}
.alfa-nav__letter {				display: block; width: 100%; cursor: pointer; position: relative; top: 0px;}
main {						margin-top: 100px; padding-left: 20px; padding-right: 20px;}
.measuring-element:before {		content: ""; display: block; margin-top: 50px; margin-bottom: 35px; width: 108px; height: 2px; background-color: #63bc46;}
.alfa-nav__letter {				text-transform: uppercase; transition: .6s all ease; -webkit-transition: .6s all ease; -moz-transition: .6s all ease; -ms-transition: .6s all ease; -o-transition: .6s all ease;}
.letter-active {				color: #63bc46;}
.letter-span {					display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; text-align: center; transition: .5s all ease; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; -ms-transition: .5s all ease; -o-transition: .5s all ease;}
.alfa-nav__letter:hover {		color: #63bc46;}
.artist {						display: flex; flex-direction: column; margin-bottom: 70px;}
.artist__year-country {			font-size: 16px; font-style: italic; font-weight: 600; color:  #fff;}
.artist__year {				margin-right: 3px;}
.artist__title-block {			display: flex; flex-wrap: wrap; justify-content: flex-start;}
.artist__name-link, .artist__song-link {text-decoration: none;}
.artist__name-link h2, .artist__song-link h2 {font-size: 21px; color: white; position: relative; text-transform: uppercase; font-weight: 500; font-style: italic; letter-spacing: .6px;}
.artist__name-link h2:after {		display: inline-block; background-color: white; width: 6px; height: 6px; border-radius: 50%; content: ""; margin-left: 15px; margin-right: 15px; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
.artist__name-link h2:before, .artist__song-link h2:before {content: ""; height: 2px; width: 0; display: block; transition: .3s all ease; -webkit-transition: .3s all ease; -moz-transition: .3s all ease; -ms-transition: .3s all ease; -o-transition: .3s all ease; background-color: #fff; position: absolute; left: 0; bottom: -3px;}
.artist__song-link h2 {			color: #d4d5d6a3;}
.artist__song-link h2:before {	background-color: #d4d5d6a3;}
.artist__name-link:hover h2:before, .artist__song-link:hover h2:before {width: calc(100% - 26px);}
.artist__song-year {			display: inline-block; font-size: 12px; position: relative; top: 5px;}
.artist__list ul {				list-style-type: none; font-size: 15px; color: #63bc46; padding-left: 0;}
.artist__list ul li {			margin-right: 20px; display: inline-block;}
.hashtaglink {					color: inherit; text-decoration: none; pointer-events: none;}
@media (min-width: 350px) { .alfa-nav {max-width: calc(100% - 100px); margin: 0 50px;}}
@media (min-width: 450px) { .alfa-nav {max-width: calc(100% - 160px); margin: 0 80px;}}
@media (min-width: 650px) {
	.start {					min-height: calc(100vh);}
	.alfa-nav:before,.alfa-nav:after {display: none;}
	.start h1 {				font-size: 48px;}
	.page-content {			flex-direction: row;}
	header {					width: 201px; height: 100vh; border-bottom: 0; position: fixed; border-right: 1px solid #d4d5d6; overflow-y: auto; overflow-x: hidden;}
	main {					margin-top: 0px; margin-left: 201px; margin-bottom: 100vh;}
	.alfa-nav {				position: relative; max-width: unset; max-height: unset; overflow: visible; margin: 0; padding: 0;}
	.alfa-nav__back {			width: 100px; height: 100%;}
	.progress-bar {			width: 100px; height: 0%;}
	.alfa-nav__back {			left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); z-index: -1;}
	.alfa-nav__front {			content: ""; display: block; height: unset; width: calc(100% - 1px); background-image: url("../images/full.png"); background-size: 100%; margin-top: 50px; position: relative;}
	.alfa-nav__shape {			height: 32.5px; float: none; width: auto; padding: 0 58px; position: relative; top: -13px; left: unset; text-align: left;}
	.alfa-nav__shape:nth-child(2n-1) {top: -13px;}
	.alfa-nav__letter {			display: block; width: 100%; cursor: pointer; position: relative;}
	.alfa-nav__shape:nth-child(2n-1) .alfa-nav__letter {text-align: right;}
	main {					background-image: url("../images/background.png"); width: 100%;}
	.artist {					padding-left: 100px;}
}
@media (min-width: 900px) {	.start h1 {font-size: 60px;}}
@media (min-width: 1000px) {	.start h1 {font-size: 80px;}}
@media (min-width: 1400px) {	.start h1 {font-size: 122px;}}
@media (min-width: 1700px) {	.start h1 {font-size: 142px;}}