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

img{
	width: 100%;
}

::root{
--color-gray-light-1:#F5F5F5; /* whitesmoke */

--color-gray-dark-1:#DDD;
--color-gray-dark-2:#AAA;
--color-gray-dark-3:#999;
--color-gray-dark-4:#555;
--color-gray-dark-5:#333;

--color-green-1:#008000; /*green*/
--color-green-2:#6B8E23; /*olivedrab*/

--color-yellow:#FFD700; /*gold*/

--color-red-1:#FF4500; /*orangered*/
--color-red-2:#B22222; /*firebrick*/
}

body{
	font-weight: 300;
	font-family: "Open Sans", sans-serif;
	color:#333;
	font-size: 14px;
}

/* header *********************************/
.header{
	max-width:960px;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.header-logo{
	width: 60px;
	margin: 5px 0;
}

.org-name{
	align-self: center;
	margin-right: auto;
	margin-left: 10px;
	font-size: 24px;
	font-weight: 400;
	color: green;
}

.nav{
	display: flex;
	align-items: stretch;
}

.navbar{
	display: flex;
}

.navbar-item{
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px;
	cursor: pointer;
}

.navbar-item img{
	width: 20px;
	height: 20px;
	margin-top: 14px;
	filter: opacity(.5);
}

.navbar-item span{
	text-transform: lowercase;
	font-weight: 500;
	color: #AAA;
}

.navbar-item:hover, .navbar-item.activepage{
	background-color: gold;
}

/* recipes *********************************/
.title{
	background-color: #6B8E23;
	padding: 15px 0 15px 0;
}

.title-content{
	max-width: 960px;
	margin: auto;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: .1em;
}

.title-content img{
	width: 20px;
	height: 20px;
	margin: 0 5px 0px auto;
	filter: invert(1);
}

.title-content h1{
	align-self: center;
	margin-right: auto;
	margin-left: 10px;
	font-size: 24px;
	font-weight: 600;
}

.title-content h2{
	align-self: center;
	margin-right: 10px;
	margin-left: 0;
	font-size: 20px;
	font-weight: 400;
}

/* main ************************************/
main{
	max-width:960px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
	justify-content: space-between;
}

.recipe{
	display: flex;
	padding: 0;
	background-color: #DDD;
}

.food{
	width: 350%;
	padding: 0;
	margin: 0;
}

.recipe-container{
	display: flex;
	padding: 20px;
	margin: 0 0px 0 0;
	flex-direction: column;
	align-items: center;
}

.recipe-container h3{
	text-align: center;
}

.author{
	margin: 10px 0 0 0;
}

.author img{
	width: 70px;
	height: 70px;
	border: 5px solid;
	border-color: white;
	border-radius: 100%;
}

.author h4{
	font-weight: 400;
}

.recipe-details{
	margin: 20px 0 0 0;
	align-self: flex-start;
}

.recipe-details ul{
	display: flex;
	flex-direction: column;
	margin: 0 0 10px 0;
}

.recipe-details li{
	display: flex;
	list-style: none;
}

.bold{
	font-weight: 500;
}

.thin::before{
	content: ":";
	margin: 0 0 0 2px;
}

/* ingredients and instructions *********************************/
.instructions-container{
	display: flex;
	padding: 30px 20px;
	border: dashed .1px #DDD;
}

.instructions-container h2{
	font-weight: 400;
	margin: 0 0 10px 0;
}

.ingredients{
	padding: 0 40px 0 0;
}

.ingre-list li{
	list-style: none;
	margin: 0 0 5px 0;
}

.ing-bold{
	font-weight: 600;
}

.instru-list li{
	margin: 0 0px 5px 0;
}

/* recommendations *************************/
.reco-container {
    width: 100%;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 100px;
    font-family: 'Open Sans';
    color: #333;
}

.recom-title {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
}

.recom-title #recom-id {
    letter-spacing: 20px;
    font-size: xx-large;
}

.reco-form-container {
    width: 100%;
    padding: 0px 15px 10px 15px;
    display: flex;
    justify-content: space-evenly;
    gap: 15px;
    margin-bottom: 75px;
}

.form1-foodreco, .form2-foodreco, .form3-foodreco {
    width: 290px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 25px;
}

.form1-foodreco img, .form2-foodreco img {
    margin-bottom: 20px;
    width: 100%;
    height: 170px;
    object-fit: fill;
}

.form3-foodreco img {
    margin-bottom: 20px;
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: 100% 57%;
}

.form1-foodreco #form-title, .form2-foodreco #form-title, .form3-foodreco #form-title {
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
}

.star1-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.star1-container svg {
    width: 15px;
    fill: #333;
}

.form1-foodreco #content-recom, .form2-foodreco #content-recom, .form3-foodreco #content-recom {
    font-size: 14px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    padding: 12px 20px 20px 20px;
}

.user-container1 {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
}

.user-container1 img {
    height: 140%;
    object-fit: cover;
    object-position: 36% -3px;
}

.user-container2 {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
}

.user-container2 img {
    height: 100%;
    object-fit: cover;
    object-position: 36% 0px;
}

.user-container3 {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
}

.user-container3 img {
    height: 130%;
    object-fit: cover;
    object-position: 60% 0px;
}

.user-rating {
    width: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    padding: 0px 15px 0px 15px;
}

.rating {
    background-color: #6B8E23;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: auto;
    border-radius: 5%;
    padding: 5px;
    color: white;
    
}

.rating span {
    font-size: 12px;
    font-weight: 100;
}

/* ratings *********************************/
.ratings{
	background-color: firebrick;
	color: #FFF;
	padding: 0 0 0 20px;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ratings-location{
	display: flex;
	align-items: center;
}

.ratings-tags{
	display: flex;
	align-items: center;
}

.ratings-icon{
	width: 18px;
	height: 18px;
	filter: invert(1);
}

.ratings ul{
	display: flex;
}

.ratings li{
	list-style: none;
}

.ratings li:not(:first-child)::before{
	content: " | ";
}

.ratings-stars{
	display: flex;
	align-items: center;
}

.ratings-votes{
	background-color: orangered;
	padding: 10px;
	font-size: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ratings-item .ratings-icon:first-of-type{
	margin-right: 5px; 
}

/* footer *********************************/
.footer{
	background-color: #555;
	color: #DDD;
}

.footer-content{
	max-width:960px;
	margin: auto;
	padding: 5px 0 15px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.footer-logo{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-logo-img{
	width: 90px;
	margin: 10px 0px;
}

.footer-logo span{
	font-size: 15px;
	text-transform: lowercase;
	font-weight: 500;
}

.infobar-item-icon{
	width: 18px;
	height: 18px;
	filter: invert(1);
}

.footer-list{
	margin: 0 auto 0 50px;
}

.footer-list ul{
	padding: 40px 30px 0px 30px;
	font-size: 16px;
	display: flex;
	flex-direction: column;
}

.footer-list li{
	list-style: none;
}

.footer-list span{
	font-size: 10px;
}

.socmed{
	display: flex;
}

.socmed-item-icon{
	width: 30px;
	height: 30px;
	filter: invert(60%);
	margin: 0 0 0 20px;
}

.socmed-item img{
	width: 30px;
	height: 20px;
	margin-top: 14px;
}

/* subfooter *********************************/
.subfooter{
	background-color: #333;
	color: #DDD;
	font-size: 12px;
}

.subfooter-content{
	max-width:960px;
	margin: auto;
	padding: 5px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.subfooter-content img{
	width: 18px;
	height: 18px;
	margin: 0 5px 0px auto;
	filter: invert(60%);
}