div.container{
    margin:80px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.reload{
    width: 100%;
    color: rgba(0, 0, 0, 0.521);
    text-align: center;
    font-size: 14px;
    position: absolute;
    bottom: 40px;
    align-items: center;
    font-family:  Helvetica, sans-serif;
    opacity: 0;
}
.reload:active{
    box-shadow: 0px 0px 0px;

}
button{
    padding: 14px 20px 14px 20px;
    background-color: rgb(126, 19, 201);
    box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.616);
    font-family: 'Segoe UI', Tahoma,;
    font-weight: 800;
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
}
button:active{
    box-shadow: 0px 0px 0px ;
}

#coin{
    position: relative;
    width: 15rem;
    height: 15rem;
    margin: 2rem 0rem;
    transform-style: preserve-3d;
}

#coin div{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    background-size: contain;
    position: absolute;
}

.heads{
    background-image: url(images/heads.png);
}

.animate-heads{
    animation: flipHeads 2.8s;
    animation-fill-mode: forwards;
}

@keyframes flipHeads {
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(1800deg);
    }
}

.tails{
    background-image: url(images/tails.png);
    transform: rotateY(-180deg);
}

.animate-tails{
    animation: flipTails 2.8s;
    animation-fill-mode: forwards;
}


@keyframes flipTails {
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(1620deg);
    }
}

  @media only screen and (max-width: 600px) {
    .reload{
     opacity: 1;
    }
  }