@charset "utf-8";
/* CSS Document */

/* We use one stylesheet as we can change different aspects across the site at once and change specific things using classes, tags and other selectors. For example to have 2 different anchors be a filled button and outlined button by giving each the class="filledbutton" and class="outlinedbutton"  */

*{
	margin: 0px; 
	padding:0px;
	box-sizing: border-box;
}

body{
	background:#AAAAAA;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

header{
	text-align: center;
	background: url("Images/channels4_banner.jpg") no-repeat center center;
	background-size: cover;
	padding:60px;
}

h1{
	color: #720A0C;
}

nav{
	text-align: center;
	font-size: 25px;
	background: #464646;
	color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav a.navbar{
	margin: 20px;
	text-decoration: none;
	color: white;
}

a.navbar:hover {
transition: 0.75s;
	color:#720A0C;
}

h2{
	text-align:center;
	font-size: 45px;
	color: #720A0C;
	margin-top: 15px;
}

div.container{
	width: 1300px; 
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	column-gap: 5%;
	
}

div.card{
	background: #000;
	text-align: center;
	flex: 0 0 21.25%;
	margin-bottom: 3%;
	margin-top: 2%;
	font-size: 20px;
	color: #720A0C;
}

img{
	width:100%;	
}

p.albumname{
	margin-top: 15px;
	margin-bottom: 15px;
	font-size:23px;
}

a.albumname{
	text-decoration: none;
	color: #720A0C;
}

a.albumname:hover{
color:white;
	transition: 0.75s;
}

h3{
	text-align: center;
	color: #720A0C;
	font-size: 45px;
}

main.container{
	width:1200px;
	margin: 0 auto;
}

p.description{
	text-align: center;
	font-size: 25px;
	margin-top: 3px;
	margin-bottom: 40px;
}

a.button{
	padding-top: 13px;
	padding-bottom:13px;
	padding-left: 13px;
	padding-right: 13px;
	background:#000000;
	align :center;
	margin-left: 497px;
	font-size: 25px;
	text-decoration: none;
	color: white;
	border-radius: 25px;
}

a.button:hover{
	transition: 0.75s;
	color:#720A0C;
	background: #FFFFFF;
}

footer{
	padding:20px;
	background: #000000;
	color: #FFFFFF;
	margin-top:30px;
	font-size: 21px;
}
a.college{
	text-decoration: none;
		color: #FFFFFF;
}

div.containertwo {
	margin-left: 20px;
	display: flex;
	flex-wrap: wrap;
	column-gap: 88%;
}

img.albumcovers{
	width: 30%;
	margin: auto;
	display:block;
	margin-top: 10px;
	margin-bottom: 15px;
}

h4{
	text-align:center;
	font-size: 45px;
	color: #720A0C;
	margin-top: 15px;
}

div.review{
	background: #000;
	text-align: center;
	flex: 0 0 30%;
	margin-bottom: 3%;
	margin-top: 2%;
	font-size: 20px;
	color: #FFFFFF;
	border-radius:20px;
}

main.containerthree{
	width:300px;
	margin: auto;
	background: #000000;
	padding: 32px;
	border-radius:21px;
	font-size: 20px;
	margin-top:20px;
	margin-bottom:20px;
}

a.songlinks{
	text-decoration: none;
	color: white;
}

a.songlinks:hover{
	color:#720A0C;
}

ol{
	color: white;
}

li.uppercase{
	text-transform: uppercase;
}

li.lowercase{
	text-transform: lowercase;
}

div.albumdescription{
	width: 1350px;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	margin-bottom:10px;
}

h5{
	text-align:center;
	font-size: 45px;
	color: #720A0C;
	margin-top: 15px;
}

div.disclaimer{
	width: 1350px;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	margin-bottom:19px;
}

h2.disclaimer{
	text-align:center;
	font-size: 45px;
	color: #720A0C;
	margin-top: 15px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

li a:hover{
	transition: 0.75s;
}

footer a:hover{
	transition: 0.75s;
	color :#720A0C;
}

summary{
	transition: 1.00s;
}

p.albumdescription{
	width: 1100px;
	margin: auto;
}

span{
	text-transform: uppercase;
}