/* author: https://codepen.io/hzrd149/pen/JGMEVz
hzrd149 */

html,body{
	font-size: 30px;
	font-family: sans-serif;
	margin: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
h1{
	margin: 10px 0px 10px 0px;
}

.right{
	float: right;
}
.center{
	width: 100%;
	height: 100%;
	
	display: flex;
  	align-items: center;
    transition: all 0.2s;
}
.center.view{
	perspective: 1500px;
}

.rotate{
    margin-left: auto;
    margin-right: auto;
	
	transform-style: preserve-3d;
	transition: all 0.3s;
}
.rotate.rotated{
	transform: rotateZ(40deg) rotateX(40deg) rotateY(-28deg);
}

.row{
    padding: 20px;
    border: 2px solid grey;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.28);
	margin-bottom: 30px;
	transition: all 0.3s;
	
	max-width: 60vw;
}
.rotate.rotated .row{
    box-shadow: 20px 30px 10px rgba(0, 0, 0, 0.28);
}

.button{
	border: 2px solid #444;
	outline: none;
	
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	padding: 10px;
	
	transform-style: preserve-3d;
	
	transition: all 0.3s;
}
.rotated .button{
	transform: translateZ(15px);
}
.rotated .button::before{
    content: '';
    display: block;
    position: absolute;
    background: lightblue;
	border: 2px solid #444;
	box-sizing: border-box;
    width: calc(100% + 4px);
    height: 15px;
    bottom: -2px;
    left: -2px;
	transform-origin: center bottom;
	transform: rotateX(90deg);
	transition: all 0.3s;
}
.rotated .button::after{
    content: '';
    display: block;
    position: absolute;
    background: lightblue;
	border: 2px solid #444;
	box-sizing: border-box;
    width: 15px;
    height: calc(100% + 4px);
    top: -1px;
    right: -2px;
	transform-origin: right center;
	transform: rotateY(-90deg);
	transition: all 0.3s;
}

.rotated .button:hover{
	transform: translateZ(10px);
}
.rotated .button:hover::before{
	height: 10px;
}
.rotated .button:hover::after{
	width: 10px;
}

.button,.button::before,.button::after{
	background: lightblue;
}
.button:hover,.button:hover::before,.button:hover::after{
	background: skyblue;
}

.button.success,.button.success::before,.button.success::after{
	background: lightgreen;
}
.button.success:hover,.button.success:hover::before,.button.success:hover::after{
	background: #4ee44e;
}

.text{
	display: inline-block;
	transform: translateZ(0px);
	transition: all 0.3s;
}
.rotated .text{
	transform: translateZ(15px);
	text-shadow: 10px 16px 2px rgba(0,0,0,0.3);
}

.close{
	display: inline-block;
	transform: translateZ(0px);
	transition: all 0.3s;
	position: absolute;
    right: 15px;
    top: 15px;
    font-size: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    cursor: pointer;
}
.rotated .close{
	transform: translateZ(15px);
	text-shadow: 8px 12px 2px rgba(0,0,0,0.3);
}
.rotated .close:hover{
	transform: translateZ(5px);
	text-shadow: 3.5px 5px 1px rgba(0,0,0,0.3);
}
.rotate:not(.rotated) .close:hover{
	text-shadow: 0px 0px 10px black;
}

.input{
	font-weight: bold;
	font-size: .8em;
	border: 2px solid #555;
	padding: 5px 10px;
	margin-bottom: 5px;
}