body {
   margin: 0;
   padding: 0;
   font-family: Georgia, 'Times New Roman', Times, serif;
   line-height: 1.5em;
}

#site_wrap {
   background-color: white;
   min-height: 100vh;
   display: grid;
   grid-template-columns:
      1fr repeat(3, minmax(0, 362.6px)) 1fr;
   grid-gap: 0px;
   grid-template-rows:
      100px 598px min-content min-content min-content min-content 1fr;
   grid-template-areas:
      ". header header header ."
      "featured_header featured_header featured_header featured_header featured_header"
      ". featured_profile featured_main featured_main ."
      ". . services . ."
      ". content content content ."
      ". buttons buttons buttons ."
      "footer footer footer footer footer";
}

.header {
   background-color: white;
   grid-area: header;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: fixed;
   width: 100%;
   z-index: 2;

}

.header .logo {
   width: 357px;
   margin-top: 15px;
   margin-left: 35px;
}

.header .nav {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   margin-right: 35px;
}

.header .nav a {
   text-decoration: none;
   border: 2px solid #485676;
   border-radius: 50em;
   color: #485676;
   padding: 9px 12px;
   margin: 0 3px;
   text-transform: uppercase;
   font-weight: bold;
   display: inline-block;
}

.header .nav a:hover,
.header .nav .active {
   background-color: #485676;
   color: white;
}

.header .menu-btn {
   display: none;
}

.featured_header {
   background-image: url('Website Images/DSC02122@2x.png');
   grid-area: featured_header;
   background-size: cover;
   background-position: center;
   padding-top: 2em;
}

.featured_profile {
   grid-area: featured_profile;
   padding-top: 2em;
   padding-bottom: 2em;

}

.featured_main {
   grid-area: featured_main;
}

.featured_main h1 {
   color: black;
   text-align: center;
   padding-top: 1em;
}

.featured_main p {
   color: black;
   margin-left: 30px;
   padding-bottom: 2em;
}

.btn {
   text-decoration: none;
   border: 2px solid #B28FA8;
   background-color: #B28FA8;
   border-radius: 50em;
   color: white;
   padding: 12px 15px;
   margin: 0 3px;
   text-transform: uppercase;
   font-weight: bold;
   margin-left: 30px;
}

.services {
   text-decoration: none;
   grid-area: services;
   border: 2px solid #6D9CAA;
   background-color: #6D9CAA;
   padding: 15px 30px;
   text-transform: uppercase;
   font-weight: bold;
   Color: white;
   text-align: center;
}

.content {
   grid-area: content;
   display: flex;
}

.content img {
   margin: 1em 5px 0 5px;
}

.buttons {
   background-color: white;
   display: flex;
   justify-content: center;
   grid-area: buttons;
}

.buttons .Content_nav {
   list-style: none;
   padding: 2em;
   display: flex;
}

.buttons .Content_nav a {
   text-decoration: none;
   border: 2px solid #B28FA8;
   background-color: #B28FA8;
   border-radius: 50em;
   color: white;
   padding: 15px 30px;
   margin: 0 101px;
   text-transform: uppercase;
   font-weight: bold;
}

.social-media-icons-white a {
   color: white;
   font-size: 2em;
   margin: 0 .5em;
   padding-right: 25px;
   text-decoration: none;
}

.mobile_only1 {
   background-color: yellow;
   display: none;
}

.mobile_only2 {
   background-color: darkgreen;
   display: none;
}

.mobile_only3 {
   background-color: pink;
   display: none;
}

.footer {
   background-color: #485676;
   grid-area: footer;
   min-height: 80px;
   padding-top: 1em;
   text-align: right;
}

@media screen and (max-width:480px) {
   #site_wrap {
      min-height: 100vh;
      display: grid;
      grid-template-columns:
         1fr;
      grid-gap: 0px;
      grid-template-rows:
         min-content 300px min-content min-content 100px min-content min-content min-content min-content min-content min-content min-content min-content 1fr;
      grid-template-areas:
         "header"
         "featured_header"
         "featured_main"
         "featured_profile"
         "services"
         "mobile_only1"
         "mobile_only2"
         "mobile_only3"
         "mobile_only4"
         "mobile_only5"
         "mobile_only6"
         "footer"
   }

   .header {
      display: block;
      position: fixed;
      width: 100%;
      z-index: 3;

   }

   .header .logo {
      padding: 5x;
   }

   .header .nav {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      max-height: 0;
      transition: max-height .2s ease-out;
   }

   .header .nav a {
      margin: .5em;
   }

   .header .menu-icon {
      padding: 28px 20px;
      position: relative;
      float: right;
      cursor: pointer;
   }

   .header .menu-icon .nav-icon {
      background: #333;
      display: block;
      height: 2px;
      width: 18px;
      position: relative;
      transition: background .2s ease-out;
   }

   .header .menu-icon .nav-icon:before {
      background: #333;
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      transition: all .2s ease-out;
      top: 5px;
   }

   .header .menu-icon .nav-icon:after {
      background: #333;
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      transition: all .2s ease-out;
      top: -5px;
   }

   .header .menu-btn:checked~.nav {
      max-height: 400px;
   }

   .header .menu-btn:checked~.menu-icon .nav-icon {
      background: transparent;
   }

   .header .menu-btn:checked~.menu-icon .nav-icon:before {
      transform: rotate(-45deg);
      top: 0;
   }

   .header .menu-btn:checked~.menu-icon .nav-icon:after {
      transform: rotate(45deg);
      top: 0;
   }

   .featured_header {
      background-image: url('Website Images/mobile background.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom;
   }

   .featured_main h1 {
      color: black;
      text-align: center;
      line-height: 30px;
   }

   .featured_main p {
      color: black;
      margin-left: 30px;
      padding-bottom: 2em;
      padding-top: 1em;

   }

   .featured_profile {
      grid-area: featured_profile;
      padding-top: 2em;
      padding-bottom: 2em;
      margin: auto;
   }

   .content {
      display: none;
   }

   .buttons {
      display: none;
   }

   .mobile_only1 {
      display: grid;
      grid-area: mobile_only1;
      background-color: white;
      margin: auto;
      padding-top: 1em;
      padding-bottom: 1em;
   }

   .btn1 {
      text-decoration: none;
      border: 2px solid #B28FA8;
      background-color: #B28FA8;
      border-radius: 50em;
      color: white;
      padding: 12px 12px;
      margin: 0 30px;
      text-transform: uppercase;
      text-align: center;
      font-weight: bold;
      margin-top: 1em;
   }

   .mobile_only2 {
      display: grid;
      grid-area: mobile_only3;
      background-color: white;
      margin: auto;
      padding-bottom: 1em;
   }

   .btn2 {
      text-decoration: none;
      border: 2px solid #B28FA8;
      background-color: #B28FA8;
      border-radius: 50em;
      color: white;
      padding: 12px 12px;
      margin: 0 30px;
      text-transform: uppercase;
      text-align: center;
      font-weight: bold;
      margin-top: 1em;
   }

   .mobile_only3 {
      display: grid;
      grid-area: mobile_only5;
      background-color: white;
      margin: auto;
      padding-bottom: 1em;
   }

   .btn3 {
      text-decoration: none;
      border: 2px solid #B28FA8;
      background-color: #B28FA8;
      border-radius: 50em;
      color: white;
      padding: 12px 12px;
      margin: 0 30px;
      text-transform: uppercase;
      text-align: center;
      font-weight: bold;
      margin-top: 1em;
   }

   .footer {
      background-color: #485676;
      grid-area: footer;
      min-height: 80px;
      padding-top: 1em;
      text-align: right;
   }
}

#site_wrap_about {
   background-color: white;
   min-height: 100vh;
   display: grid;
   grid-template-columns:
      1fr repeat(3, minmax(0, 362.6px)) 1fr;
   grid-gap: 0px;
   grid-template-rows:
      100px min-content min-content min-content 1fr;
   grid-template-areas:
      ". header header header ."
      ". featured_profile featured_main featured_main ."
      ". bio bio mesnowboard ."
      "footer footer footer footer footer"
}

.featured_profile {
   grid-area: featured_profile;
   margin-left: 40px;
}

.featured_main {
   grid-area: featured_main;

}

.featured_main h1 {
   color: black;
   text-align: center;
   padding-top: 1em;
}

.featured_main p {
   color: black;
   margin-left: 30px;
   padding-bottom: 2em;
}

.bio {
   grid-area: bio;
   display: flex;
   margin: 20px;
}

.mesnowboard {
   grid-area: mesnowboard;
   display: flex;
   padding-bottom: 20px;
}

@media screen and (max-width:480px) {
   #site_wrap_about {
      min-height: 100vh;
      display: grid;
      grid-template-columns:
         1fr;
      grid-gap: 0px;
      grid-template-rows:
         70px min-content min-content min-content min-content 1fr;
      grid-template-areas:
         "header"
         "featured_profile"
         "featured_main"
         "mesnowboard"
         "bio"
         "footer"
   }

   .featured_profile {
      margin: auto;
      padding-top: 40px;
   }

   .featured_main {
      margin: auto;
      padding-bottom: 0px;
   }

   .mesnowboard {
      margin: auto;
      padding-bottom: 0px;
   }

   .featured_main h1 {
      color: black;
      text-align: center;
      padding-top: 0em;
   }
}

#site_wrap_portrait {
   background-color: white;
   min-height: 100vh;
   display: grid;
   grid-template-columns:
      1fr repeat(3, minmax(0, 362.6px)) 1fr;
   grid-gap: 0px;
   grid-template-rows:
      100px min-content min-content min-content 1fr;
   grid-template-areas:
      ". header header header ."
      ". portraitimages portraitimages portraitimages ."
      ". description description description ."
      ". examples examples examples ."
      " . rates rates rates ."
      "footer footer footer footer footer"
}

.portraitimages {
   grid-area: portraitimages;
   padding-bottom: 20px;
   display: flex;
   gap: 10px;
}

.description {
   grid-area: description;
   background-color: #6D9CAA;
   padding-left: 11em;
   padding-right: 11em;
}

.description h1 {
   color: black;
   text-align: center;
   padding-top: 1em;
   padding-bottom: 1em;
}

.description p {
   color: black;
   margin-left: 30px;
}

.examples {
   grid-area: examples;
   justify-content: center;
   gap: 10px;
   display: flex;
   padding-bottom: 20px;
   padding-top: 20px;
}

.rates {
   grid-area: rates;
   padding-bottom: 20px;
   background-color: #B28FA8;
   margin-bottom: 20px;
}

.rates h1 {
   color: black;
   padding-bottom: 10px;
   text-align: center;
}

.rates h2 {
   color: black;
   margin-left: 30px;
}

.mobileportraits {
   display: none;
}

.promphoto {
   display: none;
}

@media screen and (max-width:480px) {
   #site_wrap_portrait {
      min-height: 100vh;
      display: grid;
      grid-template-columns:
         1fr;
      grid-gap: 0px;
      grid-template-rows:
         70px min-content min-content min-content min-content 1fr;
      grid-template-areas:
         "header"
         "mobileportraits"
         "description"
         "examples"
         "rates"
         "promphoto"
         "footer"
   }

   .description,
   .examples,
   .rates {
      width: 100%;
      padding-left: 1em;
      padding-right: 1em;
   }

   .mobileportraits {
      display: grid;
      grid-area: mobileportraits;
      gap: 10px;
      flex-direction: column;
      align-items: center;
      margin: auto;
      padding-bottom: 20px;
   }

   .portraitimages {
      display: none;
   }

   .description {
      grid-area: description;
      text-align: center;
   }

   .examples {
      grid-area: examples;
      gap: 10px;
      flex-direction: column;
      align-items: center;
   }

   .rates {
      grid-area: rates;
      padding-bottom: 0px;
   }

   .promphoto {
      display: grid;
      grid-area: promphoto;
      margin: auto;
      padding-bottom: 20px;
   }
}

#site_wrap_sports {
   background-color: white;
   min-height: 100vh;
   display: grid;
   grid-template-columns:
      1fr repeat(3, minmax(0, 362.6px)) 1fr;
   grid-gap: 0px;
   grid-template-rows:
      100px min-content min-content min-content min-content 1fr;
   grid-template-areas:
      ". header header header ."
      ". actionshots actionshots actionshots ."
      ". sports_intro sports_intro sports_intro ."
      ". sportsshots sportsshots sportsshots ."
      ". dancepicture pricing pricing ."
      "footer footer footer footer footer"
}

.actionshots {
   grid-area: actionshots;
   justify-content: center;
   gap: 20px;
   display: flex;
   padding-top: 10px;
   align-items: center;
   padding-bottom: 20px;
}

.sports_intro {
   grid-area: sports_intro;
   background-color: #6D9CAA;
   padding-left: 8em;
   padding-right: 8em;

}

.sports_intro p {
   color: black;
   padding-top: 10px;
   padding-bottom: 10px;
}

.sportsshots {
   grid-area: sportsshots;
   justify-content: center;
   align-items: center;
   gap: 20px;
   display: flex;
   padding-bottom: 20px;
   padding-top: 20px;
}

.dancepicture {
   grid-area: dancepicture;
   gap: 20px;
   display: flex;
   padding-bottom: 20px;
}

.pricing {
   grid-area: pricing;
   background-color: #B28FA8;
   margin-bottom: 20px;
}

.pricing h1 {
   color: black;
   padding-top: 10px;
   padding-bottom: 10px;
   text-align: center;
}

.pricing h2 {
   margin-left: 30px;
}

@media screen and (max-width:480px) {
   #site_wrap_sports {
      min-height: 100vh;
      display: grid;
      grid-template-columns:
         1fr;
      grid-gap: 0px;
      grid-template-rows:
         70px min-content min-content min-content min-content min-content 1fr;
      grid-template-areas:
         "header"
         "actionshots"
         "sports_intro"
         "sportsshots"
         "pricing"
         "dancepicture"
         "footer"
   }

   .actionshots,
   .sports_intro,
   .sportsshots,
   .pricing,
   .dancepicture {
      width: 100%;
      padding-left: 1em;
      padding-right: 1em;
   }

   .actionshots {
      grid-area: actionshots;
      gap: 10px;
      flex-direction: column;
      align-items: center;
   }

   .sports_intro {
      grid-area: sports_intro;
   }

   .sportsshots {
      grid-area: sportsshots;
      gap: 10px;
      flex-direction: column;
      align-items: center;
   }

   .pricing {
      grid-area: pricing;
   }

   .dancepicture {
      grid-area: dancepicture;
      display: flex;
      justify-content: center;
   }
}

#site_wrap_landscape {
   background-color: white;
   min-height: 100vh;
   display: grid;
   grid-template-columns:
      1fr repeat(3, minmax(0, 362.6px)) 1fr;
   grid-gap: 0px;
   grid-template-rows:
      100px min-content min-content min-content min-content 1fr;
   grid-template-areas:
      ". header header header ."
      ". landscapephotos landscapephotos landscapephotos ."
      ". introlandscape introlandscape introlandscape ."
      ". examplelandscape examplelandscape examplelandscape ."
      ". pricinglandscape pricinglandscape pricinglandscape ."
      "footer footer footer footer footer"
}

.landscapephotos {
   grid-area: landscapephotos;
   gap: 20px;
   display: flex;
   padding-top: 10px;
   padding-bottom: 20px;
}

.introlandscape {
   grid-area: introlandscape;
   background-color: #6D9CAA;
   padding-left: 11em;
   padding-right: 11em;
}

.examplelandscape {
   grid-area: examplelandscape;
   display: flex;
   gap: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}

.pricinglandscape {
   grid-area: pricinglandscape;
   padding-bottom: 20px;
   background-color: #B28FA8;
   margin-bottom: 20px;
}

.pricinglandscape h1 {
   text-align: center;
}

.pricinglandscape h2 {
   margin-left: 30px;
}

@media screen and (max-width:480px) {
   #site_wrap_landscape {
      min-height: 100vh;
      display: grid;
      grid-template-columns:
         1fr;
      grid-gap: 0px;
      grid-template-rows:
         70px min-content min-content min-content min-content 1fr;
      grid-template-areas:
         "header"
         "examplelandscape"
         "introlandscape"
         "landscapephotos"
         "pricinglandscape"
         "footer"
   }

   .landscapephotos,
   .examplelandscape,
   .introlandscape,
   .pricinglandscape {
      width: 100%;
      padding-left: 1em;
      padding-right: 1em;
   }

   .landscapephotos {
      grid-area: landscapephotos;
      gap: 10px;
      padding-top: 20px;
      flex-direction: column;
      align-items: center;
   }

   .introlandscape {
      grid-area: introlandscape;
   }

   .examplelandscape {
      grid-area: examplelandscape;
      gap: 10px;
      flex-direction: column;
      align-items: center;
   }

   .pricinglandscape {
      grid-area: pricinglandscape;
   }
}

#site_wrap_contact {
   background-color: white;
   min-height: 100vh;
   display: grid;
   grid-template-columns:
      1fr repeat(3, minmax(0, 362.6px)) 1fr;
   grid-gap: 30px;
   grid-template-rows:
      100px min-content min-content 1fr;
   grid-template-areas:
      ". header header header ."
      ". contact_me contact_me contact_me ."
      ". form form form ."
      " footer footer footer footer footer"
}

input[type=text],
input[type=email],
select,
textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #B28FA8;
   border-radius: 4px;
   box-sizing: border-box;
   margin-top: 6px;
   margin-bottom: 16px;
   resize: vertical;
}

.contact_me {
   grid-area: contact_me;
}

.contact_me h1 {
   color: black;
   text-align: left;
}

.form {
   grid-area: form;
   display: flex;
   border-radius: 5px;
   background-color: #B28FA8;
   padding: 20px;
}