:root {
	--cl-dark-grey: #2b2b2b;
	--cl-off-white: #fefefe;

	--br: 4px;

	--social-icon-size: 30px;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	background: linear-gradient(to bottom right, rgb(94, 126, 253), rgb(0, 0, 0, 0));
}
header {
	background-color: var(--cl-dark-grey);
	background: url(/images/backgrounds/keyboard.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 300px;
}
header div#headerContent {
	display: flex;
	flex-direction: row;
	gap: 18px;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 48px 2% 48px 2%;
	background: linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0));
}
header h1#titleLogo {
	display: block;
	font-family: "Whisper", cursive;
	font-size: 60px;
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--cl-off-white);
	padding: 12px;
}
header h1#mobileTitleLogo {
	display: none;
}
div#hamburgerMenu {
	margin-right: 12px;
}
div#hamburgerMenu:hover {
	cursor: pointer;
}
div#hamburgerMenu div{
	display: none;
	width: 30px;
	height: 4px;
	margin: 6px 0;
	background-color: var(--cl-off-white);
}
div#mobileNav {
	display: none;
	position: absolute;
	top: 2;
	text-align: center;
	font-size: 18px;
	width: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));
	padding: 18px;
	border-radius: 0 0 var(--br) var(--br);
	box-shadow: 0 10px 10px var(--cl-dark-grey);
}
div#mobileNav li {
		display: block;
		padding: 12px;
	}
div#mobileNav li a {
	color: var(--cl-off-white);
	text-decoration: none;
}
header nav ul li {
	display: inline-block;
}
header nav ul li a {
	display: block;
	text-decoration: none;
	font-size: 18px;
	color: var(--cl-off-white);
	padding: 12px;
}
header nav ul li a:hover {
	border-bottom: 1px solid var(--cl-off-white);
}
a.active {
	border-bottom: 1px solid var(--cl-off-white);
}
div#headerDivider {
	height: 24px;
	background: linear-gradient(to bottom, var(--cl-dark-grey), rgba(255, 255, 255, 0));
}
div#wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	padding: 32px 2% 32px 2%;
}
div#featuredVideo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
div#featuredVideo h1 {
	display: block;
	font-size: 36px;
	font-weight: 300;
	margin: 18px 0;
}
div#featuredVideo h2 {
	font-weight: 200;
	margin-bottom: 18px;
}
div#featuredVideo iframe {
	max-width: 560px;
	max-height: 315px;
	aspect-ratio: 16/9;
	border-radius: var(--br);
}
div#outNow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
div#outNowBanner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 32px;
	margin-top: -24px;
}
div#outNow h1 {
	display: block;
	text-align: center;
	font-size: 36px;
	font-weight: 300;
}
div#outNow h2 {
	font-weight: 200;
}
div#outNow h3 {
	display: block;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--cl-off-white);
	background-color: rgb(216, 115, 181);
	padding: 14px;
	border-radius: var(--br);
	box-shadow: 2px 2px 10px var(--cl-dark-grey);
	transition: 0.1s;
}
div#outNow h3:hover {
	cursor: pointer;
	box-shadow: 2px 2px 13px var(--cl-dark-grey);
	transition: 0.1s;
}
div#outNow img {
	display: block;
	width: 400px;
	border-radius: var(--br);
	box-shadow: 10px 10px 10px var(--cl-dark-grey);
}
div#outNow img:hover {
	cursor: pointer;
}
div.sender-form-field {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	/* background: linear-gradient(to top right, rgba(163, 102, 255, 0.5), rgba(0, 0, 0, 0)); */
	/* border: 1px solid black; */
}
div.home-block {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0));
	padding: 32px 2%;
	border-radius: var(--br);
}
h1#music-header {
	display: block;
	text-align: center;
	font-size: 36px;
	font-weight: 300;
}
div#album-grid {
	margin-top: 18px;
	text-align: center;
}
div#album-grid img {
	display: inline-block;
	width: 400px;
	margin: 18px;
	border-radius: var(--br);
	box-shadow: 2px 2px 10px var(--cl-dark-grey);
	transition: 0.1s;
}
div#album-grid img:hover {
	cursor: pointer;
	box-shadow: 2px 2px 15px var(--cl-dark-grey);
	transition: 0.1s;
}
div#socialMedia {
	grid-area: 4 / 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 500px;
	margin: 0 auto;
	padding: 18px;
	border-top: 1px solid var(--cl-dark-grey);
}
div#socialMedia h1{
	font-size: 22px;
	font-weight: 400;
	margin-bottom: 18px;
}
div#socialMedia ul li{
	display: inline-block;
	padding: 12px;
}
div#socialMedia ul li a {
	display: block;
	width: var(--social-icon-size);
	height: var(--social-icon-size);
}
#instagram {
    background: transparent url(/images/icons/instagram-color-SVG.svg) no-repeat;
    background-size: var(--social-icon-size);
}
#youtube {
    background: transparent url(/images/icons/youtube-color-512.png) no-repeat;
    background-size:var(--social-icon-size);
}
#youtubeMusic {
    background: transparent url(/images/icons/youtube_music-color-512.png) no-repeat;
    background-size: var(--social-icon-size);
}
#bandcamp {
    background: transparent url(/images/icons/bandcamp-color-512.png) no-repeat;
    background-size: var(--social-icon-size);
}
#spotify {
    background: transparent url(/images/icons/spotify-color-512.png) no-repeat;
    background-size: var(--social-icon-size);
}
#appleMusic {
    background: transparent url(/images/icons/apple_music-color-512.png) no-repeat;
    background-size: var(--social-icon-size);
}
#amazonMusic {
    background: transparent url(/images/icons/amazon-music-color-512.png) no-repeat;
    background-size: var(--social-icon-size);
}
footer {
	text-align: center;
	justify-items: center;
	color: var(--cl-dark-grey);
	padding: 24px;
}
footer p {
	display: block;
	font-size: 16px;
	padding: 12px 0;
	margin: -32px  0 48px 0;
}
footer p span {
	font-family: "Whisper", cursive;
	font-size: 24px;
	margin-right: 4px;
}

@media screen and (max-width: 1600px) {
	div#wrapper {
		grid-template-columns: 1fr;
		margin: 0px 2%;
		border-radius: var(--br);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0));
	}
	div#wrapper div#outNow {
		grid-area: 1;
	}
	div#socialMedia {
		grid-area: 4 / 1;
	}
	div.home-block {
		background: none;
	}
	footer {
		margin-top: -48px;
	}
}

@media screen and (max-width: 1200px) {
	header {
		padding-bottom: 18px;
	}
	nav {
		display: none;
	}
	div#hamburgerMenu div{
		display: block;
	}
}

@media screen and (max-width: 600px) {
	header {
		padding-bottom: 0px;
	}
	div#headerContent {
		display: grid;
		grid-template-columns: 4fr 1fr;
	}
	header h1#titleLogo {
		display: none;
	}
	header h1#mobileTitleLogo {
		display: block;
		text-align: center;
		font-family: "Whisper", cursive;
		font-size: 52px;
		font-weight: 100;
		letter-spacing: 1px;
		color: var(--cl-off-white);
		padding: 12px;
	}
	nav {
		display: none;
	}
	div#outNow h1 {
		font-size: 32px;
	}
	div#outNow img {
		width: 100%;
	}
	div.home-block {
		padding: 18px 2%;
	}
	h1#music-header {
		margin: 0;
	}
	div#album-grid img {
		margin: 18px auto;
		width: 300px;
	}
	div#socialMedia ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 12px;
	}
}