body {
  color:black;
}

p{
    margin:30px;
}

header {
    color: white;
    background: url(../images/appleHarvest.jpg) no-repeat center center;
    background-size: cover;
    text-align: center;
    height: 15em;
    margin-bottom: 3em;
}

.hidden {
    display: none;
}

.formFeedback {
  color: #d73232;
  margin-left: 2em;
}


#name-label {
    margin-right: 0.8em;
}

.checkbox-list {
    /* align-items: center */
    display: flex;
    flex-direction: column;
    margin-top: 2em;
    margin-left: -1.3em;
}

.header-text{
    padding-top: 1em;
    background-color: black;
}

/* feedback form design */
.form_input {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.to_input {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.radio_button {
    display: flex;
    flex-direction: row;
}


form {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 500px;
    padding: 1em;
    border: 2px solid #CCC;
    border-radius: 1em;
}

form textarea {
    text-align: left;
}

label {
  position: relative;
  text-align: center;

 }

button {
    margin: 20px 0 0 124px;
    font-size: 15px;
    align-self: center;
    align-items: center;
}
form span {
    display: inline-block;
    width: 120px;
    text-align: right;
}


form h2 {
    text-align: center;
    background-color: #f4f3af;
}


.row {
  display: flex;
  flex-direction: row;
  width:100%;
}


.box {
  height:auto;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.box1{
    background-color: #f4f3af;
    text-align: center;
    margin:20px;

}
.box2{
    background-color: #f4f3af;
    margin:20px;

}
.box3{
    background-color: #f4f3af;
    margin:20px;

}

.bottom_row {
    display: flex;
    flex-direction: row;
}

.image {
    display: flex;
    flex-grow: 3;
    align-self: center;
    flex-direction: column;
}


ul {
    list-style: none;
    background-color: #f4f3af;
    font-size: 100%;
}

nav ul {

    font-family: Comic Sans MS;
    font-size: 150%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: -1em;

}

nav ul li {
    /* flex-grow: 1; */
    text-align: center;
    text-decoration:none;
    background-color: #f5efbc;
    margin: 5px;
    margin-left: 0px;
    border: solid;
    border-style:groove;
    border-color: lightgreen;
    text-decoration: none;
}

.row_middle {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    width: 100%;

}



.contents {
    display: flex;
    background-color: #f4f3af;
    flex-direction: row;
    justify-content: space-around;
    margin: 4ex;
}

.contents-image {
    display: flex;
}

.contents-image img {
    width: auto;
    height: auto;
    flex-grow: 1;
}

.contents-text {
      flex-grow: 4;
      border: 3px solid;
      padding: .5em 1em;
      border-radius: .5em;
      border-color: #985303;
      justify-content: center;
}

.contents-text p{
    flex-grow: 4;
}

.contents-text ul li {
    color: red;
}



blockquote {
        width: 500px;
        font-size: 130%;
        font-style: italic;
        font-family: Georgia, Times, serif;
        margin: 0px 0px 10px 10px;
        padding: 20px;
        border-top: 1px solid #665544;
        border-bottom: 1px solid #665544;
        color: #29b5b9;
}

.quote {
    display: flex;
    justify-content: space-around;
    margin-top: 3em;
}

.food-image {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.food-image img {
    width: auto;
    height: auto;
    margin: 10px;
}

a{
    text-decoration: none;
    color:#ee7548

}

a:hover {
  color: #25669a;
}

.foot {
    display: flex;
    justify-content: center;
}

footer {
    background: url(../images/foot.png) no-repeat center center;
    background-size: cover;
    text-align: center;
    height: 30em;
    margin-top: 3em;
}


.office-map {
    display: flex;
    flex-shrink: 1;
    flex-wrap: wrap;
}


/* super-wide screen device */
@media (min-width: 1100px) {
    nav ul li{
      flex: none;
      font-size: 150%;
    }

    header h1 {
        font-size: 300%;
    }

    .contents {
        display: flex;
        background-color: #f4f3af;
        flex-direction: row;
        justify-content: center;
    }

    .formFeedback {
      color: #d73232;
      font-size: 120%;
    }

    .contents h3 {
        font-size: 150%;
        justify-content: center;
    }

    .contents p {
        font-size: 150%;
        justify-content: center;
    }

    .food-image {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .header {
        font-size: 150%;
        flex: none;
    }

    .bottom_row {
        font-size: 150%;
        justify-content: center;
    }

    .row_middle{
        flex: none;
        justify-content: center;
    }

    form p {
        font-size: 150%;
    }

    ul {
        list-style: none;
        background-color: #f4f3af;
        font-size: 180%;
    }
}



/* mobile_design / narrow screen design */
@media (max-width: 800px) {

    h1{
        font-size: 200%;
    }

    header h1 {
        font-size: 200%;
    }

    form p {
        font-size: 150%;
    }

    .radio_button {
        display: flex;
        flex-direction: column;
    }

    .formFeedback {
      color: #d73232;
      font-size: 150%;
    }

    .contents h3 {
        font-size: 200%;
    }

    .contents p {
        font-size: 200%;
    }

    .contents {
        display: flex;
        background-color: #f4f3af;
        flex-direction: column;
        justify-content: space-around;
    }

    .food-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .header{
        text-align: center;
    }

    ul {
        list-style: none;
        background-color: #f4f3af;
        font-size: 180%;
    }

    .middle{
        display: flex;
        flex-direction: column;
    }


    .intro{
        display: flex;
        font-size: 180%;
        margin: 10px;
        flex-wrap: wrap;
    }

    nav ul {
        font-family: Comic Sans MS;
        font-size: 150%;
        display: flex;
        flex-direction: column;
    }

    nav ul li {

        text-align: center;
        /* text-decoration:none; */
        font-size: 120%;
        background-color: #f5efbc;
        margin: 5px;
        margin-left: 0px;
        border: solid;
        border-style:groove;
        border-color: lightgreen;
    }


    h2 {
        font-size: 150%;
    }
    .link0{
        flex-grow: 1;
        font-family: Comic Sans MS;
        font-size: 150%;
        border: solid;
        border-style:groove;
        border-color: lightgreen;


    }

    .row_middle{
        flex-direction: column;
        flex-wrap: wrap;
    }

    .bottom_row{
        display: flex;
        flex-direction: column;
        font-size: 150%;

    }

    .box1{

        margin:5px;

    }
    .box2{

        margin:5px;

    }
    .box3{

        margin:5px;

    }
}