body {
	background-color: black;
	color:white;
	text-align: center;
	cursor: url('../images/cursor.png'), auto;

}

html {
	height: 100%;
}

.front-page h1 {
	font-variant: small-caps;
	color: white;
	opacity: 0;
	letter-spacing: 0.5rem;
	animation-name: textStretch;
	animation-duration: 7s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
}


.download-page h1 {
	font-variant: small-caps;
	color: white;
	opacity: 0;
	letter-spacing: 0.5rem;
	animation-name: textStretch;
	animation-duration: 7s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
}

h1 {
	font-variant: small-caps;
	color: white;
	letter-spacing: 1.1rem;
	margin-right: -4px;
}

h3 {
	font-variant: small-caps;
	color: white;
	letter-spacing: 1.1rem;
	margin-right: -4px;
	text-align: center;
}

h4 {
	font-variant: small-caps;
	color: white;
	letter-spacing: 1.1rem;
	margin-right: -4px;
}

@keyframes textStretch {
	0%		{opacity: 0;}
	5%		{letter-spacing: 0.5rem;}
	100%	{letter-spacing: 1.1rem; opacity: 1;}
}

@keyframes fadeIn {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

#akizoralogo {
	text-align: center;
}

#logo {
	max-width: 100%;
	max-height: 100%;
	animation-name: fadeIn;
	animation-duration: 8s;
	animation-fill-mode: forwards;
}

.links {
	font-variant: small-caps;
	color: white;
	letter-spacing: 1rem;
	text-decoration: none;
}

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

a:hover {
	text-decoration: none;
	color: white;
	cursor: url('../images/hand.png'), auto;
}

button:hover {
	text-decoration: none;
	color: grey;
	cursor: url('../images/hand.png'), auto;
}

button {
	color: white;
	font-size: 1rem;
	border-radius: 12px;
	font-variant: small-caps;
	background-color: black;
}

h2 {
	font-size: 2rem;
	opacity: 1;
	text-align:center;
	margin-right: -4px;
	transition-duration: 0.2s;
}

h2:hover {
	font-size: 2.1rem;
}

section {
  background-attachment: fixed;
}

.front-page {
	height: 900px;
	background:url('../images/background.jpg') no-repeat center center fixed;
	background-size: cover;
	background-position: center;
}


.download-page {
	height: 900px;
	background:url('../images/background.jpg') no-repeat center center fixed;
	background-size: cover;
	background-position: center;
}


.discography {
	height: auto;
	background:url('../images/background3.jpg') no-repeat center center fixed;
	background-size: cover;
	background-position: center;
}

.about {
	height: auto;	
	background:url('../images/background2.jpg') no-repeat center center fixed;
	background-size: cover;
	background-position: center;
}

footer {
	height: 100%;	
	background-color: black;
	text-align: center;
	font-size: 0.75rem;
}

.socials {
	font-size: 1.2rem;
}


::-webkit-scrollbar {
  background-color: transparent;
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  scrollbar-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #8c8b8b;
  border-radius: 9px;
}

.play-stop-container {
	position: fixed;
    top: 20px;
    left: 30px;
    z-index: 9999; /* Ensures it stays on top */
}

.play-stop-container i {
	margin-right: 20px;
}

.playIcon {
	opacity: 0;
	animation-name: fadeIn;
	animation-delay: 2s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	transition-duration: 0.2s;
}

.playIcon:hover {
	font-size: 1.2rem;
}

.stopIcon:hover {
	font-size: 1.2rem;
}

.stopIcon {
	opacity: 0;
	animation-name: fadeIn;
	animation-delay: 2.5s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	transition-duration: 0.2s;
}

.image-pop {
	transition-duration: 0.2s;
}

.image-pop:hover {
	transform: scale(1.1);
}

input[type="text"], input[type="password"] {
	background-color: black;
	color: white;
	border-radius: 12px;
	width: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
	text-align: center;
}



/** {
    outline: 1px solid red;
}*/