/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}


/******************************************
/* LAYOUT
/*******************************************/
body {
  display: flex;
  flex-direction: row;
  font-family: 'Abel', sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
/*home page*/
.logoImage {
  width: 70%;
  padding: 2%;
}

.menu {
  width: 20%;
}

h3 {
  letter-spacing: 10px;
  font-size: 2rem;
}

.menu ul {
  list-style-type: none;
  text-align: center;
  width: 100%;
  padding: 0;
  margin-top: -4%;
}

.menu li a {
  text-decoration: none;
  color: #976b4f;
  font-size: 2.5rem;
}

.itemTwo {
  margin-top: -10%;
  text-align: center;
}

.itemThree {
  margin-top: 10%;
}


.itemTwo:hover, .itemThree:hover {
  color: gray;
  background: cornsilk;
}

.photogrid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 70%;
  padding-top: 3%;
}

.column-left, .column-right {
  width: 50%;
  align-self: flex-start;
}


.photogrid img{
  width: 100%;
  height: 15%;
  padding-right: 1%;
}


.photogrid .bottom, .about .bottom, .contact .bottom {
  display: block;
  margin: 0 auto;
  padding: 10% 0 5% 0;
  font-size: 1.5rem;
  color: gray;
}

/*about & about page layout*/
.about, .contact {
  width: 70%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 3%;
}

.aboutLeft, .aboutRight, .contactLeft, .contactRight {
  width: 50%;
}

.aboutRight h1, .aboutRight p{
  text-align: center;
}

.aboutRight h1, .contactRight h1 {
  font-size: 5rem;
  letter-spacing: 5px;
  border-bottom: solid 2px black;
  margin: 0 50px;
  text-align: center;
}

.aboutRight p, .contactRight p {
  font-size: 2rem;
  line-height: 150%;
  margin: 0 40px;
  text-align: center;
  padding-top: 5%;
}

.aboutRight{
  height: fit-content;
  align-self: center;
}

.aboutLeft img, .contactLeft img {
  width: 100%;
  padding: 4%;
}
/*contact*/

.contactRight {
  height: fit-content;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.contactRight span {
  text-align: center;
  align-self: center;
  font-size: 1.5rem;
  padding-top: 2%;
}

/*footer*/
.bottom {
  margin-top: 100px;
  font-size: 1.5rem;
  text-decoration: none;
  font-size: 3rem;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/


@media screen and (min-width: 300px) and (max-width: 980px){
  .photogrid {
    width: 100%;
  }
  .column-left, .column-right {
    width: 100%;
  }
}


@media screen and (max-width: 980px){
  .menu {
    width: 100%;
  }
  body {
    display: flex;
    flex-direction: row;
    height: 100%;
    flex-wrap: wrap;
  }
  .about, .contact {
    width: 100%;
    flex-wrap: wrap;
  }
}



@media screen and (max-width: 990px){
.aboutLeft, .aboutRight, .contactLeft, .contactRight {
  width: 100%;
  }
  .contactRight {
    display: flex;
    flex-direction: column;
  }
  
}

/*mobile view*/
@media screen and (min-width: 209px) and (max-width:980px) {
  li a h3 {
    font-size: 4rem;
  }
  .about .aboutRight p, .contact .contactRight p {
    font-size: 4.3rem;
    margin: 15px 40px;
  }
  .aboutRight h1, .contactRight h1 {
    padding-top: 10%;
    font-size: 6rem;
  }
  .contactRight span, i {
    font-size: 3rem;
  }
}