/*THIS IS FOR THE ABOUT PAGE*/


/*Start Main components*/
p {
  text-align: left;
  color: #222222;
  padding-bottom: 5px;
}

.about-canvas {
    max-width: 950px;
    /*width changed from 1248 because we don't need it to get that wide and will not need padding on the flex container now */
    padding-top:95px;
    padding-left: 50px;
    padding-right: 50px;
    /*both paddings increased to 50 from 36 for an 850 flex container width*/
    margin: auto;
    min-height: calc(100vh - 80px) /*this keeps the 80px footer at the bottom of the page */
  }


.header-text {
  font-family:'Montserrat', Verdana, sans-serif;
  font-size: 48px;
  line-height: 1.2em;
  height: auto;
  padding: 0px;
  margin: 0px 0px;
  margin-top: 8px;
  /*text-transform:uppercase;*/
  /*decided to kill the uppercase*/
}


.body-text {
  font-family:'Karla', Verdana, sans-serif;
  font-size: 16px;
  line-height: 24px; /*didn't remember what 1.6ems was so switched to 24...*/
  height: auto;
  margin: 12px 0px;
}


.flex-menu{
  display: flex;
}
.flex-container{
  display: flex;
}

/* This is the largest breakpoint and it has a side by side image and text*/
/*I've changed the min width here to 850 from 780 because I don't want "hi, I'm alyshia" to reflow*/
@media only screen
and (min-width: 850px)
  {
    .flex-container-about {
      display: flex;
      position: relative;
      margin: 40px auto; /*this used to be 34px but felt too close ot the top of the screen*/
      padding-left: 0px; /*these both used to be 3%*/
      padding-right: 0px;
      max-width: 850px; /*this used to be 1050 and everything could get a little wider */
    }
    .text-box {
      padding-left: 32px;/*used to be 24px*/
      margin-left: 7px; /*used to be 1.5%*/
      width: auto; /*used to be 59% but now we can just fill because the width of the img is fixed */
    }

    .hero-image {
      width: 350px; /*this image used to be square and isn't anymore, so I have changed the width here for the container */
      padding-top: 16px; /*this keeps the header visually aligned with "hi, I'm alyshia" */
}

    .hero-image img{
        padding-top: 0px;
        width: 350px;
        height: 554px;
        object-fit: cover;
        object-position: center;
    }
  }


/* This is our mid-size breakpoint to change the side-by-side layout but it's too soon to change the header for a phone layout yet.  The max width here used to be 779 and is 849 now with the new layout*/
@media only screen
and (max-width: 849px) {
   .flex-container-about{
     display: block;
     justify-content: left;
     margin: 20px 24px auto 24px;
     /*changed top margin to 20 here*/
     /*removed max width it should just fit the page*/

   }
   .text-box {
     margin-left: 1.5%;
     margin-bottom: 40px;
   }

   .hero-image {
     /*big changes here - we are updating this to have an aspect ratio and stay the same size on the top */
     position: relative;
     width: 100%;
     height: 0;
     padding-top: calc(100% * (285 / 700));
     overflow: hidden;
      }

    .hero-image img {
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      object-position: center 24%;
      width: 100%;
      height: 100%;
  }

     .about-canvas {
         padding-left: 4%;
         padding-right: 4%;
         padding-top: 60px;
       }


}
/* This is the smallest breakpoint and it changes some padding for tiny phones but the content layout is the same */
@media only screen
    and (max-width: 649px)
    {
.about-canvas {
    padding-top: 40px;
    padding-left:2%;
    padding-right: 2%;
    min-height: calc(100vh - 60px)

  }
  .text-box {
    margin-bottom: 40px;
  }
  .hero-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 210px;
    overflow: hidden;

     }
}

/*adding one smaller brakpoint to make the "HI" font size smaller so it doesn't reflow*/
@media only screen
    and (max-width: 430px)
    {
      .header-text {
        font-size: 32px;
}