@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background: #2b6284;
    color: #fff;
    background: #2b6284;
}

#wall {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 0%;
}

#wall .brick {
    background: #000;
    overflow: hidden;
    position: absolute;
    border: 1px solid transparent;
    transform: rotate(3deg);
    opacity: 0.0;
    margin-left: 20px;
    transition-property: opacity, transform, margin-left;
    transition-duration: 0.15s;
    z-index: 0;
}

#wall .brickIn {
    border: 1px solid #367399 !important;
    transform: rotate(0deg) !important;
    opacity: 1.0 !important;
    margin-left: 0 !important;
}

#overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#quote {
    padding: 100px 10px 5px 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100px, rgba(0,0,0,0.6) 100%);
    position: absolute;
    left: 0; bottom: 0; right: 0;
    font-size: 24px;
    z-index: 2;
    font-family: 'Indie Flower', cursive;
    text-shadow: #000 5px;
    line-height: 130%;
    text-shadow: 1px 1px 1px #000;
}

#goodbye {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 350px;
    margin-left: -175px;
    margin-top: -175px;
    z-index: 2;
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 0.0;
}