:root {
  --font-size-small: 0.75rem;
  --font-size-normal: 1rem;
  --font-size-header: 1.875rem;
  --font-family: Inter, sans-serif;

  --font-weight-normal: 400;
  --font-weight-bold: 600;

  --color-white: #ffffff;
  --color-background: var(--color-white);
  --color-primary: #928954;
  --color-primary-dark: #745F00;
  --color-primary-accent: #E5E2D6;

  --border-radius-large: 1rem;
  --border-radius-medium: 1.5rem;
  --border-radius-small: 0.5rem;

  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;

  --font-color-medium-emphasis: rgba(46, 46, 32, 0.75);
  --font-color-default: rgb(46, 46, 32);

  --size-48: 3rem;
  --spacing-16: 1rem;
  --spacing-8: 0.5rem;

  --max-width-content: 80ch;
}

* {
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  font-style: normal;
  font-weight: var(--font-weight-normal);
  line-height: normal;

}

html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--color-background);
  color: var(--font-color-default);
}

strong{
  font-weight: var(--font-weight-bold);
  color: var(--font-color-default);
}

p {
  /*margin: 0; */
  padding: 0;
  max-width: 80ch;
}

h1 {
  font-size: var(--font-size-normal);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: normal;
}

h2 {
  font-size: var(--font-size-header);
  font-style: normal;
  line-height: normal;
  align-self: stretch;
  text-align: center;
}

h3{
  font-weight: var(--font-weight-bold);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  color: var(--font-color-default);
}

a{
  line-height: 1;
  text-align: center;
}

a.link {
  display: flex;
  height: var(--size-48);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);

  color: var(--color-primary-dark);
  font-size: var(--font-size-normal);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

a.link:hover {
  color: var(--font-color-default);
}

a.textlink{
  color: var(--color-primary-dark);
}

.button-secondary, .button-white {
  display: -webkit-flex;
  display: flex;
  height: var(--size-48);
  padding: 0 1rem;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--spacing-8);
  flex: 1 0 0;
  text-decoration: none;

  font-size: var(--font-size-normal);
  font-style: normal;
  font-weight: var(--font-weight-bold);

  border-radius: var(--border-radius-small);
  border: 1px solid var(--color-primary);
  
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.button-secondary{
  background: var(--color-background);
  color: var(--color-primary-dark);
}

.button-white{
  background-color: var(--color-primary);
  color: var(--color-white);
  -webkit-tap-highlight-color: transparent;
}

.button-secondary:hover {
  background: var(--color-primary-accent);
}

.button-white:hover {
  background: var(--color-primary-dark);
}

hgroup{
  text-align: center;
}

.bottom-margin{
  margin-bottom: var(--spacing-medium);
}

/**
  * Header Styles
  */
header {
  display: flex;
  padding: 1rem 1rem 0.5rem 1rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  align-self: stretch;

  color: var(--font-color-default);

  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  background: var(--color-primary-accent);
}

header .logo {
  width: 10rem;
  height: auto;
}


.externalLinks,
.legalLinks {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-medium);
}

.legalLinks a {
  font-size: var(--font-size-small);
  color: var(--font-color-medium-emphasis);
  text-decoration: none;
}

/**
  * Navigation Styles
  */
#onPageNav {
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  flex-wrap: wrap;
}

#onPageNav .button-secondary {
  flex: 1 0 0;
  max-width: 10rem;
}

/**
  * Main Styles
  */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;

  color: var(--font-color-medium-emphasis);
}

main section {
  display: flex;
  padding: 0 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;

  gap: 1rem;
}

main>* {
  max-width: var(--max-width-content);
  padding: 0 1rem;
}

.image-collection {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 1rem;
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: center;
}

.image-collection img {
  height: auto;
  min-width: 13rem;
  max-width: 16rem;

  flex: 1 0 0;
  aspect-ratio: 9/16;

  border-radius: var(--border-radius-small);
  aspect-ratio: 9/16;
}

.divider {
  display: flex;
  height: 2rem;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.line {
  display: flex;
  height: 0.0625rem;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  background: var(--color-primary);
}

div a#backToTopButton {
  width: auto;
}

/**
  * Footer Styles
  */
footer {
  display: flex;
  padding: 1rem 1rem 0.5rem 1rem;
  margin-top: var(--spacing-medium);
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  align-self: stretch;

  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  background: var(--color-primary-accent);
}

footer #footerLogoContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

footer .logo {
  width: 4rem;
  height: auto;
}

footer a.link{
    font-size: var(--font-size-small);
}

#aboutMeSection .aboutMeImage {
  aspect-ratio: 3/4;
  height: auto;
  width: 50%;
  border-radius: var(--border-radius-small)
}

#aboutmeSection .column-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}

#aboutMeSection .description {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/*
* Commission Info images
*/
#commissionInfoImages{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-medium);
align-self: stretch;
}


#commissionInfoImages img{
  min-width: 8.75rem;
  width: 20%;
}

#commissionInfoImages .commissionInfoImage {
  display: flex;
align-items: flex-start;
gap: var(--spacing-small);
align-self: stretch;
}

.small-screen {
    display: inline-flex;
  }
 .medium-screen, .large-screen {
    display: none;
  }

/**
  * Medium Screen Styles
  */
@media screen and (min-width: 833px) {
  main>* {
    margin: auto;
  }

  .small-screen {
    display: none;
  }

   .medium-screen {
    display: inline-flex;
   }
}

/**
  * Large Screen Styles
  */
@media screen and (min-width: 1024px) {
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
  }

  #onPageNav,
  .divider {
    width: 100%;
  }

  #aboutMeSection .column-two {
   flex-direction: row;
  }

  #aboutMeSection .aboutMeImage {
    width: 40%;
  }
}