html,body {
  font-family: 'Open Sans', serif;
}

html { 
  background: url('https://source.unsplash.com/collection/137515/1600x900') no-repeat center center fixed; 
  background: url('../img/bg-howgreen.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a { color: red }

.hero.is-info {
  background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('../img/bg-howgreen.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.hero .nav, .hero.is-success .nav {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.hero .subtitle {
  padding: 3rem 0;
  line-height: 1.5;
}

.is-bg-success {
  background-color: #23d160;
}
.is-bg-warning {
  background-color: #ffdd57;
}
.is-bg-danger {
  background-color: #ff3860;
}

.card-header-title.is-bg-success, .card-header-icon.is-bg-success, .card-header-title.is-bg-danger, .card-header-icon.is-bg-danger {
  color: #fff;
}

.card-header-title.is-bg-warning, .card-header-icon.is-bg-warning {
  color: rgba(0,0,0,.7);;
}

.spinner {
  margin: 100px auto;
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  
  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.textscramble {
  font-weight: 100;
  font-size: 60px;
  color: #fafafa;
  position: relative;
  z-index: 1000;
}
.dud {
  color: #757575;
}

.modal-background {
	background-color: black;
}

canvas {
  position: absolute;
  width: 100%; 
  bottom: 0px; left: 0px;
}