@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

blockquote {
    border-left     : 2px solid #fff !important;
    background-color: #ffffff33;
    color           : #fff
}


* {
    margin : 0px;
    padding: 0px;
}

.card {
    transition: 0.2 all ease-in-out !important;
    transform : scale(1) rotate(0deg) !important;
    height    : 100%;
    display   : flex;

}

.card:hover {
    transition: 0.2 all ease-in-out !important;
    transform : scale(1.2) rotate(-2deg) !important;
    z-index   : 9999;
}

body {

    font-family     : 'Exo', sans-serif;
    background-color: #100D48;
}


#quote {
    font-family: monospace;
}


.context {
    width   : 100%;
    position: absolute;
    top     : 10vh;

}

.context h1 {
    text-align : center;
    color      : #fff;
    font-size  : 50px;
    text-shadow: 0px 0px 26px #fff;
}


.area {

    pointer-events: none;
    background    : linear-gradient(to top, #100D48, #2B22C0);
    width         : 100%;
    min-height    : 100vh;
    position      : fixed;
    bottom        : 0px;
    z-index       : -1;


}

.circles {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    overflow: hidden;
}

.circles li {
    position  : absolute;
    display   : block;
    list-style: none;
    width     : 20px;
    height    : 20px;
    background: rgba(255, 255, 255, 0.2);
    animation : animate 25s linear infinite;
    bottom    : -150px;

}

.circles li:nth-child(1) {
    left           : 25%;
    width          : 80px;
    height         : 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2) {
    left              : 10%;
    width             : 20px;
    height            : 20px;
    animation-delay   : 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left           : 70%;
    width          : 20px;
    height         : 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left              : 40%;
    width             : 60px;
    height            : 60px;
    animation-delay   : 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left           : 65%;
    width          : 20px;
    height         : 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left           : 75%;
    width          : 110px;
    height         : 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left           : 35%;
    width          : 150px;
    height         : 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left              : 50%;
    width             : 25px;
    height            : 25px;
    animation-delay   : 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left              : 20%;
    width             : 15px;
    height            : 15px;
    animation-delay   : 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left              : 85%;
    width             : 150px;
    height            : 150px;
    animation-delay   : 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0% {
        transform    : translateY(0) rotate(0deg);
        opacity      : 1;
        border-radius: 0;
    }

    100% {
        transform    : translateY(-1000px) rotate(720deg);
        opacity      : 0;
        border-radius: 50%;
    }

}




.card-body {

    justify-content: space-between;
    height         : 100%;
    display        : flex;
    flex-direction : column;
}