body {
    margin: 0;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Quicksand', sans-serif;
}

.background {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url('https://cdn.vox-cdn.com/thumbor/cWDz5ZeDlKUdVtmg0qAynqQFPAc=/198x0:2358x1440/1200x800/filters:focal(198x0:2358x1440)/cdn.vox-cdn.com/uploads/chorus_image/image/47379254/mrrobot_show_2560x1440.0.0.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.card {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url('https://cdn.vox-cdn.com/thumbor/cWDz5ZeDlKUdVtmg0qAynqQFPAc=/198x0:2358x1440/1200x800/filters:focal(198x0:2358x1440)/cdn.vox-cdn.com/uploads/chorus_image/image/47379254/mrrobot_show_2560x1440.0.0.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(1.1);
    z-index: 2;
    animation: reveal ease .8s 1 forwards;
}

.card-content {
    position: absolute;
    opacity: 0;
    width: 100%;
    padding: 23% 22% 0 20%;
    box-sizing: border-box;
    font-weight: 300;
    text-align: right;
    color: white;
    font-size: 135px;
    line-height: 1;
    z-index: 3;
    animation: appear ease 1s 1 1s forwards;
}

@keyframes reveal {
    0% {
        clip-path: inset(20% 80% 20% 20%);
    }
    33% {
        clip-path: inset(20% 20% 20% 20%);
    }
    66% {
        clip-path: inset(20% 20% 20% 80%);
    }
    67% {
        clip-path: inset(20% 80% 20% 20%);
    }
    100% {
        clip-path: inset(20% 20% 20% 20%);
    }
}

@keyframes appear {
    0% {
        transform: translate(0, 2px);
        text-shadow: 0px 0px #cb6346;
    }
    50% {
        opacity: 1;
        transform: translate(0, 2px);
        text-shadow: 0px 0px #cb6346;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
        text-shadow: 2px 2px #cb6346;
    }
}