body {background-color:#111111;

    overflow:hidden;

}

#container {
    
    width:80vw; height:90vh;
    
    margin:0 auto;
    
    display:grid;

    grid-template-areas:
        'header'
        'top'
        'bottom';

    grid-template-rows: 15% 65% 20%;
    
}

.leftTextField {
    display:inline-block;
    max-width:90%;
    text-wrap:wrap;
    margin:0px;
    border-radius:40px;
}

.rightTextField {
    display:inline-block;
    max-width:70%;
    float:right;
    
    text-wrap:wrap;
    margin:10px;
    padding:20px;
    border-radius:40px;
    background-color:#444444;
}

.textLine {
    display:inline-block;
    width:100%;
    color:white;
}

.textLine:last {
    height:100%
}

#chatBox {
    overflow-y:scroll;
    display:inline-block;
    grid-area:top;
    padding:20px;
    background-color:#222222;
    font-size:14pt;
    font-family:"Monaco";
    border-radius:10px;
}

#textInput {
    grid-area:bottom;
}

#initTextInput {
    grid-area:top;
}

.inputHolder {
    
    border-radius:40px;
    padding:20px;
    width:50%;
    margin:0 auto;
    margin-top:50px;
    background-color:#444444;
    
}

#banner {
    grid-area:header;
    width:50%;
    margin:0 auto;
}

#helpfulSuggestions {
    width:50%;
    margin:0 auto;
    color:grey;
    font-size:12pt;
    font-family:"Monaco";
}
#helpfulSuggestions a {
    margin:20px;
    text-decoration:none;
    color:grey;
    transition:color 0.1s
}
#helpfulSuggestions a:hover {
    color:lightgrey
}

textarea {
    display:block;
    width:90%;
    resize:none;
    border:none;
    background-color:#444444;
    color:lightgrey;
    font-size:18pt;
    font-family:"Monaco";
}

textarea:focus {
    outline:none;
}

#clickArrow {
    float:right;
    color:#444444;
    font-weight:bold;
    background-color:lightgrey;
    display:block;
    width:50px; height:50px;
    border-radius:25px;
    font-size:25px;
    line-height:50px;
    justify-content:space-evenly;
    display:flex;
    opacity:0.25;
    transition:opacity 0.1s;
}

#clickArrow.activated {opacity:0.5}

#clickArrow.activated:hover {opacity:1}

.blinker {
    font-size:28pt;
    line-height:0pt;
    animation: flash 1s infinite;
}

@keyframes flash {
    0% {opacity: 0.5}
    50% {opacity: 1}
    100% {opacity: 0.5}
}