/**
 * @fileoverview Some css duh.
 */

/**
 * Load a custom font.
 */
@font-face {
  font-family: Belissa;
  src: url(https://hugbug.io/starve/css/belisa_plumilla.ttf);
}

#snap-3d-canvas {
  width: 1px;
  height: 1px;
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: top left;
  z-index: 100;
}
#snap-3d-canvas.loaded {
  width: 100vw;
  height: 100vh;
}

body {
  background: black;
  color: black;
  font-size: 40px;
  font-family: Belissa !important;
  width: 100vw;
  height: 100vh;
  transform-origin: center center;
  overflow: hidden;
}
a {
  color: silver !important;
}


.ds-panel {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  background-color: black;
  background-image: url(../img/ds-title.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background .5s;
}
.ds-panel.loading {
  background-image: url(../img/ds-loading.jpg);
}
.ds-panel.loaded {
  background: transparent;
}
.ds-start-button {
  width: 250px;
  height: 100px;
  position: absolute;
  right: 6vw;
  top: 50vh;
  margin-top: calc(min(17vw, 24vh));
  pointer-events: all;
  background-image: url(../img/ds-start-button.png);
  background-color: transparent;
  border: none;
  background-size: 100% 100%;
  color: rgba(0,0,0,0);
  transition: opacity .5s, filter .2s;
}
.ds-start-button:hover {
  filter: drop-shadow(0 0 6px white) brightness(1.1);
  cursor: pointer;
}
.ds-start-button:active {
  filter: drop-shadow(0 0 12px white) brightness(1.5);
}
.ds-start-button.hidden {
  opacity: 0;
  pointer-events: none;  
}
.ds-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/ds-border.png);
  background-size: 100% 100%;
  z-index: 300;
  pointer-events: none;
}
.ds-focus-button {
  pointer-events: all;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  z-index: 1000;
  font-size: 40px;
  font-family: Belissa !important; 
  pointer-events: all;
  padding: 40px;
  background: black;
  border: none;
}

/**
 * Hud
 */
.ds-hud {
  width: 160px;
  height: 270px;
  position: absolute;
  top: 20px;
  right: 40px;
  background-image: url(../img/ds-hud.png);
  transform-origin: top right;
  transform: scale(.5);
  opacity: 0;
  transition: opacity .5s;
}
.loaded .ds-hud {
  opacity: 1;
}
.ds-hud-health {
  width: 54px;
  height: 54px;
  position: absolute;
  left: 96px;
  bottom: 80px;
  background-image: url(../img/ds-hud-health.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  transition: height .7s ease-out;
}


/**
 * Hotbar
 */
.ds-hotbar {
  width: 1470px;
  height: 160px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  background-image: url(../img/ds-hotbar.png);
  background-repeat: no-repeat;
  transform-origin: bottom left;
  transform: scale(.5) translate(-50%, 0);
  opacity: 0;
  transition: opacity .5s;
}
.loaded .ds-hotbar {
  opacity: 1;
}
.ds-hotbar-progress {
  width: 270px;
  height: 160px;
  background-image: url(../img/ds-hotbar-progress.png);
  background-repeat: no-repeat;
  transition: width .7s ease-out;
}
.ds-hotbar.has-gun {
  background-image: url(../img/ds-hotbar-gun.png);
}

/**
 * Logo
 */
.ds-logo {
  width: 402px;
  height: 188px;
  position: absolute;
  top: 24px;
  left: 40px;
  background-image: url(../img/ds-logo.png);
  background-repeat: no-repeat;
  transform-origin: top left;
  transform: scale(.5);
  opacity: 0;
  transition: opacity .5s;
  xfilter: brightness(.8);
}
.loaded .ds-logo {
  opacity: 1;
}


/**
 * Win panel
 */
.ds-win-panel {
  width: 1500px;
  height: 700px;
  position: absolute;
  top: 30%;
  left: 50%;
  background-image: url(../img/ds-win-panel.png);
  background-repeat: no-repeat;
  transform-origin: center;
  transform: translate(-50%,-50%) scale(.5);
  opacity: 1;
  transition: opacity 1s ease-out, transform 1s ease-out;
  pointer-events: none;
}
.ds-win-panel.hidden {
  opacity: 0;
  transform: translate(-50%,-50%) scale(.25);
}

/**
 * Loading bar.
 */
@keyframes breathing {
  0% { transform: scale(1); }
  50% { transform: scale(1.03,1.3); }
  100% { transform: scale(1); }
}
.ds-loading-panel {
  position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    margin-left: -70px;
    margin-top: 12vh;
    border: 1px solid white;
    height: 5px;
    border-radius: 120px;
    animation: breathing 2s ease infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.loading .ds-loading-panel {
  opacity: 1;
}
.loaded .ds-loading-panel {
  opacity: 0;
}
.ds-loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
  transform: scale(0.01, 1);
  transform-origin: top left;
  transition: transform ease-out 3s;
}
.loading .ds-loading-bar {
  transform: scale(0.8, 1);
}



#snap-3d-crosshairs {
  position: absolute;
  z-index: 1000;
  width: 34px;
  height: 4px;
  background: white;
  left: 50%;
  top: 50%;
  margin-left: -17px;
  margin-top: -2px;
  box-shadow: 0 0 2px black;
  opacity: 1;
  z-index: 1000;
  transition: opacity .5s;
}
#snap-3d-crosshairs:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 34px;
  height: 4px;
  background: white;
  left: 50%;
  top: 50%;
  margin-left: -17px;
  margin-top: -2px;
  opacity: 1;
}
#snap-3d-crosshairs:after {
  content: '';
  position: absolute;
  z-index: 1000;
  width: 4px;
  height: 34px;
  background: white;
  left: 50%;
  top: 50%;
  margin-top: -17px;
  margin-left: -2px;
  box-shadow: 0 0 2px black;
  opacity: 1;
}
#snap-3d-crosshairs.hidden {
  opacity: 0;
}

/**
 * Shakes the view.
 */
.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(-1px, -2px) rotate(0deg); }
  10% { transform: translate(-3px, -5px) rotate(-1deg); }
  20% { transform: translate(-5px, -3px) rotate(1deg); }
  30% { transform: translate(1px, -4px) rotate(0deg); }
  40% { transform: translate(-1px, -4px) rotate(1deg); }
  50% { transform: translate(-4px, -1px) rotate(-1deg); }
  60% { transform: translate(-6px, -2px) rotate(0deg); }
  70% { transform: translate(0px, -2px) rotate(-1deg); }
  80% { transform: translate(-3px, -4px) rotate(1deg); }
  90% { transform: translate(-2px, -1px) rotate(0deg); }
  100% { transform: translate(-1px, -5px) rotate(-1deg); }
}