@keyframes heartbeat-in {
    0% { opacity: 1; }
    20% { opacity: .6; }
    30% { opacity: 0; }
}
@keyframes heartbeat-out {
    0% { transform: scale(1.005); opacity: 1; }
    20% { transform: scale(1.004); opacity: .6; }
    30% { transform: scale(1); opacity: 0; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    outline-style: none !important;
}

html,
body {
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
}

.hidden {
    display: none !important;
}

.preload {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.preload-button {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 200px solid #fff;
}

.player {
    width: 100%;
    height: 100%;
}

.alice {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('alice.png') no-repeat center / contain;
}

.alice1 {
    z-index: 300;
    opacity: 0;
    background-image: url('alice-blur.png');
}

.alice2 {
    z-index: 200;
}

.alice3 {
    z-index: 100;
    opacity: 0;
    background-image: url('alice-blur.png');
}

.heartbeat-in {
    animation: heartbeat-in .5s infinite;
}
.heartbeat-out {
    animation: heartbeat-out .5s infinite;
}