html {
 margin: 0px;
 box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
 background: radial-gradient(circle at 50% 0%,#e1e1e1 10%,#555);
 height: 100%;
 width: 100%;
 overflow-x: hidden;
}

body {
 margin: 0px;
 height: 100%;
 width: 100%;
 overflow-x: hidden;
}

H3 {
    margin: 45px 0 0;
    text-align: right;
    transform:  rotate(-10deg);
}

.letter {
    background: #fafafa;
    box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 300px 25px rgba(222,198,122,0.7) inset;
    width: 250px;
    height: 350px;
    margin: 1.5% 50% auto;
    left: -225px;
    padding: 24px;
    position: relative;
}

.letter:before, .letter:after {
    content: "";
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px rgba(222,198,122,0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
    transition: .5s;
}

.letter:before {
    left: -5px;
    top: 2px;  
    transform: rotate(-1.5deg);
}

.letter:after {
    right: -3px;
    top: 0px;
    transform: rotate(2.4deg);
}

.letter:hover:before {
transform: rotate(0deg);
border: solid rgba(111,99,61,0.4);
border-width: 0px 0px 0px 1px;
left: -6px;
top: -6px; 
}

.letter:hover:after {
transform: rotate(0deg);
border: solid rgba(111,99,61,0.4);
border-width: 0px 0px 0px 1px;
right: 3px;
top: -3px;
}