title {
  color: #b8300b;
  display: block;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 80%;
}

header {
  height: 3px;
  width: auto;
}

ThisTHing {
  
  /*  emereld: 	    00494d
      terracotta: 	c36846
      yellow: 	    ffc857
      sage: 		b3c897
      dusty rose: 	b07e8e
  */ 
  
  color: #00494d;
  color: #c36846;
  color: #ffc857;
  color: #b3c897;
  color: #b07e8e;
    
    
}

html,
body {
  box-sizing: border-box;
  background-color: #0f0f0f !important;
  font-family: 'Gruppo', monospace;
  font-size: 2rem;
  color: darkgoldenrod;
  display: block;
}

/* THE STAR FIELD */
#starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;  /* add this */

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#scale {
  padding: 0;
  font-size: 2rem;
  transform: translateZ(0);
}

/* Words.html rotation animation */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* Aleatory header transitions */
header h1, header h2, #wisdomQuote {
  transition: opacity 0.3s ease-in-out;
}

header h1:hover, header h2:hover {
  filter: brightness(1.3);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

header h1:hover {
  text-shadow: 0 0 15px rgba(17, 99, 178, 0.5);
}

header h2:hover {
  text-shadow: 0 0 12px rgba(222, 125, 90, 0.5);
}

#buttonContainer {
  padding-top: 1%;
}

#slots {
 margin-top: 1%;
}

.particles-js-canvas-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* -- ANIMATIONS: button rhino --*/

.window {
	font-size:35px;
	border:2px inset #94b80b;
}


.ezslots>.window{	
	overflow:hidden;
	display:inline-block;
}
.ezslots>.window>.slider>.symbol{
	text-align:center;
	display:table;	
}
.ezslots>.window>.slider>.symbol>.content{
      padding:0px;
      margin:0px;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
}

/*-----IMAGES-------*/
.imageDiv {
  display: block;
  position: relative;
  width: 100%;
  
}

#blankNotes {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  transition: .5s cubic-bezier(0.7, 0.2, 0.5, 1.0);
  opacity: 1;
  background: rgba(0,0,0,0);
}


@media (min-width: 1400px) {
  .images {
    height: 552px;
    width: 800px;
  }
}