style.scss

$orange: #ffa500;
$red: #ff0000;
$green: rgb(0, 113, 36);

body {
	background-color: #000;
	color: #fff;
	font-size: 1.5em;
}

h1,
h2,
h3,
.font {
	font-family: 'East Sea Dokdo', cursive;
	font-size: 4em;
}

a {
	color: $green;
	padding: 5px;
	background-color: #ccc;
	border: solid 2px $orange;

	&:hover {
		color: $orange;
		background-color: #333;
	}
}

iframe {
	background-color: #666;
	padding: 50px;
	margin: 30px;
	border: solid 2px $orange;
}

header {
	background-image: url('./img/shaner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: middle right;
	height: 300px;
	position: relative;
	font-family: 'East Sea Dokdo', cursive;
	
	h1 {
		text-shadow: 2px 2px 2px rgb(0, 85, 20);
		font-size: 4em;
		margin-top: 25px;
		margin-bottom: 0;
		padding: 0;

		small {
			display: block;

			@media (min-width: 576px) { 
				display: inline;
			}
		
		}
	}

	p {
		font-size: 2em;
		padding: 0;
		margin: 0;
	}

	// Small devices (landscape phones, 576px and up)
	@media (min-width: 576px) { 
		height: 350px;
	 }

	// Medium devices (tablets, 768px and up)
	@media (min-width: 768px) { 
		height: 400px;
	 }

	// Large devices (desktops, 992px and up)
	@media (min-width: 992px) { 
		height: 500px;
	 }

	// Extra large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) { 
		height: 900px;
	 }

}

.bio {
	.lead {
		margin-top: 35px;
		font-family: 'East Sea Dokdo', cursive;
		font-size: 4em;
	}

	strong {
		color: $orange;
	}

	.red {
		color: $red;
		font-weight: 900;

		strong {
			color: inherit;
		}
	}

	em {
		color: $red;
		font-weight: 900;
	}
}

.card-title {
	font-size: 2em;
}

.btn {
	&.btn-support {
		background-color: $green;

		&:hover {
			background-color: $orange;
			color: #000;
		}
	}
}

#music {

	margin-top: 50px;

	h2 {
		text-align: center;
		font-size: 5em;
	}

	#bands {
		.col {
			margin: 10px;
			padding: 20px;
		}
	}
}


.media {
	.btn {
		&:hover {
			background-color: $orange;
			color: #000;
		}
	}
}

.social {

	a {
		color: #fff;
		background-color: #000;
		text-shadow: -1px 1px 2px #fff;
		font-weight: bold;
		border: none;

		&:hover {
			color: $orange;
		}
	}
}

.playlist {
	margin-top: 65px;
	margin-bottom: 65px;
	
	h2 {
		border-top: solid 1px #ccc;
		padding-top: 30px;
	}
}

footer {
	padding: 15px 5px;
	background-color: #333;
	font-size: .75em;
	border-top: solid 1px #999;

	a {
		text-shadow: -1px 1px 2px #fff;
		font-weight: bold;

		&:hover {
			color: $orange;
		}

		i {
			margin-right: 10px;
		}
	}
}