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





.card1-container {
    perspective: 50em;
}

    .card1-container:nth-child(1) {
        --bi: repeating-linear-gradient(30deg, #111 0 0.25em, #333 0 1em);
    }

    .card1-container:nth-child(2) {
        --bi: linear-gradient(#555 5em, #0000 3em), linear-gradient(60deg, #880e4f, #1a237e);
    }

.card1 {
    position: relative;
    width: 100%;
    padding: 1em;
    color: #fff;
    transform: rotateY(30deg) rotateX(15deg);
    transform-style: preserve-3d;
    transition: transform 1s;
}

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

    .card1:active {
        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;
    }