/*
HEADER
*/

/* This blurs the top of the nav bar so it is more blended */
nav
{
	box-shadow: 0px -3px 2px 2px #373636;
}

/* This sets the colour of the dropdown navbar */
nav, .dropdown-menu
{
	background-color: #373636;
}

/* This sets the colour of the text in the dropdown */
nav .dropdown-item
{
	color: rgba(255, 255, 255, 0.5);
}

/* This sets the colour when a dropdown item is hovered over */
nav .dropdown-item:hover
{
	background-color: #474646;
	color: rgba(255, 255, 255, 0.5);
}

/* This is the colour and font size of the cart number */
nav i, #cart-num
{
	color: #ffffff;
	font-size: 20px;
}

/* This is the padding for the cart number */
#cart-num
{
	padding: 0px 10px 0px 3px;
}

/*
BODY
*/

/* This sets the colour and margin for the title */
#title
{
	color: #ffffff;
	margin: 5px;
}

/* This sets the colour of the links */
a
{
	color: #ffffff;
}

/* This sets the max width of the instagram container and also aligns it center */
#instagram-post-container
{
	max-width: 1000px;
	text-align: center;
}

/* This makes sure the instagram images look good */
#insta-image
{
	object-fit: cover;
  	width: 250px;
	height: 250px;
	margin: 10px;
}

/* This sets the overall background colour for the body */
#about-main
{
	max-width: 1280px;
	padding: 15px;
}

#player-card
{
	background-color: #474646;
	max-width: 350px;
	margin: 15px;
	color: #ffffff;
}

#number
{
	color: #0082ca;
}

i
{
	margin-top: 5px;
}

#info 
{
	margin: 0px;
}

#info-div
{
	width: 100px;
}

body
{
	background-color: #373636;
	background-color: #FFFFFF;
}

/* This sets the bottom margin for the merch cards */
#merch-card
{
	margin-bottom: 15px;
}

/* This sets the padding for the body of the merch cards */
#merch-card .card-body
{
	padding: 5px;
}

/* This sets the padding for the merch price */
#merch-price
{
	padding-right: 3px;
}

/* This sets the colour of the text */
#main
{
	color: #0082ca;
	background-image: url('resources/images/background.jpg');
}

/* This makes the youtube container responsive */
.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
margin-left:100px;
margin-right:100px;
height:0;
overflow:hidden;
}

/* This also makes the youtube container responsive */
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/*
FOOTER
*/

/* This sets the background colour of the footer */
footer
{
	background-color: #373636;
}

/* This makes the footer responsive */
.responsive {
  width: 100%;
  height: auto;
}