/* Hacks and Mixins */
/* Variables */
/* Styles */
html {
  font-family: "articulat-cf", "helvetica neue", helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: light-dark(#333, #e5e5e5);
}
@media only screen and (max-width : 800px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (max-width : 500px) {
  html {
    font-size: 21px;
  }
}
html .hide {
  display: none;
}
html a {
  color: light-dark(#E60000, #FFB319);
}
html a:hover {
  color: light-dark(#FF3333, #FFCC33);
}
html .more {
  font-style: italic;
}
html em {
  font-style: italic;
}
html strong {
  font-weight: 800;
}
html body {
  background: light-dark(#fff, #1a1a1a);
}
html body #image-wrap {
  background-size: 100% auto;
  background-position: 50% 0;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  max-height: 100vw;
  height: auto;
  min-height: 100vw;
  z-index: -1;
}
@media only screen and (max-width : 500px) {
  html body #image-wrap {
    background-size: 130% auto;
  }
}
html body.dark {
  color-scheme: dark;
}
html body.light {
  color-scheme: light;
}
html #switch {
  position: fixed;
  z-index: 3;
  right: 22px;
  bottom: 22px;
}
html #switch button {
  text-align: center;
  border: 0;
  margin: 0;
  padding: 0;
  background: light-dark(rgba(238, 238, 238, 0.5), rgba(26, 26, 26, 0.5));
  backdrop-filter: blur(15px);
  display: block;
  border-radius: 12px;
}
html #switch button svg {
  margin: 6px 5px 5px 6px;
  padding: 0;
  width: 30px;
  height: 30px;
  display: block;
}
html #switch button svg path {
  fill: light-dark(rgba(26, 26, 26, 0.6), rgba(238, 238, 238, 0.6));
}
html #switch button:hover {
  cursor: pointer;
}
html #switch button:hover svg path {
  fill: light-dark(#1a1a1a, #fff);
}
html footer {
  clear: both;
  position: relative;
  z-index: 2;
  background: url(/assets/svg/texture_bits_dark.svg), url(/assets/svg/bg_grid_dark.svg), linear-gradient(180deg, light-dark(#e5e5e5, #333), light-dark(#fff, #1a1a1a));
  background-repeat: repeat-x, repeat, no-repeat;
  background-size: 30%, 25%, 100%;
  padding: 80px 0 20px 0;
  text-align: center;
}
@media only screen and (max-width : 800px) {
  html footer {
    background-size: 50%, 30%, 100%;
  }
}
@media only screen and (max-width : 500px) {
  html footer {
    background-size: 80%, 60%, 100%;
  }
}
html footer a {
  text-decoration: none;
}
html footer .about {
  width: 60vw;
  margin: 0 auto 20px auto;
}
@media only screen and (max-width : 800px) {
  html footer .about {
    width: 70vw;
  }
}
@media only screen and (max-width : 500px) {
  html footer .about {
    width: 90vw;
  }
}
html footer .about img {
  display: block;
  width: 250px;
  height: 250px;
  margin: 0 auto 20px auto;
  border-radius: 150px;
  border: 15px solid light-dark(#ccc, #4c4c4c);
}
html footer .about h2 {
  font-family: "veneer-three", sans-serif;
  font-weight: 400;
  font-size: 1.667em;
  font-style: italic;
  color: light-dark(#1a1a1a, #fff);
  line-height: 1em;
  margin-bottom: 0.5em;
}
html footer .about p {
  margin-bottom: 1em;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
  color: light-dark(#333, #e5e5e5);
}
html footer .about p a {
  font-weight: 600;
}
html footer .about .more a svg {
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  margin-bottom: 0.2em;
}
html footer .about .more a svg path {
  fill: light-dark(#E60000, #FFB319);
}
html footer .about .more a:hover svg path {
  fill: light-dark(#FF3333, #FFCC33);
}
html footer .tfr svg {
  width: 10vw;
  height: auto;
  margin-bottom: 40px;
}
@media only screen and (max-width : 800px) {
  html footer .tfr svg {
    width: 15vw;
  }
}
@media only screen and (max-width : 500px) {
  html footer .tfr svg {
    width: 20vw;
  }
}
html footer nav {
  text-align: center;
}
html footer nav ul {
  width: 90vw;
  margin: 0 auto;
}
@media only screen and (max-width : 500px) {
  html footer nav ul {
    width: 33vw;
    margin-bottom: 10vw;
  }
}
html footer nav ul li {
  display: inline;
  margin: 0 2vw;
  font-family: "veneer-three", sans-serif;
  font-weight: 400;
  font-size: 1.33em;
  font-style: italic;
  text-transform: uppercase;
}
@media only screen and (max-width : 500px) {
  html footer nav ul li {
    display: block;
    text-align: left;
    margin-bottom: 20px;
  }
}
html footer nav ul li a {
  transition: all 0.2s ease-in-out;
}
html footer nav ul li a .icon {
  background-color: light-dark(#E60000, #FFB319);
  width: 1.3em;
  margin-right: 0.15em;
  margin-bottom: 0;
  padding: 2px 0;
  height: auto;
  display: inline-block;
  -webkit-mask-image: url(/assets/svg/nav_works.svg);
  mask-image: url(/assets/svg/nav_works.svg);
  mask-repeat: no-repeat;
  mask-size: 1.5em;
  mask-position: 50% 50%;
  transition: all 0.2s ease-in-out;
}
html footer nav ul li a .icon.shop {
  -webkit-mask-image: url(/assets/svg/nav_shop.svg);
  mask-image: url(/assets/svg/nav_shop.svg);
}
html footer nav ul li a .icon.works {
  -webkit-mask-image: url(/assets/svg/nav_works.svg);
  mask-image: url(/assets/svg/nav_works.svg);
}
html footer nav ul li a .icon.blog {
  -webkit-mask-image: url(/assets/svg/nav_blog.svg);
  mask-image: url(/assets/svg/nav_blog.svg);
}
html footer nav ul li a .icon.about {
  -webkit-mask-image: url(/assets/svg/nav_about.svg);
  mask-image: url(/assets/svg/nav_about.svg);
}
html footer nav ul li a .icon.member {
  -webkit-mask-image: url(/assets/svg/nav_member.svg);
  mask-image: url(/assets/svg/nav_member.svg);
}
html footer nav ul li a:hover {
  color: light-dark(#1a1a1a, #fff);
}
html footer nav ul li a:hover .icon {
  background-color: light-dark(#1a1a1a, #fff);
}
html footer #social li {
  display: inline-block;
  margin: 40px;
}
@media only screen and (max-width : 500px) {
  html footer #social li {
    margin: 20px;
  }
}
html footer #social li a svg path {
  fill: light-dark(#7f7f7f, #999);
  transition: all 0.2s ease-in-out;
}
html footer #social li a:hover svg path {
  fill: light-dark(#333, #e5e5e5);
}
html footer .rss {
  margin-bottom: 5px;
}
html footer .rss a {
  display: inline-block;
}
html footer .rss a svg {
  width: 45px;
  height: auto;
}
html footer .rss a svg path {
  fill: light-dark(#E60000, #FFB319);
  transition: all 0.2s ease-in-out;
}
html footer .rss a:hover svg path {
  fill: light-dark(#FF3333, #FFCC33);
}
html footer .copyright {
  color: light-dark(#b2b2b2, #666);
  font-size: 0.667em !important;
  line-height: 1.5em;
  text-transform: uppercase;
  font-style: italic;
  margin: 0 20px;
}
html footer .copyright em {
  font-weight: 800;
}
html footer .copyright a {
  color: light-dark(#7f7f7f, #999);
  text-decoration: underline;
}
html .light footer {
  background: url(/assets/svg/texture_bits_light.svg), url(/assets/svg/bg_grid_light.svg), linear-gradient(180deg, light-dark(#e5e5e5, #333), light-dark(#fff, #1a1a1a));
  background-repeat: repeat-x, repeat, no-repeat;
  background-size: 30%, 25%, 100%;
}
@media only screen and (max-width : 800px) {
  html .light footer {
    background-size: 50%, 30%, 100%;
  }
}
@media only screen and (max-width : 500px) {
  html .light footer {
    background-size: 80%, 60%, 100%;
  }
}

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