* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* 62.5 percent of the default font size which is 16px is 10px */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;

  overflow-x: hidden;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #224722;

  /* all the elements that overflow the viewport (like the mobile nav bar) in the x-axis or horizontally will simply be hidden, we need to set it on the body and the html*/

  /* this also only works if there is nothing absolutely positioned in relation to body */
  /* overflow-x: hidden; */
}

main {
  background-color: rgb(231, 237, 222);
}

.heading-secondary {
  text-align: center;
  font-size: 6rem;
  font-weight: 600;
  margin-bottom: 6.4rem;
}

.margin-right-sm {
  margin-right: 1.6rem !important;
}

.container {
  max-width: 111rem;
  margin: 0 auto;
}

.container-gal {
  max-width: 115rem;
  margin: 0 auto;
}

.container-unique {
  max-width: 115rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 11.2rem;
  row-gap: 12.8rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--center-v {
  align-items: center;
}

.padding-side-sm {
  padding-right: 20px;
  padding-left: 20px;
}

.padding-bottom-md {
  padding-bottom: 15rem;
}

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-row {
  display: flex;
  justify-content: space-between;
}

.flex-unique {
  display: flex;
  justify-content: space-between;
}

.align-self-end {
  align-self: flex-end;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.on-top {
  z-index: 100;
}

.padding-sm {
  padding: 1.6rem;
}