@font-face
{
  font-family: 'youngserif';
  src:
    url('/fonts/youngserif-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face
{
  font-family: 'bitter';
  src:
    url('/fonts/bitter-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face
{
  font-family: 'bitter';
  src:
    url('/fonts/bitter-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face
{
  font-family: 'bitter';
  src:
    url('/fonts/bitter-bold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face
{
  font-family: 'bitter';
  src:
    url('/fonts/bitter-bolditalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

:root
{
  /* Fonts */
  --sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --headings: youngserif, Georgia, serif;
  --body: bitter, Georgia, serif;

  /* Colors */
  --background: #080f24;
  --red: #ea3329;
  --orange: #eb6a2c;
  --yellow: #f29c38;
  --lightyellow: #ffd321;
  --green: #75fb4c;
  --blue: #0C8CFE;
  --royalheather: #37519b;
  --purple: #e532ad;
  
  --strong-background: #182241;
  --background-alpha: #213c4ecc;
  --background: #213c4e;
  --subtle-background: #4c626f;
  --subtle-foreground: #7b949c;
  --foreground: #fff5d9;
  --foreground-alpha: #fff5d9cc;
  --strong-foreground: #fff;
}

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

html
{
  font-size: 1vw;
}

body
{
  font-size: 3rem;
}

@media (min-width: 670px)
{
  body
  {
    font-size: 2.4rem;
  }
}

@media (min-width: 1000px)
{
  html
  {
    font-size: 10px;
  }
}

html
{
  padding;
  0;
}

body
{
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  background-color: var(--background);
  color: var(--foreground);
  margin: 0;
}

a
{
  color: inherit;
}

#topNav
{
  background: var(--foreground);
  color: var(--background);
  display: grid;
  gap: .5em;
  padding: 1em;
  grid-template-columns: 1fr auto auto auto auto;
  place-items: center;
}

#topNav a
{
  color: var(--subtle-background);
  text-decoration: none;
}

#topNav a#home
{
  position: relative;
  font-family: var(--headings);
  justify-self: start;
  font-size: 1.25em;
}

#topNav a#donate
{
  border-radius: 2em;
  padding: 1em 2em;
  background: var(--background);
  color: var(--foreground);
  
}


div.wrapper
{
  margin: 2em auto;
  color: white;
  display: grid;
  max-width: calc(100vw - 2em);
}

#success div.wrapper,
#canceled div.wrapper
{
  place-self: center;
  place-content: center;
}

#success div.wrapper h1,
#success div.wrapper p,
#canceled div.wrapper h1,
#canceled div.wrapper p
{
  text-align: center;
  margin: 0 auto;
}

#success div.wrapper p,
#canceled div.wrapper p
{
  font-size: 1.5em;
  margin: 1em auto 0 auto;
  ;
}

details
{
  margin: 2em 0;
}

div.wrapper header
{
  margin: 0 auto;
}

h1
{
  margin: 0 auto;
  color: var(--foreground);
  font-family: var(--headings);
  font-weight: normal;
}

#llewellyn-gear-form
{
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(auto-fit, 24em);
  margin: 2em 0;
  place-content: center;
}

.item
{
  position: relative;
  display: grid;
  grid-gap: 1rem;
  margin: 0;
  border-radius: 1em;
  box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .25);
  overflow: hidden;
  padding: 0;
  background-color: var(--foreground);
  color: var(--background);
  background-position: 50% 50%;
  background-size: auto 100%;
  background-repeat: no-repeat;

}

.item .item-header
{
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  padding: .5em;
  background-color: var(--foreground-alpha);
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  line-height: 1;
  font-size: 2em;
  font-family: var(--headings);

}

.item-header,
.more-info
{
  justify-self: start;
  margin: 0;
  padding: .5em;
  background-color: var(--foreground-alpha);
  width: 100%;
  display: grid;
  place-content: center;
}

.item#hoody-kids,
.item#hoody-adult
{
  background-size: contain;
}

.item#donations
{
  background-color: var(--subtle-foreground);
  background-image: url("/img/2-color-yellow-transparent.png");
  background-size: contain;
}

.item#donations .item-header
{
  grid-template-columns: auto;
}

.item-title
{
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  justify-self: start;
}

.item-price
{
  justify-self: end;
  align-items: center;
  position: relative;
  display: flex;
}

#shirt-kids .item-price
{
  cursor: pointer;
}

#shirt-kids .item-price::after
{
  content: "▼";
  font-size: 0.5em;
  pointer-events: none;
}

.item-price-control
{
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: inherit;
  text-align: right;
  display: block;
  margin-right: -0.5em;
  padding-right: 0.5em;
}

.item::before
{
  grid-column: 1;
  grid-row: 2;
  content: "";
  height: 12em;
  width: 12em;
  place-self: center;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.more-info
{
  grid-column: 1;
  grid-row: 4;
}

/* #label-shirt-kids-price::after
{
  position: absolute;
  top: 50%;
  transform: translate(-50%); 
  right: -.65em;
  height: .25em;
  width: .5em;
  background: transparent;  
  content: "";
  border-right: .25em solid transparent; 
  border-left: .25em solid transparent; 
  border-top: .5em solid; 
  border-bottom: .5em solid transparent; 

} */

.item#shirt-kids
{
  background-image: url("/img/kids-shirt.png");
}

.item#hoody-kids
{
  background-image: url("/img/hoody.png");
}

.item#shirt-adult
{
  background-image: url("/img/adult-shirt.png");
}

.item#hoody-adult
{
  background-image: url("/img/hoody.png");
}

.item#beanie
{
  background-image: url("/img/beanie.png");
}

.quantities
{
  grid-column: 1;
  grid-row: 3;
  display: flex;
  justify-self: center;
  align-items: center;
  justify-items: space-evenly;
  font-size: 1.25em;
}

.labeled-quantity
{
  margin: 1em auto;
}

.labeled-quantity label
{
  display: grid;
  grid-gap: .2rem;
  justify-items: center;
  align-items: center;
  grid-row: 2;
  grid-column: 1;
}

.labeled-quantity label .size
{
  grid-column: 1;
  grid-row: 2;
  background-color: black;
  color: white;
  border-radius: 1em;
  padding: .25em .35em .15em .35em;
  min-width: 6rem;
  text-align: center;
  box-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, .25);
  cursor: pointer;
  font-family: var(--headings);
}

.labeled-quantity label input
{
  font: inherit;
  grid-column: 1;
  grid-row: 1;
  -webkit-appearance: none;
  -appearance: none;
  border: 0.125em solid;
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
}

.labeled-quantity label .size+input,
body div#order-summary
{
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
}

.labeled-quantity label .size.active+input,
body.checkout div#order-summary
{
  opacity: 1;
  pointer-events: all;
}

#label-shirt-kids-xs .size,
#label-hoody-kids-xs .size,
#label-shirt-adult-xs .size,
#label-hoody-adult-xs .size
{
  background-color: var(--red);
}

#label-shirt-kids-sm .size,
#label-hoody-kids-sm .size,
#label-shirt-adult-sm .size,
#label-hoody-adult-sm .size,
#label-donate-5 .size
{
  background-color: var(--orange);
}

#label-shirt-kids-md .size,
#label-hoody-kids-md .size,
#label-shirt-adult-md .size,
#label-hoody-adult-md .size,
#label-donate-10 .size
{
  background-color: var(--yellow);
}

#label-shirt-kids-lg .size,
#label-hoody-kids-lg .size,
#label-shirt-adult-lg .size,
#label-hoody-adult-lg .size,
#label-donate-25 .size
{
  background-color: var(--green);
}

#label-shirt-kids-xl .size,
#label-hoody-kids-xl .size,
#label-shirt-adult-xl .size,
#label-hoody-adult-xl .size,
#label-donate-50 .size
{
  background-color: var(--blue);
}

#label-shirt-kids-2x .size,
#label-hoody-kids-2x .size,
#label-shirt-adult-2x .size,
#label-hoody-adult-2x .size
{
  background-color: var(--purple);
}

#beanie .labeled-quantity
{
  grid-column: 1;
}

#order-summary
{
  position: fixed;
  display: grid;
  align-items: center;
  justify-items: end;
  bottom: 0;
  right: 0;
  padding: 1em;
}

button#checkout
{
  background: var(--lightyellow);
  color: var(--royalheather);
  color: black;
  border: 0;
  font: inherit;
  font-family: var(--headings);
  border-radius: .8em;
  display: inline-block;
  padding: .25em 1em .25em 1em;
  font-size: 2.4em;
  box-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, .25);
  cursor: pointer;
  transition-property: transform, box-shadow;
  transition-duration: 0, 150ms;
  transition-timing-function: ease-in-out;
}

#error-message
{
  color: var(--red);
  background: white;
  margin-top: 1em;
}

button#checkout:active
{
  transform: scale(.985);
  box-shadow: 0 0.03125em 0.125em rgba(0, 0, 0, .5);
}

header,
footer
{
  text-align: center;
}