body {
  background: #000;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
  margin: auto;
}

h1 {
  text-align: center;
  margin: auto;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#coin {
   
}
#flipButton {
  background:orange;
  color:#fff;
  padding:10px 15px;
  border-radius:5px;
  display:inline-block;
  transition:0.5s;
  cursor:pointer;
  &:hover {
    opacity:0.5;
  }
}

#resetButton {
  background:red;
  color:#fff;
  padding:10px 15px;
  border-radius:5px;
  display:inline-block;
  transition:0.5s;
  cursor:pointer;
  &:hover {
    opacity:0.5;
  }
}

.card {
	margin: auto;
	float: left;
	width: 50%;
	cursor: pointer;
}

.results {
	font-size: 200%;
}

.animate-coin {
  animation: flip 0.5s 1;
}
@keyframes flip {
  0% {
    transform: scale3d(1,1,1) rotateX(0deg);
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
  }
  50% {
    transform: scale3d(2,2,2) rotateX(3600deg);
    box-shadow: 0 20px 40px rgba(0,0,0,.8);
  }
  100% {
    transform: scale3d(1,1,1) rotateX(7200deg);
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
  }
}