* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body, html {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #121212;
  background: -webkit-linear-gradient(to bottom, #434343, #121212);
  background: linear-gradient(to bottom, #434343, #121212);
}
.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('../images/noise.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
}
@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

main {
  cursor: -webkit-grab;
  cursor: grab;
  width: 960px;
  height: 540px;
  flex-shrink: 0;
  background-image: url('../images/bg.jpg');
  background-size: cover;
  background-position: 100% 50%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
  border: 1px groove rgba(255, 255, 255, .2);
  top: -50px;
}

canvas {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-mode: luminance;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-backdrop-filter: hard-light;
          backdrop-filter: hard-light;
  -webkit-mask-image: url('../images/mask.png');
  -moz-mask-image: url('../images/mask.png');
  mask-image: url('../images/mask.png');
}

.mask-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg.jpg') 0% 0% repeat;
  background-size: cover;
  background-position: 100% 50%;
  filter: url(#heat);
  -webkit-mask-image: url('../images/mask.png');
  -moz-mask-image: url('../images/mask.png');
  mask-image: url('../images/mask.png')
}

.button_container {
  margin: 40px auto;
  position: fixed;
  bottom: 0;
}

.button {
  height: 40px;
  width: 200px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  background: #FFFFFF;
  border-radius: 12px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  color: #000000;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 1px 0 hsl(200,5%,80%),
              0 2px 0 hsl(200,5%,75%),
              0 3px 0 hsl(200,5%,70%),
              0 4px 0 hsl(200,5%,66%),
              0 5px 0 hsl(200,5%,64%),
              0 6px 0 hsl(200,5%,62%),
              0 7px 0 hsl(200,5%,61%),
              0 8px 0 hsl(200,5%,60%),
              0 0 5px rgba(0,0,0,.05),
            0 1px 3px rgba(0,0,0,.2),
            0 3px 5px rgba(0,0,0,.2),
            0 5px 8px rgba(0,0,0,.2);
}
.button:hover {
  background: #EFEFEF;
}
.button:first-child {
  margin-right: 24px;
}
.button .input {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-appearance: none;
  display: inline-block;
  height: 100%;
  width: 100%;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}