body {
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.base {
    background-color: rgb(48, 43, 58);
}

#title-text {
    margin-top: 0;
    font-size: 72px;
    font-weight: 100;
}

.center-text {
    text-align: center;
}

.btn-wrapper {
    margin: 1em;
    display: flex;
    justify-content: center;
}

.push-btn {
    margin: 0.5em 1.5em;
    text-decoration: none;
    color: white;
    padding: 0;
    border-radius: 46%;
    border: none;
    outline-offset: 4px;
}

.face {
    display: block;
    padding: 2em 3em;
    border-radius: 46%;
    font-size: 1.25rem;
    transform: translateY(-15px);
}

.push-btn.active .face,
.push-btn:active .face {
    transition: all 0.1s ease-in;
    transform: translateY(-2px);
}

.push-btn.active .red,
.push-btn:active .red {
    background: rgb(221, 54, 12);
}

.push-btn.active .yellow,
.push-btn:active .yellow {
    background: rgb(236, 161, 0);
}

.push-btn.active .blue,
.push-btn:active .blue {
    background: rgb(2, 170, 156);
}

.push-btn.active .purple,
.push-btn:active .purple {
    background: rgb(182, 4, 182);
}

.red {
    background: rgb(255, 81, 37);
}

.red-shadow {
    background: rgb(190, 49, 25);
}

.yellow {
    background: rgb(255, 190, 13);
}

.yellow-shadow {
    background: rgb(179, 123, 2);
}

.purple {
    background: rgb(224, 21, 224);
}

.purple-shadow {
    background: rgb(156, 21, 156);
}

.blue {
    background: rgb(5, 235, 216);
}

.blue-shadow {
    background: rgb(2, 185, 160);
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.25;
}

.center-me {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#start-wrapper {
    background: #030303;
    padding: 2em;
    border-radius: 20px;
}

#start-btn {
    font-size: 32px;
    background: rgb(51, 51, 51);
    color: white;
    border: none;
    padding: 1em 2em;
    border-radius: 10px;
    cursor: pointer;
}

.hide {
    display: none;
}

#instruction-wrapper {
    margin: 2em;
}

#instruction-text {
    font-size: 24px;
}

#end-overlay {
    z-index: 9;
    background-color: rgb(255, 47, 162);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black;
}

#end-text {
    font-size: 102px;
}

.done {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

.regi {
    visibility: visible;
    background-image: url("regi.png");
    transition: visibility 0s 2s, opacity 2s linear;
}