hackerman.css

@font-face {
	font-family: 'white_rabbitregular';
	src: url('assets/fonts/whiterabbit-webfont.woff2') format('woff2'),
		 url('assets/fonts/whiterabbit-webfont.woff') format('woff'),
		 url('assets/fonts/whiterabbit-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

a[href],
a[href]:active,
a[href]:visited,
a[href]:link {
	color:#FFFFFF;
}

body {
	/* background-color:#101215; */
	background-color:#FFFFFF;
	/* color:#FFFFFF; */
	font-family:white_rabbitregular,monospace;
	/* background-image: repeating-linear-gradient(#141414, #141414 2px, #181818 2px, #181818 4px); toned down */
	background-size:100% 4px;
}
table,
tr,
td {
	border-collapse:collapse;
}
td {
	padding:1em;
	max-width:500px;
	word-wrap: break-word;
	white-space:pre-wrap;
	color:#FFFFFF;
	font-family:white_rabbitregular,monospace;
	line-height:1.1;
	vertical-align:top;
	border:1px solid #FFFFFF;
	border-collapse:collapse;
}
.selected {
	border:5px solid yellow;
	padding:0 1em 1em 1em;
}

/* flip the pane when hovered */
.flip-container.clicked .flipper {
	transform: rotateY(360deg);
}

.flip-container, .front, .back {
	width: 250px;
	height: 250px;
}

/* flip speed */
.flipper {
	transition: 0.8s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	/* transform: rotateY(180deg); */
	/* transform: rotateY(0deg); */
	visibility: visible;
}

.old-centered {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -100px;
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);    /* Older Gecko browser */
	-ms-transform: translate(-50%, -50%);     /* IE9+ */
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.cornered {
	border-radius: 1em;
	padding: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}

.front, .back {
	position: absolute;
}

.cardback, .deck {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}