body{
    background-image: url('assets/diving2.jpg');
    background-size:cover;
    overflow-x:hidden;
}

.bg3{
    background-image: url('assets/breath.jpg');
    background-size:cover;
    overflow-x:hidden;
}

a{
    text-decoration: none;
    cursor: cell;
}
/*Index Page*/
.canvas{
    position:absolute;
    z-index: -1;
}
.title{
    position:absolute;
    z-index: 2;
    width:360px;
    margin-top:20%;
    text-align:center;
    padding-left:48px;
}
.bottom{
    float:right;
    font-family: 'Amatic SC', cursive;
    font-size:64px;
    height:50px;
    color:white;
    text-decoration: none;
    position:relative;
    transition: ease-in-out 0.3s; 
    
}

.bottom:hover{
    color:red;
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    animation-iteration-count: infinite; 
    
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.caption{
    margin-top:24px;
    font-family: 'Crimson Text', serif;
    float:right;
    color:gray;
    font-size: 14px;
    letter-spacing: 1px;
}

/*story Page*/
.tip{
    color:darkgray;
    font-size:14px;
    position:absolute;
    width:100%;
    text-align:center;
    font-family: 'Crimson Text', serif;
    margin-top: 12px;
}
.live-story{
    position:absolute;
    z-index: -2;
    cursor:cell;
}
.live-story:hover{
    opacity:0.2;
    
}
.leave{
    position:absolute;
    width:100%;
    text-align:center;
    bottom:28px;
    z-index:999;
    font-size: 28px;
    font-family: 'Amatic SC', cursive;
    cursor:cell;
    
}
.leave a{
    color:white;
    text-decoration: none;
    transition: ease-in-out 0.3s; 
}
.leave a:hover{
    color:red;
}


/*Readme page*/
.info{
/*    margin:0px auto;*/
    font-family: 'Crimson Text', serif;
    color:gray;
    line-height:8px;
    padding:16px;
    font-size: 15px;
    text-align:center;
    position:absolute;
    z-index: 999;
    width:100%;
    margin-top:10%;
    letter-spacing: 1px;
}
.info a{
    color:white;
}
.info a:hover{
   opacity:0.8;
}

.question{
/*    line-height:24px;*/
    font-size: 56px;
    color:white;
    font-family: 'Amatic SC', cursive;
    
    
}
.question:hover{
    animation: shake 1s; 
    animation-iteration-count: infinite; 
}

@keyframes shaking {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.question2{
    font-size:18px;
    color:white;
    line-height:20px;
    padding-bottom:28px;
}
.back{
    font-family: 'Amatic SC', cursive;
    font-size:28px;
    color:white;
    text-decoration: none;
    position:relative;
    transition: ease-in-out 0.3s; 
    cursor:cell;
    
}
.back:hover{
    color:red;
}