* {
  margin: 0;
  padding: 0;
}

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

html {
  background: $color-black;
  color: $color-white;
  font-size: calc(100vw / 1920 * 10);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  user-select: none;
  width: 100%;
}

body {
  font-family: 'halyard-display', sans-serif;
  font-size: 15px;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;

  &:after {
    animation: grain 6s steps(10) infinite;
    background-image: url('../images/grain.png');
    background-repeat: repeat;
    content: '';
    height: 300%;
    left: -100%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: -100%;
    transition: opacity 0.4s ease;
    width: 300%;
    will-change: transform;
    z-index: 3;
  }

  .loaded &:after {
    opacity: 0.06;
  }
}

body #cdawrap {
  --cda-bottom: 3rem;
  --cda-left: 3rem;
  --cda-width: 400px;
  --cda-footer-fontsize: initial;
  --cda-footer-color: rgba(255,255,255,0.5);
}

body #cdawrap a:hover {
  text-decoration: none;
  opacity: 0.7;
}

img {
  display: block;
}

canvas {
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 1s ease;
  width: 100%;

  .loaded & {
    opacity: 1
  }
}

a {
  @extend %link--hidden;

  color: $color-white;
  outline: none;
  text-decoration: none;

  &:hover,
  &:focus {
    outline: none;
  }
}

@keyframes grain {
  0% { transform: translate(20%, -15%) }
  10% { transform: translate(-20%, -15%) }
  20% { transform: translate(20%, -5%) }
  30% { transform: translate(-20%, -5%) }
  40% { transform: translate(20%, 5%) }
  50% { transform: translate(-20%, 5%) }
  60% { transform: translate(20%, 15%) }
  70% { transform: translate(-20%, 15%) }
  80% { transform: translate(20%, 5%) }
  90% { transform: translate(-20%, 5%) }
  100% { transform: translate(20%, -5%) }
}
