@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Raleway, sans-serif;
    display: flex;
    align-items: center;
    min-height: 100vh;
    background-color: #ddd;
}

.card-container {
    perspective: 50em;
}

.card-container {
    --bi: linear-gradient(#555 5em, #0000 3em), linear-gradient(60deg, #ff0000, #0015ff);
}

.card {
    position: relative;
    width: 320px;
    height: 320px;
    text-align: center;
    padding: 1.2em 2em;
    color: #fff;
    transform: rotateY(30deg) rotateX(15deg);
    transform-style: preserve-3d;
    transition: transform 1s;
}

.card p {
    padding-top: 2.5em;
}

.card:hover {
    transform: rotateY(-30deg) rotateX(-15deg);
}

.layers {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    z-index: -1;
}

.layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 1em;
    background-image: var(--bi);
    transform: translateZ(var(--tz));
    box-shadow: 0 0 0.5em #000d inset;
}

.layer:nth-child(1) {
    --tz: 0px;
}

.layer:nth-child(2) {
    --tz: -4px;
}

.layer:nth-child(3) {
    --tz: -8px;
}

.layer:nth-child(4) {
    --tz: -12px;
}

.layer:nth-child(5) {
    --tz: -16px;
}

.layer:nth-child(6) {
    --tz: -20px;
}

.layer:nth-child(7) {
    --tz: -24px;
}

.layer:nth-child(8) {
    --tz: -28px;
}

.layer:nth-child(9) {
    --tz: -32px;
}

.layer:nth-child(10) {
    --tz: -36px;
}

.layer:last-child {
    box-shadow: 0 0 0.5em #000d inset, 0 0 5px #000;
}