@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Dancing+Script|Kalam|Permanent+Marker|Shadows+Into+Light');


/*

font-family: 'Shadows Into Light', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Amatic SC', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Kalam', cursive;
*/

/* code from: https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
.shake:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
/* code from: https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */

a { float: right;
    color: azure;
    opacity: .5;
}

body {
    background-color: black;
    color: white;
    font-size: 20px;
    font-family: 'Shadows Into Light', cursive;
    background-image: url("hand-984170_1280.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
#author {
    font-family: 'Dancing Script', cursive;
    font-size: 15px;
}

p {
    font-family: 'Philosopher', sans-serif; 
}

h1 {
    font-family: 'Amatic SC', cursive;
    background-color: black;
    color: darkslategrey;
    width: 70%;
    text-align: center;
    border-radius: 16px;
    transition-duration: 3s;
    padding: 8px;
    opacity:.7;
}
h2 {
    font-family: 'Amatic SC', cursive;
    background-color: black;
    color: darkslategrey;
    width: 70%;
    text-align: right;
    border-radius: 16px;
    transition-duration: 3s;
    padding: 8px;

}

h1:hover {
    color: white;
    opacity:1;
}
div {
    opacity:.4;
    transition-duration: 1s;  
    background-color: black;
    color: black;
    padding: 8px;
    margin: 20px;
}

div:hover {
    opacity: 1;  
    transition-duration: 3s;
}

.verse1 {
    font-family: 'Amatic SC', cursive;
    width:250px;
    border-radius: 16px; 
    transform: rotate(3deg);
}
.verse1:hover {
    color: white;
    transform: rotate(15deg)translate(200px);
}

.verse2 {
    font-family: 'Dancing Script', cursive;
    width:350px;
    border-radius: 16px; 
    transform: rotate(-3deg);
}
.verse2:hover {
    color: white;
    transform: rotate(-15deg)translate(200px);
}

.verse3 {
    font-family: 'Shadows Into Light', cursive;
    width:450px;
    border-radius: 16px; 
    transform: rotate(3deg);
    text-align: right;
}

.verse3:hover {
    background-color: darkgrey;
    color: black;
    transform: rotate(-15deg)translate(200px);
}


.verse4 {
    font-family: 'Kalam', cursive;
    width:650px;
    border-radius: 16px; 
    transform: rotate(-3deg);
    text-align: center;
}

.verse4:hover {
    width:90%;
    background-color: gray;
    color: black;
    border-radius: 30px; 
}

.verse5 {
    font-family: 'Shadows Into Light', cursive;
    width:450px;
    border-radius: 22px; 
    transform: rotate(-3deg);
    text-align: center;
}

.verse5:hover {
    width:450px;
    color: grey;
    border-radius: 40px; 
    transform: rotate(8deg)translate(200px);
}

.verse6 {
    font-family: 'Kalam', cursive;
    width:500px;
    border-radius: 16px; 
    transform: rotate(-3deg);
    text-align: right;
}

.verse6:hover {
    width:90%;
    color: white;
    border-radius: 40px; 
}