body {
    text-align: center;
    font-family: 'Courier New', monospace;
}

h1 {
     font-family: 'Courier New', monospace;
   
}

#stack1 {
    top: 25px;
    left: 130px;
    bottom: 300px
}
.card1 {
    left:50%;
    margin-left:-13em;
    z-index:10;
    transform: rotateZ(-30deg);
    -moz-transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
    transition: all 0.5s ease-out 0.3s;
}
.card2 {
    left:50%;
    margin-left:-12em;
    z-index:9;
    transition: all 0.5s ease-out 0.15s;
}
.card3 {
    left:50%;
    margin-left:-11em;
    z-index:8;
    transform: rotateZ(3deg);
    -webkit-transform: rotateZ(3deg); 
    -moz-transform: rotateZ(3deg); 
    transition: all 0.5s ease-out;
}

.start .card {
    left:-100%;
    opacity:0;
    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
}

body {
    font-size:0.75em;
    line-height:1.5em;
}

.front-deck {
    background: #666 url(https://s.cdpn.io/44759/Wood-Backgrounds-Picture.jpg);
    height: 450px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    position: absolute;
    z-index: -1;
}

.card-container {
    position:relative;
    width: 18em;
    margin:1em auto;
}

.card {
    position:absolute;
    top:0;
    background: #fff;
    box-shadow: 1px 1px 7px rgba(0,0,0,.65);
    border-radius:0em;
    padding:2em;
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(0.5);
  
}

.card a {
    margin:-12em -15em -15em -10em;
    display:flex;
    /*width:200%;*/
    position:relative;
    line-height:1em;
    top: -80px
    -webkit-transform: scale(0.5);
  
}

.card a:after {
    content: "";
    position:absolute;
    left:0;
    right:0;
    top:0px;
    bottom:1px;
        /*border: 1px solid lightgrey;*/

}

.card h1 {
    margin-top:0;
}

.card p {
    line-height:1.75em;
    margin-bottom:0;
}

.card-container:hover,
.card-container.hover {
    .card {
        opacity:0.9;
        transform: scale(0.95);
         -webkit-transform: scale(0.95);
        margin-left:-12em;
        &:hover,
        &.hover {
            opacity:1;   
            z-index:11;
                transform: scale(1.0);
         -webkit-transform: scale(1.0);
        }
    }
    .card1 {
        transform: rotateZ(0deg) scale(0.95);
        -webkit-transform: rotateZ(0deg) scale(0.95);
    }
    .card2 {
        left:0%;  
        -webkit-transform: rotateZ(-10deg) scale(0.95);
    }
    .card3 {
         left:100%;
         -webkit-transform: rotateZ(10deg) scale(0.95);
    }
    
}

.container {
            width: 400px;
            height: 700px;
            overflow: hidden;
        }
        
        .container img {
            /*width: 500px;*/
            height: auto;
        }
        
@media (min-width:880px) {
    body{
        font-size:0.9em;
    }
    .card-container {
        width: 24em;
    }
}

@media (min-width:1075px) {
    body{
        font-size:1.1em;
    }
    .card-container {
        width: 38em;
    }
}

@media (max-height:550px) {
    body{
        font-size:0.8em;
    }
    .card-container {
        width: 24em;
    }
}

#sign-in {
    padding: 5px;
    width: 80px;
}