@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root {
  --body-font: 'Source Sans Pro', sans-serif;
  --body-font-size-l: 1rem;
  --body-font-size-s: 0.875rem;
  --body-color: #ddd;
  --body-line-height: 1.5;
  --body-letter-spacing: 0.03rem;
  --main-bg-color: #303334;
  --main-padding-block: 3rem;
  --side-panel-bg: #151513;
  --inner-wrapper-width: 73.75rem;
  --inner-wrapper-padding-l: 2.5rem;
  --inner-wrapper-padding-s: 0.938rem;
  --headline-font: 'Oswald', sans-serif;
  --h1-font-size-l: 3rem;
  --h1-font-size-s: 0.938rem;
  --h1-color: #2a2a2a;
  --h2-font-size-l: 1.75rem;
  --h2-font-size-s: 1.094rem;
  --nav-height-l: 4.375rem;
  --nav-height-s: 2.75rem;
  --nav-bg-color: #1e211e;
  --color-01: #fff;
  --button-bg-color: transparent;
  --button-border-color: transparent;
  --link-color: #719b5e;
  --input-bg-color: #26292a;
  --footer-color: #545758;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-size: var(--body-font-size-s);
  color: var(--body-color);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

button {
  cursor: pointer;
}

nav .openbtn {
  cursor: pointer;
}

.nav-sidepanel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--side-panel-bg);
  width: 0;
  overflow: hidden;
  z-index: 10;
  transition: width ease-in-out 0.4s;
}

.nav-sidepanel ul {
  padding-left: 0;
}

.nav-sidepanel ul li {
  list-style-type: none;
  font-family: var(--headline-font);  
}

.nav-sidepanel ul li a {
  padding: 0.5rem 1.25rem;
  font-weight: 600 !important;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-01) !important;  
  white-space: wrap;
  text-shadow: 0 1px 1px #00000033;
  display: block;
  width: 100%;
  opacity: 0.6;
  transition: all ease-in-out 0.2s;
}

.nav-sidepanel ul li a:hover,
.nav-sidepanel ul li a.current-page {
  background-color: var(--link-color);
  opacity: 1;
}

.nav-sidepanel .closebtn {
  padding: 0.625rem 1.125rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.nav-sidepanel .button-wrapper {
  text-align: right;
}

picture, img {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
}

a {
  color: var(--link-color);
}

main {
  background-color: var(--main-bg-color);
  padding-block: var(--main-padding-block);
}

button {
  color: var(--color-01);
  background-color: var(--button-bg-color);
  border-color: var(--button-border-color);
}

.headline {
  font-family: var(--headline-font);
}

h1 {
  font-size: var(--h1-font-size-s);
  color: var(--h1-color);

}

h2 {
  color: var(--color-01);
  font-family: var(--headline-font);
  margin-bottom: 0;
  text-transform: uppercase;
}

nav {
  height: var(--nav-height-s);
  align-content: center;
  background-color: var(--nav-bg-color);
  position: sticky;
}

.hero-section.hero-home,
.hero-section.boise-state-exhibit,
.hero-section.articles {
  background-image: url('images/300580123.jpg');
  background-size: cover;
  background-position: 50% 40%;
  height: 7.25rem;
  align-content: center;
}

.inner-wrapper {
  max-width: var(--inner-wrapper-width);
  margin-inline: auto;  
  padding-inline: var(--inner-wrapper-padding-s);
}

.inner-wrapper.index-page {
  padding-inline: 1.875rem;
}

.info-section.inner-wrapper {
  display: flex;
  flex-direction: column;
}

.info-section.inner-wrapper section {
  flex-basis: 100%;
}

.profile-photo {
  padding-block: 0.625rem;
}

.more-info {
  width: 100%;
  text-align: center;  
  background-color: var(--link-color);
  align-content: center;
  border-radius: 0.125rem;
  max-width: fit-content;
  margin-inline: auto;
  padding: 0.5rem 1.875rem;
}

.more-info a {  
  color: var(--color-01);
  font-family: var(--headline-font);
  font-size: 0.875rem;
  font-weight: bold;  
  text-decoration: none;
  min-height: 2.375rem;
}



/* Contact Section */

.contact-section {
  position: relative;
  margin-top: 1.25rem;
}

.contact-section .form-group {
  margin-bottom: 1.25rem;
  width: 100%;
}

.contact-section .form-required {
  color: #ff2825;
}

.contact-section label, 
.label-name,
.indicates-required {
  display: block;
  text-transform: uppercase;
  margin-bottom: 0.313rem;
  color: var(--body-color);
}

.indicates-required {
  margin-bottom: 1.25rem;
}

.contact-section input {
  height: 2.375rem;
  padding: 0 0.938rem;
  width: 100%;
  border-radius: 0.125rem;
  background-color: var(--input-bg-color);
  border-color: transparent;
  box-shadow: none;
  color: var(--color-01);
}

.contact-section textarea {
  height: 12.5rem;
  width: 100%;
  border-radius: 0.125rem;
  background-color: var(--input-bg-color);
  border-color: transparent;
  box-shadow: none;
  color: var(--color-01);
}

.contact-section .input-name {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.contact-section .input-name label {
  font-size: 0.688rem;
  margin-top: 0.313rem;
}

.contact-section button {
  background-color: var(--link-color);
  padding: 0.5rem 1.25rem;
  min-height: 2rem;
  border-radius: 0.125rem;
  font-family: var(--headline-font);
  font-size: 0.875rem;
  font-weight: bold;
  margin-top: 1.5rem;
}

/* Curriculum Vitae */

.wrapper.constrict {
  max-width: 33.438rem;
}

/* Exhibit */

.headline.boise-state-exhibit {
  text-align: left;
  margin-block: 0;
}

.bse-img {
  padding-block: 0.75rem;
}

/*The Stone House in the Cañon*/

.hero-section.the-house-in-the-canon {
  background-image: url('../staceyguill/images/thehouseinthecanon/1562209880.png');
  background-size: cover;
  background-position: 50% 84%;
  height: 7.813rem;
}

.info-section.inner-wrapper.the-house-in-the-canon img {
  padding-block: 0.625rem;
}

h1.the-house-in-the-canon {
  text-align: center;
  text-transform: uppercase;
  color: var(--color-01);
  font-weight: 900;
  font-size: var(--h1-font-size-l) !important;
  margin-bottom: 0;
  margin-top: 0;
  padding-inline: 0.938rem;
  line-height: 1.2;
}

.info-section.inner-wrapper.the-house-in-the-canon .image-wrapper {
  flex-basis: 75%;
}

.info-section.inner-wrapper.the-house-in-the-canon .price {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.info-section.inner-wrapper.the-house-in-the-canon .bordered-text {
  font-size: 1.5rem;
  padding-left: 1.563rem;
  margin-block: 2.5rem;
  border-left: 0.25rem solid #db3500;
}

.info-section.inner-wrapper.the-house-in-the-canon {
  padding-inline: 1.875rem;
}

/* Footer */


footer {
  background-color: var(--footer-color);
  padding-block: 1.25rem;
  padding-bottom: 8rem;
}

footer p {
  margin-block: 0;
  padding-block: 0.438rem;
  max-width: 33.438rem;
  font-size: 0.875rem;
}



@media (width >= 26.625rem ) {

  body {
    font-size: var(--body-font-size-l);
  }

  h1 {
    font-size: var(--h1-font-size-l);
  }

  h2 {
    font-size: var(--h2-font-size-l);
  }

  nav {
    height: var(--nav-height-l);
  }

  .nav-sidepanel ul li a {
    padding: 0.75rem 1.563rem;
  }

  .hero-section.hero-home,
  .hero-section.boise-state-exhibit,
  .hero-section.articles {
    height: 20.5rem;
  }

  .hero-section.the-house-in-the-canon {
    height: 12.5rem;
  }

  .inner-wrapper {
    padding-inline: var(--inner-wrapper-padding-l);
  }

  .info-section.inner-wrapper {
    display: flex;
    flex-direction: row;
  }

  .info-section.inner-wrapper section {
    padding-inline: 0.938rem;
  }

  .contact-section form {
    max-width: 25rem;
  }

  .headline.boise-state-exhibit {
    text-align: center;
    max-width: 18.75rem;
  }

  .info-section.inner-wrapper.the-house-in-the-canon {
    padding-inline: 0;
  }

}