@import url('https://fonts.googleapis.com/css?family=Boogaloo');
@import url('https://fonts.googleapis.com/css?family=Satisfy');
body {
    background: #6699ff;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #00cc99, #6699ff);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #00cc99, #6699ff);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #00cc99, #6699ff);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, #00cc99, #6699ff);
    /* Standard syntax */
    overflow: hidden;
}

#hover_here {
    position: relative;
    height: 30%;
    top: 250px;
    color: green;
    font-size: 1.5em;
    width: 400px;
    margin: auto;
    text-align: center;
}

#title {
    position: relative;
    color: white;
    font-size: 1.5em;
    top: 200px;
    width: 400px;
    margin: auto;
    text-align: center;
}

@media screen and (min-width: 600px) {
    @keyframes arrow_move {
        0% {
            color: black;
            left: 50px;
        }
        100% {
            color: rgb(223, 93, 93);
            left: 15px;
        }
    }
    @-webkit-keyframes arrow_move {
        0% {
            color: black;
            left: 50px;
        }
        100% {
            color: rgb(223, 93, 93);
            left: 15px;
        }
    }
    .fa-angle-left {
        position: fixed;
        top: 315px;
        height: 50%;
        color: black;
        z-index: 2;
        animation: arrow_move 1s ease-in 0s infinite alternate;
        -webkit-animation: arrow_move 1s ease-in 0s infinite alternate;
    }
}

#body {
    position: relative;
    top: 160px;
    display: none;
    width: 900px;
    margin: auto;
    background: #b3ffff;
    padding: 25px;
    border-radius: 25px;
    max-height: 400px;
}

#quotes_container {
    display: none;
    max-height: 400px;
}

.img {
    max-width: 100%;
    max-height: 250px;
    border-radius: 20px;
    width: calc(150%/2);
    height: calc(100%/2);
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: center;
    border-radius: 100px;
}

#getQuoteDiv {
    position: relative;
    top: 10px;
}

#getQuote {
    font-size: 18px;
    outline: none;
}

#getQuote:hover {
    background: #0099ff;
    color: white;
    cursor: pointer;
}

#getQuote2 {
    font-size: 18px;
    outline: none;
}

#getQuote2:hover {
    background: #0099ff;
    color: white;
    cursor: pointer;
}

#twitter {
    position: relative;
    font-size: 18px;
    outline: none;
}

#twitter:hover {
    color: #0099ff;
    cursor: pointer;
}

#quote {
    font-family: 'Boogaloo', cursive;
    font-size: 1.5em;
    position: relative;
    top: 20px;
}

#name {
    font-family: 'Satisfy', cursive;
    font-size: 2em;
    position: relative;
    top: 35px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#footer strong {
    line-height: 50px;
}

#footer a {
    color: white;
    text-decoration: none;
}