body{
	background-color: #0d0d26;
	font-size: 10px;
}

@font-face{
	font-family: 'steagisler';	
	src: url('fonts/Steagisler.otf');
}

h1, p{
	margin: 0
}

a {
	text-decoration: none;
}

#content-flex{
	display: flex;
	flex-direction: column;
}

#content{
	flex: 1 0 auto;
}

#footer{
	flex-shrink: 0;
}


/**
---------------------------------Navigation Bar---------------------------------
**/

/** dummy comment to test commit problems affecting wayward **/

#navbarContainer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;	
	text-align: center;
	background-color: #2c2c2c;
	height: 45px;
	overflow: hidden;
	border-style: solid;
	border-color: #4a4a4a;
	border-radius: 5px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 420px) {
	#navbarContainer{
		display: none;
	}
}

#navCol-1{
	display: flex;
	justify-content: center;
    flex-direction: row;

}

#navHome{
	margin-left: 15px;
	line-height: 45px;
	padding-right: 15px;
	border-right-style: solid;
	border-right-color: #222222;
	border-right-width: 2px; 
}

#navHomeText{
	font-family: 'Bungee';
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	font-size: 20px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
	background-color: #4a4a4a;
}

a #navHomeText{
	color: #FFFFFF;
}

#navHomeText:hover{
	color:red;
	border-color: red;
}

#navBites{
	
	line-height: 45px;
	padding-right: 15px;
	padding-left: 15px;
	border-right-style: solid;
	border-right-color: #222222;
	border-right-width: 2px; 
}

#navBitesText{
	font-family: 'Bungee';
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	font-size: 15px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
	background-color: #4a4a4a;
}

a #navBitesText{
	color: #FFFFFF;
}

#navBitesText:hover{
	color:green;
	border-color: green;
}

#navMeals{
	line-height: 45px;
	padding-right: 15px;
	padding-left: 15px;
	border-right-style: solid;
	border-right-color: #222222;
	border-right-width: 2px;
}

#navMealsText{
	font-family: 'Bungee';
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	font-size: 15px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
	background-color: #4a4a4a;
}

a #navMealsText{
	color: #FFFFFF;
}

#navMealsText:hover{
	color:blue;
	border-color: blue;
}

#navAbout{
	
	line-height: 45px;
	padding-left: 15px;
	padding-right: 15px;
	border-right-style: solid;
	border-right-color: #222222; 
	border-right-width: 2px;
}

#navAboutText{
	font-family: 'Bungee';
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	font-size: 15px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
	background-color: #4a4a4a;
}

a #navAboutText{
	color: #FFFFFF;
}

#navAboutText:hover{
	color:#0099ff;
	border-color: #0099ff;
}

#navTagline{
	width: 55%;
	text-align: center;
}

#navTaglineText{
	font-family: 'Bungee';
	color: #FFFFFF;
	font-size: 0.8vw;
}


#navSearchOK{
	margin-left: 15px;
	line-height: 45px;
	padding-left: 15px;
	border-left-style: solid;
	border-left-color: #222222;
	border-left-width: 2px;
    margin-right: 15px; 
}

#navOKtext{
	font-family: 'Bungee';
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	font-size: 15px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
	background-color: #4a4a4a;
}

#navOKtext:hover{
	border-color: #0099ff;
}

a #navOKtext{
	color: white;
}

a #navOKtext:hover{
	color: #0099ff;
}

#navSearch{
	height: 20px;
	line-height: 20px;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	width: 50%;
	display: inline-block;
	min-width: 0;
}

/**
---------------------------------Jumbotron Banner---------------------------------
**/

#jumboContainer {
	width: 67%;
	background-color: black;
	margin: auto;
	border-style: solid;
	border-width: 5px;
	border-radius: 15px;
	border-color: #4a4a4a;
	overflow: hidden;
}

#mob_logo {
	display: none;
}

@media only screen and (max-width: 420px) {
	#jumboContainer{
		display: none;
	}

	#mob_logo{
		display: block;
		font-size: 10vw;
		background-color: #4a4a4a;
		width: 85%;
		font-family: 'Bungee';
		color: #FFFFFF;
		text-align: center;
		border-style: solid;
		border-color: #FFFFFF;
		border-width: 5px;
		border-radius: 5%;
		padding: 3vw;
		margin: 0 auto;
		margin-top: 15px;
		margin-bottom: 20px;
		background-image: url("https://i.imgur.com/EiviJbb.gif");
		background-repeat: no-repeat;
		background-position: center;
	}
	
	a #mob_logo{
		color: #FFFFFF;
	}
}

#jumbotron{
	background-image: url("https://i.imgur.com/LNgbZ5Y.gif");
	background-repeat: no-repeat;
	background-position: center;
	height: 15vw;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}

#jumbotext{
	font-family: 'Bungee';
	color: #FFFFFF;
	text-align: center;
	border-style: solid;
	border-color: #FFFFFF;
	border-width: 10px;
	border-radius: 10px;
	padding-left: 3%;
	padding-right: 3%;
	width: 37vw;
	font-size: 1.3vw;

}

a #jumbotext{
	color: #FFFFFF;
}

#jumbotext:hover{
	color:red;
	border-color: red;
}


/**
---------------------------------Catergory Selectors---------------------------------
**/

#categoryBar{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	margin-top: 35px;
}

@media only screen and (max-width: 420px) {
	#categoryBar{
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		margin-top: 35px;
	}


}

.catBarButton{
	box-sizing: border-box;
	width: 20%;
	padding: 1%;
}

#biteText{
	font-family: 'Bungee';
	font-size: 0.8vw;
	border-style: solid;
	border-width: 0.4vw;
	border-color: #FFFFFF;
	border-radius: 5%;
	background-color: #666666;
	padding: 1%;
}

a #biteText{
	color: #FFFFFF;
}

#biteText:hover{
	color: limegreen;
	border-color: limegreen;
}

#mealText{
	font-family: 'Bungee';
	font-size: 0.8vw;
	border-style: solid;
	border-width: 0.4vw;
	border-color: #FFFFFF;
	border-radius: 5%;
	background-color: #666666;
	padding: 1%;
}

a #mealText{
	color: #FFFFFF;
}

#mealText:hover{
	color: dodgerblue;
	border-color: dodgerblue;
}

h1 #biteText{
	margin: 0;
}

@media only screen and (max-width: 420px) {
	.catBarButton{
		margin: 5vw 0;
		width: 80%;
	}


	#biteText, #mealText{
		font-family: 'Bungee';
		font-size: 3.5vw;
		border-style: solid;
		border-width: 5px;
		border-color: #FFFFFF;
		border-radius: 5%;
		background-color: #666666;
	}

}

/**
---------------------------------Post Previews---------------------------------
**/

#recent{
	width:60%;
	color: #FFFFFF;
	margin: auto;
	font-family: 'Bungee';
	font-size: 1.1vw;
	margin-bottom: 0.5%;
	margin-top: 2.5%;
	text-align: center;
}

@media only screen and (max-width: 420px) {

	#recent{
		text-align: center;
		font-size: 9px;
	}
}

#recentContainer{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 70%;
	margin: 0 auto;
}

@media only screen and (max-width: 420px) {
	
	#recentContainer{
		width: 100%;
	}
}

.previewLink {
	box-sizing: border-box; 
	width: 50%;
	text-align: center;
	padding: 1%;
}

#preview{
	border-style: solid;
	border-width: 5px;
	border-radius: 15px;
	border-color: #4a4a4a;
	padding: 1.5%;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: #808080;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;	
	text-align: center;

}

@media only screen and (max-width: 420px) {
	#preview{
		border-style: solid;
		border-width: 5px;
		border-radius: 15px;
		border-color: #4a4a4a;
		padding: 20px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 30px;
		background-color: #808080;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;	
		text-align: center;
	}

	.previewLink {
		width: 85%;
		text-align: center;
		margin: 0 auto;
		margin-top: 5%;
	}
}

#preview:hover{
	border-color: #FFFFFF;
}

#poster{
	height: 200px;
	border-style: solid;
	border-color: #4a4a4a;
}	

#movieTitle{
	font-family: 'Candal';
	text-transform: uppercase;
	font-size: 0.8vw;
	color: #333333;
	padding: 1%;
}

@media only screen and (max-width: 420px) {
	#movieTitle{
		font-family: 'Candal';
		text-transform: uppercase;
		font-size: 10px;
		color: #333333;
		width: 75%;
	}
}

#rating{
	font-family: 'Bungee';
	text-align: center;
	font-size: 1.4vw;
	padding: 2%;
	border-style: solid;
	border-radius: 5px;
}

@media only screen and (max-width: 420px) {
	#rating{
		font-size: 5vw;
		margin-top: 5%;
	}
}

.reviewText{
	display: none;
	border-radius: 15px;
	width: 75%;
	font-size: 1.5vw;
	margin: auto;
	margin-top: 30px;
	padding-left: 15%;
	padding-right: 15%;
	background-color: #4a4a4a;
	font-family: helvetica;
	font-weight: 550;
	text-align: left;
	text-indent: 1.75em;
	color: #FFFFFF;
}

[light~=gold]{
	background: radial-gradient(ellipse farthest-corner at right bottom,
	 #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
     radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%,
      #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    border-color: #664b00;
    color: #332500;
}

[light~=green]{
	background-color: #009933;
	border-color: #004d1a;
	color: #004d1a;
}

[light~=yellow]{
	background-color: #ffcc00;
	border-color: #997a00;
	color: #997a00;
}

[light~=red]{
	background-color: #ae0000;
	border-color: #660000;
	color: #660000;
}

#previewDate{               
	text-align: left;
	font-family: 'helvetica';
	text-transform: uppercase;
	font-size: 18px;
	color: #FFFFFF;
	margin-bottom: -15px;
	padding-left: 15px;
}

#BSRblock{
	font-family: 'Bungee';
	font-size: 40px;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 10px;
	border-width: 5px;
	padding: 0 15px;
	background-color: #444444;
}

a #BSRblock{
	color: #FFFFFF;
}

#articleTitle{
	font-family: 'Candal';
	text-transform: uppercase;
	font-size: 1.7vw;
	padding: 0 15px;
}

@media only screen and (max-width: 420px) {
	#articleTitle{
		font-size: 15px;
		padding: 0px;
		margin-top: 15px;
	}
}



a #articleTitle{
	color: #333333;	
}

#mealBlock{
	font-family: 'Bungee';
	font-size: 20px;
	border-style: solid;
	border-color: #003380;
	border-radius: 10px;
	border-width: 5px;
	background-color: #1a75ff;
	padding: 0 15px;
}

a #mealBlock{
	color: #003380;
}

/**
---------------------------------Post Pages---------------------------------
**/

#post-container{
	width: 70%;
	background-color: #4a4a4a;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	margin: auto;
	display: flex;
	flex-direction: row;
	
}

@media only screen and (max-width: 420px) {
	#post-container{
		width: 96%;
		flex-direction: column;
	}
}

#post-poster{
	width: 30vw;
	align-self: center;
	background-color: #333333;
}

@media only screen and (max-width: 420px) {
	#post-poster{
		width: 100%;
	}
}

#post-dataBar{

}

#post-titleBar{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;	
	text-align: center;
	background-color: #333333;
	padding: 15px;
}

#post-titleText{
	font-family: 'candal';
	text-transform: uppercase;
	font-size: 1.7vw;
	color: #FFFFFF;
}

#post-date{
	font-family: 'helvetica';
	text-transform: uppercase;
	font-size: 0.8vw;
	color: #FFFFFF;
	margin-left: 15px;
}

@media only screen and (max-width: 420px) {
	#post-titleText{
		font-size: 15px;
	}

	#post-date{
		font-size: 10px;
	}
}

#post-reviewBar{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;	
	text-align: center;
	margin-left: 15px;
}

#post-ratingText{
	font-family: 'Bungee';
	color: #FFFFFF;
	font-size: 1.1vw;
}

#post-ratingValue{
	font-family: 'Bungee';
	font-size: 1.2vw;
	border-style: solid;
	border-radius: 5px;
	height: 1.25vw;
	line-height: 1.25vw;
	padding: 5px;
	margin-left: 5px;
}

@media only screen and (max-width: 420px) {
	
	#post-reviewBar{
		margin: 0 auto;
		justify-content: center;
	}

	#post-ratingText{
		font-size: 12px;
	}

	#post-ratingValue{
		font-size: 15px;
		padding: 10px;
	}
}

[postLight~=gold]{
	background: radial-gradient(ellipse farthest-corner at right bottom,
	 #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
     radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%,
      #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    border-color: #664b00;
    color: #332500;
}

[postLight~=green]{
	background-color: #009933;
	border-color: #004d1a;
	color: #004d1a;
}

[postLight~=yellow]{
	background-color: #ffcc00;
	border-color: #997a00;
	color: #997a00;
}

[postLight~=red]{
	background-color: #ae0000;
	border-color: #660000;
	color: #660000;
}

#post-bodyText{
	text-indent: 1.75em;
	font-family: 'helvetica';
	font-size: 1.1vw;
	color: #FFFFFF;
	padding: 15px;
}

@media only screen and (max-width: 420px) {
	#post-bodyText{
		font-size: 15px;
	}
}

#meal-container{
	width: 60%;
	background-color: #4a4a4a;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	margin: 0 auto;
}

#meal-titleBar{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;	
	text-align: center;
	background-color: #333333;
	padding: 15px;
}

#meal-title{	
	font-family: 'candal';
	text-transform: uppercase;
	font-size: 1.7vw;
	color: #FFFFFF;
}

#meal-date{
	font-family: 'helvetica';
	text-transform: uppercase;
	font-size: 0.8vw;
	color: #FFFFFF;
	margin: 15px;
}

#meal-mainImage{
	height: 17vw;
	display: block;
	margin: 0 auto;
	padding-top: 40px;
}

#meal-body{
	font-family: 'helvetica';
	font-size: 1.1vw;
	color: #FFFFFF;
	padding: 30px;
	width: 70%;
	margin: 0 auto;
}

@media only screen and (max-width: 420px) {
	#meal-container{
		width: 96%;
	}

	#meal-body{
		font-size: 15px;
	}

	#meal-date{
		font-size: 10px;
	}

	#meal-titleBar{
		flex-direction: column;
	}

	#meal-title{
		font-size: 15px;
	}

	#meal-mainImage{
		height: 140px;
	}
}

/**
---------------------------------Post Collections---------------------------------
**/

#collect-titleBar{
	text-align: center;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 10px;
	border-width: 8px;
	margin: 0 auto;
	width: 40%;
	padding: 15px;
	background-color: #333333;

}


#collect-titleText{
	font-family: 'Bungee';
	font-size: 3.5vw;
	color: #FFFFFF;
}

#collect-tagline{
	font-family: 'Bungee';
	font-size: 1.5vw;
	color: #FFFFFF;
}

@media only screen and (max-width: 420px) {
	#collect-titleBar{
		width: 75%;
		border-width: 5px;
	}

	#collect-titleText{
		font-size: 22px;
	}

	#collect-tagline{
		font-size: 10px;
	}
}
/**
---------------------------------About Page---------------------------------
**/

#about-title{
	text-align: center;
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 10px;
	border-width: 8px;
	margin: 0 auto;
	width: 40%;
	padding: 15px;
	background-color: #333333;
}

#about-titleText{
	font-family: 'Bungee';
	font-size: 3.5vw;
	color: #FFFFFF;
}

#about-tagline{
	font-family: 'Bungee';
	font-size: 1.5vw;
	color: #FFFFFF;	
}

#about-content{
	width: 60%;
	margin: 0 auto;
	background-color: #4a4a4a;
	color: #FFFFFF;
	font-family: 'helvetica';
	font-size: 20px;
	padding: 40px;
	border-radius: 10px;
	border-style: solid;
	border-color: #222222;
	border-width: 5px;
	margin-top: 30px;
}

#about-pretext{
	color: #3385ff;
	font-weight: bold;
}

#about-posttext{
	font-size: 15px;
}

/**
---------------------------------Post Search---------------------------------
**/

.previewLink-search {
	display: none;
	width: 65%;
	text-align: center;
	margin: 0 auto;
	margin-top: 60px;
}

#collect-search {
	display: flex;
	flex-direction: row;
	width: 40%;
	text-align: center;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
	background-color: #666666;
	border-width: 0;
	border-radius: 5px;
	padding: 15px;

}

#collect-searchbar {
	width: 60%;
	font-size: 16px;
	border-radius: 5px;
}

#collect-searchOK {
	font-family: 'Bungee';
	border-style: solid;
	border-color: #FFFFFF;
	border-radius: 5px;
	font-size: 20px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0 15px;
	background-color: #4a4a4a;
	color: #FFFFFF;
	cursor: pointer;
	margin-left: 10px;
}


#collect-searchOK:hover {
	color: #0099ff;
	border-color: #0099ff;
}

/**
---------------------------------Site Footer---------------------------------
**/

#footer-container{
	margin-top: 50px;
  	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	padding: .1%;
	border-radius: 5px;
}

#footer-home{
	width: 3.5vw;
}

.footer-btn{
	font-family: helvetica;
	font-size: .7vw;
	text-transform: uppercase;
	border-width: 0px;
	border-radius: 5px;
	padding: 1vw;
}

.footer-btn span{
	padding: 5px;
}

.footer-btn-main{
	font-family: steagisler;
	font-size: 1vw;
	text-transform: uppercase;
	border-width: 0px;
	border-radius: 5px;
	padding: 1vw;
}

.footer-btn-main span{
	padding: 5px;
}

#mobile-footer{
	display: none;
}

@media only screen and (max-width: 420px){

	#footer-container{
		display: none;
	}
	
	#mobile-footer{
		display: flex;
		flex-direction: column;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		margin-top: 7vw;
	}
}

#mobile-footer-main{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 0 auto;
	padding-bottom: 3vw;
	border-radius: 5px;
	padding-top: 2vw;
}

#mobile-footer-sub{
	display: flex;
	flex-direction: row;
	width: 90%;
	justify-content: space-around;
	margin: 0 auto;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding-bottom: 2vw;
}

.mob-footer-main-item{
	width: 14%;
}

.mob-footer-main-icon{
	width: 100%;
}

.mob-footer-sub-item{
	width: 10%;
}

.mob-footer-sub-icon{
	width: 100%;
}