body {
    margin: 0;
}

#header {
    height: 100px;
    display: flex;
    background-color: rgb(230, 168, 78);
    border-bottom: 3px white solid;
    justify-content: space-between;
}

#logo {
    flex-grow: 4;
    background-repeat: no-repeat;
}

#nav {
    display: flex;
    flex-grow: 2;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
}

.menuItem {
    justify-content: space-evenly;
    flex-grow: 1;
    font-size: 20px;
}

a {
    text-decoration: none;
    color: black;
}

#bigImg {
    background-image: url("../images/hero-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 600px; 
}

#picWords {
    background-color: white;
    margin-bottom: 40px;
    padding: 10px;
    font-size: 40px;
    font-family: 'Noto Sans JP', sans-serif;
}

#categories {
    padding: 50px;
    display: flex;
    flex-direction: column;
}

.heading {
    margin-bottom: 20px;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
}

.bodyText {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
}

#picContainer {
    margin: 0;
    display: flex;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 50px;
    height: 350px;
}

.image {
    width: 365px;
    height: 250px;
    object-fit: cover;
    object-position: 50% 50%;
}

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

.wordPic > div {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    margin-top: 15px;
}

#grayContainer {
    background-color: rgb(220, 223, 233);
    height: 500px;
    padding-bottom: 30px;
}

#grayContainer > .heading {
    font-size: 40px;
    padding:50px 0 20px 50px;
}

#grayContainer > .bodyText {
    font-size: 20px;
    padding: 0 50px 50px 50px;
}

#fourImages {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 50px;
    margin-right: 50px;
}

.smallImage {
    width: 285px;
    height: 190px;
    object-fit: cover;
    object-position: 50% 50%;
    background-color: white;
}

.whiteWords {
    display: flex;
    flex-direction: column;
    align-items: center;;
}
div.whiteWords {
    background-color: white;
}

.whiteWords > div {
    font-family: 'Open Sans', sans-serif;
    font-size: 23px;
    padding: 15px;
}

#lastWhite {
    height: 700px;
    display: flex;
    flex-direction: column;
}

#whereEat {
    padding: 50px;
    display: flex;
    flex-direction: column;
}

#space {
   padding-top: 20px;
}

#lastImg {
    display: flex;
    padding-left: 50px;
    padding-right: 50px;
    justify-content: space-between;
}

.borderPic {
    width: 365px;
    height: 250px;
    object-fit: cover;
    object-position: 100% 50%;
    border: 8px rgb(220, 223, 233) solid;
}

#bottom {
    display: flex;
    height: 100px;
    margin-top: 50px;
    padding-left: 50px;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(230, 168, 78);
}

#copy {
    flex-grow:4;
    font-family: 'Open Sans', sans-serif;
}

#bottomNav {
    flex-grow:3;
    display: flex;
    justify-content: space-around;
    font-family: 'Open Sans', sans-serif;
}

#burger {
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 600px; 
    background-image: url("../images/burger7.jpg");
}

.grayInfo {
    background-color: rgb(220, 223, 233);
    height: 150px;
    display: flex;
    flex-direction: column;
    padding-left: 50px;
    padding-top: 30px;
}
.info {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.individual {
    width: 200px;
    padding-right: 15%;
    font-family: 'Open Sans', sans-serif;
}
.bold {
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

#review {
    display: flex;
    align-items: center;
    margin-top: 50px;
    flex-direction: column;
}

.burgerName {
    font-size: 40px;
    font-family: 'Noto Sans JP', sans-serif;
}
#starContainer {
    padding-top: 10px;
    display: flex;
    align-items: center;    
}

.star {
    width: 25px;
    height: 25px;
    object-fit: cover;
    
}
#starWords {
    padding-left: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bolder;
}

#buttonBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

#saveButton {
    background-color: rgb(168, 40, 56);
    border: none;
    color: white;
    padding: 7px;
    border-radius: 20px;
    width: 100px;
}

#printer {
    font-size: 20px;
    margin-left: 20px;
}

#quoteContainer {
    background-color: rgb(220, 223, 233);
    margin: 30px 50px 0 50px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
    display: flex;
}

#quote {
    margin-top: 40px;
    margin-left: 150px;
    margin-right: 150px;
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
    font-size: 25px;
}

#steps {
    margin-top: 30px;
    margin-left: 50px;
    margin-right: 50px;
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
}

#leftSteps {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: 'Open Sans', sans-serif;
}

#rightSteps {
    display: flex;
    flex-direction: column;
    width: 600px;
    font-family: 'Open Sans', sans-serif;
}
#rightSteps .bodyText, #leftSteps .bodyText {
    font-weight: bolder;
    font-family: 'Open Sans', sans-serif;
}

ol li {
    padding-bottom: 15px;
    padding-left: 20px;
}

#video {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
ul, ol {
    padding: 0 0 0 25px;
}