/*! 
Theme Name: HaH!
Theme URI: https://hahchili.com/
Author: Donny Truong
Version: 1
*/
@font-face {
  src: url("/fonts/NaNRageSoftStandard-Regular.woff2") format("woff2");
  font-family: "NaN Rage Soft";
  font-style: normal;
  font-display: swap;
}
@font-face {
  src: url("/fonts/NaNRageQuikXCondensed-ExtraBold.woff2") format("woff2");
  font-family: "NaN Rage Quik";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  src: url("/fonts/NaNRageQuikStandard-Regular.woff2") format("woff2");
  font-family: "NaN Rage Quik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@viewport {
  width: device-width;
}
:root {
  font-size: 100%;
}

html {
  hanging-punctuation: first last;
}

body {
  font: 125%/1.5 "NaN Rage Soft", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  background-color: #d7c6ad;
  color: #333;
  padding: 0;
  margin: 0 auto;
  text-align: left;
  font-variant-ligatures: common-ligatures;
}

a {
  color: #333;
}

a:visited, a:active {
  color: #333;
}

a:hover, .out-of-stock {
  color: #aa1100;
}

img {
  width: 100%;
  vertical-align: middle;
  height: auto;
}

header {
  padding: 0 0 2em 0;
  margin: 0;
  text-align: center;
}

#hah {
  width: 200px;
}

.hah-logo, .hot-as-hell {
  fill: #333;
}

nav {
  padding-top: 1em;
}
nav ul {
  font-family: "NaN Rage Quik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
nav ul li {
  display: inline;
  padding: 0 0.5em;
}
nav ul li a {
  text-decoration: none;
}
nav ul li[aria-current=page] a {
  color: #aa1100;
}

ul, dd, ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul li li, ol li li {
  margin: 0 0 0 1em;
}

[role=presentation] {
  padding: 0;
  margin: 0;
}

#hot-as-hell {
  vertical-align: bottom;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .price {
  font-family: "NaN Rage Quik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  padding: 0;
  line-height: 1.15;
  margin: 2em 0 0 0;
  /*max-inline-size: 50ch;
  text-wrap: balance;*/
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 1.2em;
}

[role=banner] {
  padding: 0;
  text-align: center;
}

[role=banner] img {
  width: 100px;
}

p {
  margin: 0;
  padding: 0.4em 0;
  text-wrap: pretty;
}

footer p {
  font-size: 0.8em;
}

.price {
  padding: 0;
  margin: 1em 0 0 0;
  font-size: 1.5em;
}

.bottle-size {
  font-size: 0.8em;
}

.button a {
  background: #333;
  padding: 0.5em 1em;
  color: #fff;
  text-decoration: none;
}

.wrap {
  margin: auto;
  padding: 1em;
}

blockquote {
  margin: 0;
  padding: 0 0 2em 0;
}

blockquote p {
  font-family: "NaN Rage Quik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 125%;
  line-height: 1.25;
}

blockquote footer {
  text-align: right;
  padding: 0;
}

blockquote footer cite {
  font-style: normal;
}

.gallery img {
  padding: 0.5em 0;
}

@media only screen and (min-width: 45em) {
  .wrap {
    max-width: 50em;
  }
  #hah {
    width: 300px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
  }
  .gallery {
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1em;
  }
  /*[role="presentation"] {text-align: left; }*/
  [role=banner] img {
    width: 250px;
  }
  #header {
    margin-top: 50%;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: #222;
    color: #d7c6ad;
  }
  .hah-logo, .hot-as-hell {
    fill: #d7c6ad;
  }
  a {
    color: #d7c6ad;
  }
  a:visited, a:active {
    color: #d7c6ad;
  }
  a:hover {
    color: #ed5443;
  }
  .button a {
    background: #ed5443;
    color: #fff;
  }
  .out-of-stock {
    color: #ed5443;
  }
  nav {
    padding-top: 1em;
  }
  nav ul li[aria-current=page] a {
    color: #ed5443;
  }
}

/*# sourceMappingURL=style.css.map */