@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html {
	font-family: Raleway, sans-serif;
	background-color: #000;
	color: #fff;
}

header {
	min-height: 5rem;

	h1 {
		font-size: 32px;
		font-weight: 100;
		padding: 5px;
		position: relative;
		top: 0.5em;

		a {
			color: #fff;
			text-decoration: none;

			span {
				font-weight: 900;
				position: relative;
				top: -0.5em;
			}
		}
	}

	nav {
		text-align: right;
		padding: 5px;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		a {
			display: inline-block;
			padding: 0.5em;
			color: #fff;
			font-weight: bold;
			text-decoration: none;

			&:hover {
				text-decoration: 4px underline;
			}
		}
	}
}

div#showcase {
	background-image: url(xie-lipton-SjrgIBKSLW0-unsplash.jpg);
	background-position: center;
	background-size: cover;
	height: 28em;
	border-radius: 2rem;
}

div#call-to-action {
	padding: 1em;

	h2 {
		text-transform: uppercase;
		font-size: 3em;
		letter-spacing: -0.05em;
	}

	a {
		background-color: indigo;
		color: #fff;
		text-decoration: none;
		padding: 1em;
		font-weight: 600;
		float: right;
		border-radius: 5px;

		&:hover {
			color: indigo;
			background-color: white;
		}

		&::after {
			content: ' ⮞';
		}
	}
}

div#categories {
	div {
		a {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 20rem;
			margin: 1rem auto;
			width: 100%;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;

			&[href*='guitars'] { background-image: url('guitars.svg'); }
			&[href*='basses'] { background-image: url('basses.svg'); }
			&[href*='amps'] { background-image: url('amps.svg'); }

			padding: 0.5em;
			color: #fff;
			font-weight: bold;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 0.5em;
			text-indent: 0.5em;
			border-radius: 10px;

			&:hover {
				background-color: indigo;
			}
		}
	}
}

footer {
	border-top: 5px solid indigo;
	padding-top: 2em;

	address {
		margin: 1em;
		text-align: right;
		font-size: 0.8em;
		font-style: normal;
		line-height: 1.8em;

		a {
			color: #fff;
			text-decoration: none;
		}
	}

	ul#social-media-links {
		margin: 0;
		padding: 0;

		li {
			display: block;

			a {
				display: flex;
				align-items: center;
				color: #fff;
				text-decoration: none;
				background-size: 32px;
				background-position: 8px center;
				background-repeat: no-repeat;
				height: 48px;
				margin: 0.5em;
				border-radius: 5px;
				padding-left: 48px;

				&:hover {
					background-color: indigo;
					mix-blend-mode: invert;
				}

				&[href*="facebook"] {
					background-image: url('social-media/facebook-square-white.svg');
				}

				&[href*="youtube"] {
					background-image: url('social-media/youtube-square-white.svg');
				}

				&[href*="bluesky"] {
					background-image: url('social-media/bluesky-square-white.svg');
				}

				&[href*="instagram"] {
					background-image: url('social-media/instagram-square-white.svg');
				}

				&[href*="twitch"] {
					background-image: url('social-media/twitch-square-white.svg');
				}
			}
		}
	}
}

form {
	[class*="col-"] {
		padding: 5px;
	}
	input[type=text], input[type=email], input[type=phone], select {
		width: 100%;
		padding: 4px;
	}
	input[type=submit] {
		margin-top: 1rem;
		background-color: indigo;
		color: white;
		border-radius: 5px;
		padding: 5px 15px;
		border: 1px solid white;
		&[value*="Next"] {
			float: right;
		}
	}

	label {
		display: block;
		margin-bottom: 5px;
		&::after {
			content: ':';
		}
	}
	padding-bottom: 5rem;
}

.right {
	text-align: right;
}

.grand-total {
	font-weight: bold;
}
form#checkout-form {
	h3 {
		margin-top: 2rem;
	}
}

hr[class*="col-"] {
	height: 0;
	padding: 0;
	border-width: 1px 0 0 0;
	margin-top: 5px;
	margin-bottom: 5px;
}