@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');

body {
    background-color: #263238;
    font-family: 'Open Sans', sans-serif !important;
}

a {
    color: #64B5F6;
    text-decoration: none;
}

.display-none {
    display: none !important;
}

.main {
    width:100%;
    text-align: center;
    color: #ffffff;
    font-size: 24pt;
    position: relative;
    top: 40%;
}

.main div {
    height: 30pt;
    overflow: hidden;
    display: inline-block;
}

/*.text-container {
    text-align: right;
    width:64%;
}*/

.generated-container {
    text-align: left;
}

.text {
    line-height: 24pt;
}

.smart-word, .generated-word {
    font-weight: 600;
    color: #2196F3;
    line-height: 30pt;
}

.generated-word {
    display: block;
    position: relative;
}

.generated-word.current {
    -moz-transform:translateY(0%);
    -webkit-transform:translateY(0%);
    transform:translateY(0%);
}

.generated-word.move-up {
    -moz-animation: move-up  0.2s ease-out 1;
    -webkit-animation: move-up  0.2s ease-out 1;
    animation: move-up  0.2s ease-out 1;
}

@-moz-keyframes move-up {
    0%   { -moz-transform: translateY(0%); }
    100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes move-up  {
    0%   { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(-100%); }
}
@keyframes move-up  {
    0%   {
        -moz-transform: translateY(0%);
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
    100% {
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.instruction {
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    font-size: 14pt;
    font-weight: 300;
    position: relative;
    top: 65%;
}

.copyright {
    color: #f0f0f0;
    text-align: center;
    font-size: 9pt;
    font-weight: 300;
    position: relative;
    top: 82%;
}