:root {
  --white: rgb(6, 36, 68);
  --main: rgb(0, 179, 214);
  --black: rgb(230, 199, 156);
  --black1: rgb(234,208,172); 
  --black2: rgb(238,217,187);
  --black3: rgb(242,226,203);
  --black4: rgb(246,234,219);
  --black5: rgb(250,243,234);
  --black6: rgb(254,252,250);
  --aux-dark: rgb(76, 91, 92);
  --aux-color: rgb(218, 85, 82);
  --aux-color: rgb(255, 76, 41);

  /* TODO: try different scaling factors for horizontal and vertical */
  --factor: 1.3333333; /* from ch */
  --factor-alt: 1.25;  /* from ex */
  /* change carrois to onest */
  --factor: 1.328;
  --factor-alt: 1.6615;
  --scale-up-1: var(--factor);
  --scale-up-2: calc(var(--factor) * var(--scale-up-1));
  --scale-up-3: calc(var(--factor) * var(--scale-up-2));
  --scale-up-4: calc(var(--factor) * var(--scale-up-3));
  --scale-up-5: calc(var(--factor) * var(--scale-up-4));
  --scale-down-1: calc(1 / var(--factor));
  --scale-down-2: calc(var(--scale-down-1) / var(--factor));
  --scale-down-3: calc(var(--scale-down-2) / var(--factor));
  --scale-down-4: calc(var(--scale-down-3) / var(--factor));
  --scale-down-5: calc(var(--scale-down-4) / var(--factor));
  --scale-down-6: calc(var(--scale-down-5) / var(--factor));
  --scale-down-7: calc(var(--scale-down-6) / var(--factor));
  --scale-down-8: calc(var(--scale-down-7) / var(--factor));
  /* TODO: try alternating factor and factor-alt */
  --scale-up-1: var(--factor);
  --scale-up-2: calc(var(--factor-alt) * var(--scale-up-1));
  --scale-up-3: calc(var(--factor) * var(--scale-up-2));
  --scale-up-4: calc(var(--factor-alt) * var(--scale-up-3));
  --scale-up-5: calc(var(--factor) * var(--scale-up-4));
  --scale-down-1: calc(1 / var(--factor));
  --scale-down-2: calc(var(--scale-down-1) / var(--factor-alt));
  --scale-down-3: calc(var(--scale-down-2) / var(--factor));
  --scale-down-4: calc(var(--scale-down-3) / var(--factor-alt));
  --scale-down-5: calc(var(--scale-down-4) / var(--factor));
  --scale-down-6: calc(var(--scale-down-5) / var(--factor-alt));
  --scale-down-7: calc(var(--scale-down-6) / var(--factor));
  --scale-down-8: calc(var(--scale-down-7) / var(--factor-alt));

  --temp-rlg-col: var(--black1);
  --rlg-size:  calc(1rem * var(--scale-down-3));
  --rlg-size2: calc(1rem * var(--scale-down-2));
  --bg-pattern-a: repeating-linear-gradient(
      30deg,
      transparent, 
      transparent var(--rlg-size),
      var(--temp-rlg-col) var(--rlg-size2));
  --bg-pattern-b: repeating-linear-gradient(
      60deg, 
      transparent, 
      transparent var(--rlg-size),
      var(--temp-rlg-col) var(--rlg-size2));


  --rlg-size-small: calc(1rem * var(--scale-down-6));
  --rlg-size-med:   calc(1rem * var(--scale-up-4));
  --rlg-size-large: calc(1rem * var(--scale-up-5));
  --rlg-small: repeating-linear-gradient(
      45deg, var(--black), var(--aux-color)
      var(--rlg-size-small));
  --rlg-small-contrast: repeating-linear-gradient(
      45deg, var(--black), var(--main)
      var(--rlg-size-small));
  
  --rlg-med: repeating-linear-gradient(
      45deg, var(--black1), var(--main)
      var(--rlg-size-med));
  --rlg-large: repeating-linear-gradient(
      45deg, var(--black), var(--main)
      var(--rlg-size-large));
  
  --title-font: 'Bebas';
  --body-font: 'Onest';
}

@font-face {
  font-family: 'Bebas';
  src: url("assets/BebasNeue-Regular.ttf");
}
@font-face {
  font-family: 'Onest';
  src: url("assets/Onest-VariableFont_wght.ttf");
}
/* 
#tf {
  font-family: var(--title-font);
  font-size: 1rem;
  width: 1ch;
  height: 1ex;
}
#bf {
  font-family: var(--body-font);
  font-size: 1rem;
  width: 1ch;
  height: 1ex;
} */

body {
  background: var(--bg-pattern-a), var(--bg-pattern-b) var(--black);
  color: var(--white);
  margin: 0;
  font-size: 1rem;
  font-family: var(--body-font);
}

h1 {
  margin: 0;
  padding: 0;
  padding-left: calc(1rem * var(--scale-down-1));
  padding-top: calc(1rem * var(--scale-down-3));
  font-family: var(--title-font);
  font-size: calc(1rem * var(--scale-up-3));
  font-weight: bold;
  background: var(--black);
}
h2 {
  margin: 0;
  padding: 0;
  font-family: var(--title-font);
  font-size: calc(1rem * var(--scale-up-2));
}
h3 {
  margin: 0;
  padding: 0;
  font-family: var(--title-font);
  font-size: calc(1rem * var(--scale-up-1));
  letter-spacing: calc(1rem * var(--scale-down-8));
}
h4 {
  margin: 0;
  padding: 0;
  font-family: var(--title-font);
  font-size: 1rem;
  color: var(--aux-dark);
}

p {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: calc(1rem * var(--factor));
  background: var(--black);
}

nav {
  display: inline-flex;
  background: var(--black);
  background: transparent;
}

nav > .nav-link-container + .nav-link-container {
  margin-left: calc(1rem * var(--scale-down-1));
}
.nav-link-container {
  background: var(--black);
  display: flex;
  align-items: center;
}


.nav-link {
  background: var(--black);
  color: var(--white);
  padding: calc(1rem * var(--scale-down-2));
}
.nav-link > * {
  color: var(--white);
  background: var(--black);
}
.nav-link > a {
  padding: calc(1rem * var(--scale-down-3)), calc(1rem * var(--scale-down-2));

}
.nav-link:hover {
  background: var(--rlg-small);
}

.description {
  padding: calc(1rem * var(--scale-down-2));
  border-bottom: 2px solid var(--black2);
  border-top: 2px solid var(--black2);
}
.description > p {
  background-color: var(--black);
}

#email-signup {
  padding: calc(1rem * var(--scale-down-2));
  border: 2px solid var(--black2);
  max-width: 30ch;
}
#email-signup > p {
  font-size: 1rem;
}
.email-signup-label {
  font-family: var(--title-font);
  font-size: 1rem;
  color: var(--aux-dark);
}

main {
  margin-top: calc(1rem * var(--scale-down-1));
  display: flex;
  flex-direction: row;
}

#announcement-container {
  /* margin-left: calc(1rem * var(--scale-down-1)); */
  margin-right: calc(1rem * var(--scale-down-1));
}
#announcement-container > * + * {
  margin-top: calc(1rem * var(--scale-down-2));
}

.main-item {
  max-width: 90ch;
  border: 2px solid var(--black2);
  padding: calc(1rem * var(--scale-down-2));
}

.main-item-overlay {
  background: var(--black);
}

.main-item-title-bg {
  /* background: var(--rlg-large); */
  background-color: var(--aux-color);
  padding-bottom: calc(1rem * var(--scale-down-4));
  margin-bottom: calc(1rem * var(--scale-down-3));
}

.main-item-title {
  background: var(--black);
}

.main-item-body {
  padding: calc(1rem * var(--scale-down-1));
  padding-top: 0;
}

.products-container {
  display: flex;
  flex-direction: row;
  margin-top: calc(1rem * var(--scale-down-1));
}

.product {
  --size-var: calc(10rem * var(--scale-up-3));
  min-width: var(--size-var);
  max-width: var(--size-var);
  min-height: var(--size-var);
  max-height: var(--size-var);
  background: var(--rlg-small-contrast);
  background: var(--rlg-med);
  padding: calc(1rem * var(--scale-down-1));
  margin-left: calc(1rem * var(--scale-up-3));
}

.product-overlay {
  background: var(--black);
  background-size: 100%, 100%;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-overlay > img {
  object-fit: contain;
  max-width: 60%;
  max-height: 60%;
}

.product-header-overlay {
  opacity: 80%;
  background-color: var(--black4);
  padding: calc(1rem * var(--scale-down-6));
}

.product-subheader-overlay {
  opacity: 75%;
  background-color: var(--black);
  padding: calc(1rem * var(--scale-down-8));
}

.product-description {
  background-color: var(--black4);
  opacity: 80%;
  padding: calc(1rem * var(--scale-down-3));
}