html, body {
	margin: 0;
	padding: 0 0 0 0;
	font-size: 110%;
	line-height: 140%;
	background-color: #251F2E;
	color: #fff;
}

a {
	color: #fff;
}

label {
    perspective: 1000px;
    transform-style: preserve-3d;
    display: block;
    width: 300px;
    height: 480px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.card {
    position: relative;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition: all 600ms;
    z-index: 20;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    border-radius: 10px;
}

    .card div {
        position: absolute;
        height: 100%;
        width: 100%;
        line-height: 200px;
        backface-visibility: hidden;
    }

    .card .back {
        color: #FFF;
        transform: rotateY(180deg);
    }

label:hover .card {
    transform: rotateY(-10deg) rotateX(-10deg);
    box-shadow: 20px -20px 20px rgba(0,0,0,.5);
}

input {
    display: none;
}

#nameOnCard {
	display: inline-block;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #C0398D;
	color: white;
	caret-color: white;
}

:checked + .card {
    opacity: 0;
}

label:hover :checked + .card {
    box-shadow: 20px -20px 20px rgba(0,0,0,.5);
}