html {
  --c-background: #1a1919;
  --c-text: #cac5c1;
  --c-link: #dd502a; 
  --gap: .5em;
  font-size: 16px;;
  font-family: 'Hubot Sans', Arial, Helvetica, sans-serif;
  background-color: var(--c-background);
  color: var(--c-text);
}

*::selection {
  background-color: var(--c-link);
}

#app {
  opacity: 1;
  transition: opacity .4s;
}

#app.loading {
  opacity: 0;
}

#hero {
  position: relative;
  width: 100%;
  height: 100svh;
  background-size: cover;
  background-position: center;
  filter: none;
  transition: filter .8s;
}

#hero.loading {
  filter: blur(16px);
}

#hero-image-loader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

#hero-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1em;
  background: rgba(0, 0, 0, .4);
}

#hero-logo {
  max-width: 24em;
  max-height: 100%;
}

.content-container {
  width: 100%;
}

.content-section {
  max-width: 64em;
  margin: 0 auto;
  padding: var(--gap);
}

.content-section.centered {
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  display: block;
  width: 100%;
}

a {
  color: var(--c-link);
  text-decoration: none;
}

a::selection {
  color: var(--c-text);
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

.saw {
  position: relative;
  width: 6em;
  height: 4em;
  overflow: hidden;
}

.saw-handle {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--c-text);
  mask-image: url('img/saw-handle.svg');
  mask-repeat: no-repeat;
  mask-position: center;
}

@keyframes saw-blade {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.saw-blade {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--c-text);
  mask-image: url('img/saw-blade.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  animation: saw-blade infinite 1.5s linear;
}