@font-face {
  font-family: Headings;
  src: url("../fonts/Andovine.otf");
}
@font-face {
  font-family: textBold;
  src: url("../fonts/Violina Bold.ttf");
}
@font-face {
  font-family: textRegular;
  src: url("../fonts/Violina Regular.ttf");
}

html {
	/*background-color: black;*/
}

body {
	width: 100%;
	font-family: "textRegular";
	background-image: url("../img/background.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	margin: 0;
	min-width: 320px;
}

@keyframes logoPulse {
	0% {transform: scale(1)}
	25% {transform: scale(1.03)}
	50% {transform: scale(1)}
	75% {transform: scale(0.97)}
	100% {transform: scale(1)}
}

#homeLogo {
	margin:0 auto;
	padding: 30px 0;
	width: 30%;
}

#homeLogo img {
	width: 100%;
}

#homeLogo img:hover {
	animation: logoPulse 0.2s linear infinite;
}

.content {
	width: 80%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: rgba(0,0,0,.5);
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
	border-radius: 50px;
}

@keyframes growShrink {
	0% {transform:scale(1) translateX(0) translateY(0);}
	25% {transform:scale(1.2) translateX(15px) translateY(15px);}
	50% {transform:scale(1) translateX(30px) translateY(30px);}
	75% {transform:scale(0.8) translateX(15px) translateY(15px);}
	100% {transform:scale(1) translateX(0) translateY(0);}
}
@keyframes growShrinkTwo {
	0% {transform:scale(1) translateX(0) translateY(0);}
	25% {transform:scale(1.4) translateX(30px) translateY(30px);}
	50% {transform:scale(1) translateX(60px) translateY(60px);}
	75% {transform:scale(0.6) translateX(30px) translateY(30px);}
	100% {transform:scale(1) translateX(0) translateY(0);}
}

.circle:nth-child(odd) {
	opacity: .3;
	position:fixed;
	animation: growShrink 20s infinite;
	animation-timing-function: linear;
	z-index:-100000;
}
.circle:nth-child(even) {
	opacity: .3;
	position:fixed;
	animation: growShrinkTwo 15s infinite;
	animation-timing-function: linear;
	animation-direction: reverse;
	z-index:-100000;
}
#circle1 {
	width:89px;
	height:89px;
	background-color: blue;
	border-radius: 50%;
	top:13%;
	left:48%;
	animation-delay: 0s;
}
#circle2 {
	width:71px;
	height:71px;
	background-color: purple;
	border-radius: 50%;
	top:13%;
	left:48%;
	animation-delay: -0.2s;
}
#circle3 {
	width:93px;
	height:93px;
	background-color: pink;
	border-radius: 50%;
	top:15%;
	left:73%;
	animation-delay: -0.4s;
}
#circle4 {
	width:63px;
	height:63px;
	background-color: red;
	border-radius: 50%;
	top:60%;
	left:84%;
	animation-delay: -0.6s;
}
#circle5 {
	width:55px;
	height:55px;
	background-color: orange;
	border-radius: 50%;
	top:30%;
	left:12%;
	animation-delay: -0.8s;
}
#circle6 {
	width:71px;
	height:71px;
	background-color: yellow;
	border-radius: 50%;
	top:69%;
	left:42%;
	animation-delay: -1s;
}
#circle7 {
	width:65px;
	height:65px;
	background-color: green;
	border-radius: 50%;
	top:44%;
	left:23%;
	animation-delay: -1.2s;
}
#circle8 {
	width:82px;
	height:82px;
	background-color: aqua;
	border-radius: 50%;
	top:2%;
	left:14%;
	animation-delay: -1.4s;
}
#circle9 {
	width:92px;
	height:92px;
	background-color: maroon;
	border-radius: 50%;
	top:73%;
	left:94%;
	animation-delay: -1.6s;
}
#circle10 {
	width:86px;
	height:86px;
	background-color: lime;
	border-radius: 50%;
	top:29%;
	left:40%;
	animation-delay: -1.8s;
}
#circle11 {
	width:89px;
	height:89px;
	background-color: blue;
	border-radius: 50%;
	top:22%;
	left:24%;
	animation-delay: -2s;
}
#circle12 {
	width:71px;
	height:71px;
	background-color: purple;
	border-radius: 50%;
	top:55%;
	left:36%;
	animation-delay: -2.2s;
}
#circle13 {
	width:93px;
	height:93px;
	background-color: pink;
	border-radius: 50%;
	top:73%;
	left:7%;
	animation-delay: -2.4s;
}
#circle14 {
	width:63px;
	height:63px;
	background-color: red;
	border-radius: 50%;
	top:20%;
	left:24%;
	animation-delay: -2.6s;
}
#circle15 {
	width:55px;
	height:55px;
	background-color: orange;
	border-radius: 50%;
	top:98%;
	left:37%;
	animation-delay: -2.8s;
}
#circle16 {
	width:71px;
	height:71px;
	background-color: yellow;
	border-radius: 50%;
	top:74%;
	left:70%;
	animation-delay: -3.1s;
}
#circle17 {
	width:65px;
	height:65px;
	background-color: green;
	border-radius: 50%;
	top:61%;
	left:34%;
	animation-delay: -3.3s;
}
#circle18 {
	width:82px;
	height:82px;
	background-color: aqua;
	border-radius: 50%;
	top:29%;
	left:10%;
	animation-delay: -3.5s;
}
#circle19 {
	width:92px;
	height:92px;
	background-color: maroon;
	border-radius: 50%;
	top:28%;
	left:57%;
	animation-delay: -3.7s;
}
#circle20 {
	width:86px;
	height:86px;
	background-color: lime;
	border-radius: 50%;
	top:31%;
	left:67%;
	animation-delay: -3.9s;
}

.info {
	padding: 20px;
	color: white;
}

.info h1 {
	font-family: "Headings";
	text-align: center;
	font-size: 42px;
}

.info h2 {
	font-family: "Headings";
	text-align: center;
	font-size: 38px;
}

.info h3 {
	font-family: "Headings";
	text-align: center;
	font-size: 28px;
}

#overview {
	width:80%;
	height:100%;
	margin: 0 auto;
	margin-top: 200px;
	background-color: green;
	position: relative;
	z-index: 1
}

#overview .pageBlock {
	width: 18%;
	height: 200px;
	display: block;
	float: left;
	text-align: center;
	margin: 1%;
	opacity: .8;
	transition: 0.3s;
	color: white;
	border-radius: 20px;
	mix-blend-mode: multiply;
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
}

#overview .pageBlock:hover {
	opacity: 1;
	height:400px;
	font-size: 18px;
	box-shadow: 0px 0px 100px 0px rgba(255,255,0,0.75);
	transform: scale(1.1);
}

#overview .pageBlock:active {
	transform: scale(1.05);
}

#overview .pageBlock h2 {
	mix-blend-mode:difference;
	font-family: "Headings";
}

@keyframes blockWave {
	0% {transform: scale(1)}
	40% {transform: scale(1)}
	42% {transform: scale(1.1)}
	44% {transform: scale(1)}
	46% {transform: scale(.95)}
	48% {transform: scale(1)}
	100% {transform: scale(1)}
}

#trending {
	background-image: url("../img/background2.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -2s;
}
#newReleases {
	background-image: url("../img/background3.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.95s;
}
#topRated {
	background-image: url("../img/background4.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.9s;
}
#featured {
	background-image: url("../img/background5.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.85s;
}
#tour {
	background-image: url("../img/background6.png");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.8s;
}

nav {
	width:100%;
	height:40px;
	position: sticky;
	top: 0;
	background-color:black;
	margin: 0;
	padding: 0;
	z-index: 1;
	vertical-align: middle;
}

nav .menu {
	visibility: hidden;
	color: white;
	font-size: 26px;
}

nav ul {
	width: 100%;
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

nav ul li{
	float:left;
	text-align: center;
	width: 16.66666666666666%;
	vertical-align: middle;
}

nav ul li a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 40px;
	color: white;
	font-size: 26px;
	transition: 0.3s;
	mix-blend-mode: difference;
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
}

nav ul li .active {
	background-image: url("../img/background3.jpg");
	mix-blend-mode: difference;
	box-shadow: 0px 0px 10px 0px rgba(255,255,0,0.75);
	font-family: "textBold";
}

nav ul li a:hover {
	background-image: url("../img/background3.jpg");
	height: 80px;
	mix-blend-mode: difference;
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);
	font-family: "textBold";
}

#filter {
	padding: 20px;
}

#filter form input[type="text"] {
	border-radius: 5px;
	width:100px;
	border: 0;
	height:19px;
	border: solid black 1px;
}

#filter form input[type="submit"] {
	font-size: 13px;
	background-color: white;
	border-radius: 5px;
	border: solid black 1px;
}

#search {
	padding: 20px;
	float: right;
	width:auto;
}

#search form input[type="text"] {
	border-radius: 5px;
	width:100px;
	border: 0;
	height:19px;
	border: solid black 1px;
	transition: 0.3s;
}

#search form input[type="text"]:hover {
	width:300px;
}

#search form input[type="text"]:focus {
	width:300px;
}

#search form input[type="submit"] {
	font-size: 13px;
	background-color: white;
	border-radius: 0 5px 5px 0;
	border: solid black 1px;
	margin-left:-35px;
}

#search form input[type="submit"]:hover {
	cursor: pointer;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.album {
	background-color: rgba(0,0,0,0.75);
	width: 200px;
	margin: 10px;
	text-align: center;
	color: white;
	border-radius: 10px;
	transition: .3s;
	box-shadow: 0px 0px 10px 0px rgba(200,200,200,0.75);
}

.album img {
	border-radius: 10px 10px 0 0;
	transition: .6s
}

.album .review {
	width: 200px;
	background-color: rgba(0,0,0,.0);
	position: relative;
	top:-220px;
	height: 200px;
	border-radius: 10px 10px 0 0;
	transition: 0.3s;
	margin-bottom: -220px;
}

.album .review p {
	visibility: hidden;
}

.album .review iframe {
	color: white;
	visibility: hidden;
}

.album:hover .review {
	background-color: rgba(0,0,0,.7);
}

.album:hover .review p {
	visibility: visible;
}

.album:hover .review iframe {
	visibility: visible;
}

.album:hover {
	transform: scale(1.1);
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);
}

.album:hover img {
	transform: scale(1.1);
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);
}

.album h3 {
	font-size: 28px;
	
	font-family: "textBold";
}

.album .artistName::before {
	content: "by ";
	font-style: italic;
}

.star:before {
	content: "\2605";
}

.checked {
	color: gold;
}

#footer {
	height: 100px;
	width: 100%;
}
#footer p {
	color: grey;
	text-align: center;
	margin-top: -120px;
	margin-bottom: 20px;
}

.logo {
	width: 400px;
	margin: 0 auto;
	position: relative;
	top:150px;
}

.logo img {
	width: 400px;
	padding-bottom: 50px;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

@media only screen and (max-width: 470px) {
	nav {
		height:120px;
	}
	nav ul li {
    	width:50%;
  	}
	nav ul li a:hover {
		height: 40px;
	}
	#homeLogo {
		width:80%;
	}
	#overview .pageBlock h2 {
		writing-mode: vertical-rl;
		margin-right:20px;
		padding-top:20px;
	}
}

@media only screen and (max-width: 600px) and (min-width: 470px) {
	.content {
		width:100%;
	}
	#homeLogo {
		width:80%;
	}
	#overview .pageBlock h2 {
		writing-mode: vertical-rl;
		padding:5px;
	}
	nav {
		height:80px !important;
	}
	
	nav ul {
		height:80px !important;
	}
	
	nav ul li {
    	width:33.33333333333%;
		height: 40px !important;
  	}
	nav ul li a {
		height: 40px !important;
  	}
	nav ul li a:hover {
		height: 40px !important;
	}
}

@media only screen and (max-width: 840px) and (min-width: 600px) {
	nav {
		height:80px !important;
	}
	
	nav ul {
		height:80px !important;
	}
	
	nav ul li {
    	width:33.33333333333%;
		height: 40px !important;
  	}
	nav ul li a {
		height: 40px !important;
  	}
	nav ul li a:hover {
		height: 40px !important;
	}
	#homeLogo {
		width:50%;
	}
	#overview .pageBlock h2 {
		writing-mode: vertical-rl;
		padding:5px;
	}
}

@media only screen and (max-width: 1180px) and (min-width: 840px) {
	nav {
		height:60px;
	}
	
	nav ul li {
		height:60px;
	}
	
	nav ul li a {
		height:60px;
	}
	nav ul li a:hover {
		height: 80px;
	}
}