/* Headers via https://patorjk.com/software/taag/#p=display&f=Doh */

/* Variables */

:root {
    --zero-spacer: 0rem; /* 0px */
    --one-spacer: 0.9375rem; /* 15px */
    --two-spacer: 1.25rem; /* 20px */
    --three-spacer: 1.875rem; /* 30px */
    --four-spacer: 2.5rem; /* 40px */
    --five-spacer: 3.75rem; /* 60px */
    --six-spacer: 8.125rem; /* 130px */
    --standard-horiz-spacer: var(--two-spacer); /* 20px */
    --standard-vert-spacer: var(--two-spacer); /* 20px */
    --max-width: 1600px;
}

/* Position/Positions/Positioning */

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.p-sticky {
  position: sticky;
}

@media screen and (min-width: 1080px) {

  .p-lg-relative {
    position: relative;
  }
  
  .p-lg-absolute {
    position: absolute;
  }
  
  .p-lg-sticky {
    position: sticky;
  }

}

/* Ratio Wrappers
Use these for content that needs to always display at a specific ratio;
inner element then gets the classes 'p-absolute w-100 h-100 top-0 left-0' */
                                                                                                                                                                             

.wrapper-1x1 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.wrapper-4x3 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.wrapper-16x9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.wrapper-2x1 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

.mx-1-children > * {
  margin-left: var(--one-spacer);
  margin-right: var(--one-spacer);
}

.my-1-children > * {
  margin-top: var(--one-spacer);
  margin-bottom: var(--one-spacer);
}

.ml-1-children > * {
  margin-left: var(--one-spacer);
}

.mt-1-children > * {
  margin-top: var(--one-spacer);
}

.mr-1-children > * {
  margin-right: var(--one-spacer);
}

.mb-1-children > * {
  margin-bottom: var(--one-spacer);
}

.mx-2-children > * {
  margin-left: var(--two-spacer);
  margin-right: var(--two-spacer);
}

.my-2-children > * {
  margin-top: var(--two-spacer);
  margin-bottom: var(--two-spacer);
}

.ml-2-children > * {
  margin-left: var(--two-spacer);
}

.mt-2-children > * {
  margin-top: var(--two-spacer);
}

.mr-2-children > * {
  margin-right: var(--two-spacer);
}

.mb-2-children > * {
  margin-bottom: var(--two-spacer);
}

.mx-3-children > * {
  margin-left: var(--three-spacer);
  margin-right: var(--three-spacer);
}

.my-3-children > * {
  margin-top: var(--three-spacer);
  margin-bottom: var(--three-spacer);
}

.ml-3-children > * {
  margin-left: var(--three-spacer);
}

.mt-3-children > * {
  margin-top: var(--three-spacer);
}

.mr-3-children > * {
  margin-right: var(--three-spacer);
}

.mb-3-children > * {
  margin-bottom: var(--three-spacer);
}

.mx-4-children > * {
  margin-left: var(--four-spacer);
  margin-right: var(--four-spacer);
}

.my-4-children > * {
  margin-top: var(--four-spacer);
  margin-bottom: var(--four-spacer);
}

.ml-4-children > * {
  margin-left: var(--four-spacer);
}

.mt-4-children > * {
  margin-top: var(--four-spacer);
}

.mr-4-children > * {
  margin-right: var(--four-spacer);
}

.mb-4-children > * {
  margin-bottom: var(--four-spacer);
}

.mx-5-children > * {
  margin-left: var(--five-spacer);
  margin-right: var(--five-spacer);
}

.my-5-children > * {
  margin-top: var(--five-spacer);
  margin-bottom: var(--five-spacer);
}

.ml-5-children > * {
  margin-left: var(--five-spacer);
}

.mt-5-children > * {
  margin-top: var(--five-spacer);
}

.mr-5-children > * {
  margin-right: var(--five-spacer);
}

.mb-5-children > * {
  margin-bottom: var(--five-spacer);
}

.border-left-none {
  border-left: none;
}

.border-none {
  border: none;
}

.border-top-none {
  border-top: none;
}

.border-right-none {
  border-right: none;
}

.border-bottom-none {
  border-bottom: none;
}

.border-1 {
  border: 1px solid;
}

.border-left-1 {
  border-left: 1px solid;
}

.border-top-1 {
  border-top: 1px solid;
}

.border-right-1 {
  border-right: 1px solid;
}

.border-bottom-1 {
  border-bottom: 1px solid;
}

.border-radius-none {
  border-radius: none;
}

.border-radius-5 {
  border-radius: 5px;
}

.border-radius-10 {
  border-radius: 10px;
}

@media screen and (min-width: 1080px) {
  .border-lg-none {
    border: none;
  }

  .border-left-lg-none {
    border-left: none;
  }
  
  .border-top-lg-none {
    border-top: none;
  }
  
  .border-right-lg-none {
    border-right: none;
  }

  .border-bottom-lg-none {
    border-bottom: none;
  }

  .border-lg-1 {
    border: 1px solid;
  }
  
  .border-left-lg-1 {
    border-left: 1px solid;
  }
  
  .border-top-lg-1 {
    border-top: 1px solid;
  }
  
  .border-right-lg-1 {
    border-right: 1px solid;
  }
  
  .border-bottom-lg-1 {
    border-bottom: 1px solid;
  }

  .border-radius-lg-none {
    border-radius: none;
  }
  
  .border-radius-lg-10 {
    border-radius: 10px;
  }
}