body {
  margin: 30px;
  line-height: 1.8em;
  font-family: 'Cousine', monospace;
  background-image: url('assets/background.png');
}

button {
  font-family: 'Cousine', monospace;
  width: 180px;
  height: 45px;
  border-radius: 6px;
  color: #FFF;
  background: rgba(34, 26, 132, 0.6);
  border: none;
  font-size: 20px;
}

button:hover {
  background: rgba(34, 26, 132, 0.8);
  cursor: pointer;
}

#songName {
  text-align: center;
  color: #FFF;
  margin-top: 4rem;
}

.darkerText {
  color: #282828;
}
 
/* Main content area */
 
#content {
  margin: 130px 250px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

.countdown {
	background: #FFAA46;
	width: 12rem;
	height: 2rem;
	margin-top: -3.25rem;
	float: right;
	margin-right: 7.5rem;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	font-size: 2rem;
	font-weight: 700;
	padding-top: 1.25rem;
}
	

/* Slots for final card positions */
 
#cardSlots {
  margin: 0 auto 3em auto;
  background-image: linear-gradient(#FFAA46, #CC51EB);
  float: right;
}
 
/* The initial pile of unsorted cards */
 
#cardPile {
  margin: 0 auto;
  float: left;
}
 
#cardSlots, #cardPile {
  width: 410px;
  height: 395px;
  padding: .85em;
}

#cardPile {
  width: 475px;
}

#cardPile {
  padding: 0;
}
 
/* Individual cards and slots */
 
#cardSlots div, #cardPile .card {
  float: left;
  width: 100px;
  height: 130px;
  padding-bottom: 0;
  margin: 0px 0px 12px 8px;
  background: #EDE0D4;
}

#cardSlots div {
  background: #282828;
  border: 0.5px dashed #B5B5B5;
}
 
#cardPile .card {
  background: #EDE0D4;
}

#cardSlots div.hovered {
  background: #0F0F0F;
}

#cardSlots div {
  margin: 0;
}
 
#cardPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

.card {position: relative;}
 
.card img{
  width: 100%;
}
.card:not(.correct) img{
  filter: contrast(10%) blur(3px) hue-rotate(80deg) 
}

.card .overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 255, 255, 0.2);
  transition: width 0s linear;
}

.card:hover .overlay {
  width: 100%;
  transition: width 4s linear;
} 
 
/* "You did it!" message */
#startMessage, #successMessage, #failMessage {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0;
  height: 0;
  z-index: 100;
  color: #EDE0D4;
  padding: 20px;
}

#successMessage, #failMessage {
  background-image: url('assets/win-lose-bg.png');
  margin: 0 auto;
  text-align: center;
  color: #BBC6FF;
  font-size: 20px;
}

.winLoseText {
  display: block;
  margin-top: 10rem;
  /* -webkit-text-stroke: 1px #FF6600; */
  text-shadow:
  0px 0 0 #FF6600,
  0px 0px 0 #FF6600,
  3px 2px 0 #FF6600,
  1px 2px 0 #FF6600;
}

#startMessage, #successMessage, #failMessage {
  left: 0px;
  top: 0px;
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  opacity: 1;
}

#startMessage video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

#startMessage button, #startMessage > img {
  display: block;
  margin: auto;
  margin-top: 10%;
  background: none;
  border: none;
}

#startMessage button:hover {
  cursor: pointer;
  opacity: 0.7;
}