*{
    margin: 0;
    padding: 0;
    font-family: 'poppins' , sans-serif;
    box-sizing: border-box;
}


body{
    height: 100%;
    background:#19172e;
}

.container{
    background-color: #fff;
    width: 400px;
    padding: 50px;
    position: absolute;
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
    box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
    border-radius: 10px;
    -webkit-perspective: 300px;
    perspective: 300px;
}

.stats{
      text-align: center;
	  color:#101020;
	  font-weight:500;
	  line-height:25px;
}

.coin{
	border: 1px solid #fff;
	height:150px;
	width: 150px;
	position:relative;
	margin:50px auto;
	-webkit-transform-style : perspective-3d;
	transform-style : preserve-3d;
	animation:  spin-heads 3s forwards;
}


.coin img{
	width:145px;
}


.head, .tail{
	position:absolute;
	width:100%;
	height:100%;
	-webkit-backface-visibility: hidden;
	backface-visibility:hidden;
}

.tail{
	transform: rotateX(180deg);
}

@keyframes spin-tails{
	0%{
		transform: rotateX(0);
	}
	
	100%{
		transform: rotateX(1980deg);
	}
	
}


@keyframes spin-heads{
	0%{
		transform: rotateX(0);
	}
	
	100%{
		transform: rotateX(2160deg);
	}
	
}


.buttons{
	display:flex;
	justify-content: space-between;
}

button{
	width:120px;
	padding: 10px 0;
	border: 2.5px solid #19172e;
	border-radius: 5px;
	cursor:pointer;
}

#flip-button{
	background: #19172e;
	color:#fff;
}

#flip-button:disabled{
	background-color: #e1e0ee;
	border-color: #e1e0ee;
	color:#101020;
}

#reset-button{
	background-color: #fff;
	color: #19172e;
}


footer {
  text-align: center;
  color: white;
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
  padding: 5px;
}

footer a:visited {
  color: inherit;
}