html,
body {
  position: relative;
  width: 100%;
  height: 100%;

  /* disable double-tap to zoom */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
  touch-action: manipulation;
}

@font-face {
  font-family: Avenir;
  src: url('fonts/Avenir-Book.otf') format('OpenType');
}

/*@font-face {
  font-family: Montserrat;
  src: url('fonts/Montserrat-Light.ttf') format('TrueType');
}*/

body {
  color: #333;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  /* background: rgb(27, 28, 52);
  background: linear-gradient(180deg, rgba(27, 28, 52, 1) 0%, rgba(42, 27, 52, 1) 100%);
  background-attachment: fixed; */

  /*background: url(img/wallpapers/zeta_landscape.jpg) no-repeat center center fixed;*/
  /*background: url(img/wallpapers/mountains.jpg) no-repeat center center fixed;*/
  /*background: url(img/wallpapers/back-to-the-future-dmt.jpg) no-repeat center center fixed;*/
  /*background: url(img/wallpapers/geometry_black.jpg) no-repeat center center fixed;*/

  /*background: url(img/wallpapers/simple_gray_abstract.jpg) no-repeat center center fixed;
  background-size: cover;*/

  /*background-repeat: no-repeat;*/
  /*background-color: #1b1c34;*/
}

body:after {
  content: url(img/wallpapers/zeta_landscape_dark.jpg);
  display: none;
}

@keyframes darken {
  0% {
    background: url(img/wallpapers/zeta_landscape.jpg) no-repeat center center fixed;
    background-size: cover;
  }
  100% {
    /*background: rgb(27, 28, 52);
    background: linear-gradient(180deg, rgba(27, 28, 52, 1) 0%, rgba(42, 27, 52, 1) 100%);
    background-attachment: fixed;*/
    background: url(img/wallpapers/zeta_landscape_dark.jpg) no-repeat center center fixed;
    background-size: cover;
  }
}

/* remove animation on safari because of ugly blink! */
/* background will not darken on safari! */
@-webkit-keyframes darken {
  /* empty */
}

body.darken_unused {
  animation-fill-mode: forwards;
  animation-name: darken;
  animation-duration: 0.4s;
  animation-timing-function: linear;
}

a {
  color: rgb(0, 100, 200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0, 80, 160);
}

label {
  display: block;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  padding: 0.4em;
  margin: 0 0 0.5em 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 2px;
}

input:disabled {
  color: #ccc;
}

input[type='range'] {
  height: 0;
}

button {
  color: #333;
  background-color: #f4f4f4;
  outline: none;
}

button:disabled {
  color: #999;
}

button:not(:disabled):active {
  background-color: #ddd;
}

button:focus {
  border-color: #666;
}

@media only screen and (max-width: 768px) {
  body {
    background: rgb(27, 28, 52);
    background: linear-gradient(180deg, rgba(27, 28, 52, 1) 0%, rgba(42, 27, 52, 1) 100%);
    background-attachment: fixed;

    /*background: url(img/zeta_landscape_dark.jpg) no-repeat center center fixed;
    background-size: cover;*/

    /*background-repeat: no-repeat;
    background: rgb(27, 28, 52);
    background: linear-gradient(180deg, rgba(27, 28, 52, 1) 0%, rgba(42, 27, 52, 1) 100%);
    background-attachment: fixed;*/
  }
}