
#container {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    overflow: hidden;
    display: -webkit-flex;
    align-items:center;
    justify-content: center;
    background: hsl(27, 100%, 91%);
}

.rip {
    /* content: "START"; */
    width: 120px;
    height: 120px;
    position: relative;
    border-radius:50%;
    color: #ee6104;
    border: 2px solid #ee6104;
    text-decoration-style: none;
}
.rip::after {
    content: "START";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.rip:hover {
    cursor: pointer;
    background:#ee6104;
    color: #fff;
    transition: background .5s ease-in;
}

input {
    margin: auto;
}
a {
    text-decoration: none;
}

.rip-motion {
    animation: rip 0.6s ease-in-out;
    animation-fill-mode: forwards;
}
.rip-motion::after {
    content: "";
}

@keyframes rip {
    0% {
        background:#ee6104;
        transform: scale(1);
    }
    100% {
        background:#ee6104;
        transform: scale(10);
    }
}
.easeIn {
    position: absolute;
    opacity: 0;
    animation: in .5s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
}

@keyframes in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
