/* background */
body {
	background-image: url("media/spacefloor.webp");
	background-repeat: no-repeat;
	background-size: 100%;	
	background-color: black;
}

/* center content */
#content {
	max-width: 800px;
	margin: auto;
}

/* images styling */
.mainalbumcover {
	width: 150px;
	height: 150px;
	border-style: ridge;
}

#headphones {
	width: 60px;
	position: absolute;
	left: 150px;
}

/* Link for all page and index */
#all-link {
	position: fixed;
	left: 100px;
	text-align: center;
	text-shadow: 2px 2px gray;
}

/* font styling */
h1, h2, h3, p, summary {
	color: white;
}

p, summary { 
	font-family: Georgia;
}

#intro h1, h2 {
	text-shadow: 2px 2px gray;
	font-family: Helvetica;
	font-weight: bold;
	text-align: center;
}

.review {
	background-color: #052638;
	border: 3px solid white;
	padding: 20px;
	text-align: center;
}

.reviewbody {
	text-align: left;
	text-indent: 2em;
}

#allreviews {
	background-color: #361B42;
	border: 3px solid white;
	padding: 20px;
	text-align: center;
}

details {
	padding: 10px;
	margin: 10px;
}
	
details summary {
	padding: 10px;
	cursor: pointer;
}

summary::marker {
  color: #e162bf;
  font-size: 2em;
}

/* footer stuff */
footer {
	text-align: center;
	background-color: #336145;
	border: 3px solid white;
	border-top: none;
	padding: 5px;
}

#by {
	text-decoration: none;
	color: white;
}

/* Luigi run */
/*animation */
@keyframes slide {
	0% { left: 99%;}
	100% {left: 0%;}
}

/*do animation */
#lu {
	animation: slide 30s infinite;
	animation-timing-function: linear;
	position: absolute;
	width: 20px;
	height: auto;
}

#pipe1 {
	width: 35px;
	height: auto;
	transform: rotate(-90deg);
	float: right;
	margin-right: -8px;
}

#pipe2 {
	width: 35px;
	height: auto;
	transform: rotate(90deg);
	float: left;
	margin-left: -10px;
}

/* Fit for smaller screens */
@media only screen and (max-width: 1250px) {
	#all-link {
	position: static;
	}
	
	#headphones {
	position: static;
	}
	
}