@font-face{
    font-family: TradeGothic;
    src: url('../static/fonts/TradeGothicLTStd-Cn18.otf')
}

body {
    font-family: TradeGothic;
    color: grey;
}

.main-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: gainsboro;
    margin: 1rem 1rem 0rem 1rem;
    align-items: stretch;
}

.outer {
    height: 80%;
    display: flex;
    flex-direction: column;
}

.input-area {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2rem;
}

.text-input-form {
    display: grid;
    row-gap: 0.5rem;
}

.upload-area {
    display: grid;
}

.upload-form {
    height: 15.5rem;
    display: grid;
}

.buttons {
    background-color: #979797;
    width: 8rem;
    height: 1.75rem;
    align-self: end;
    color: #ffffff;
    border: none;
}

.buttons:hover {
    background-color: #c2c400;
}

input[type=file]::file-selector-button {
    background-color: #979797;
    width: 8rem;
    height: 1.75rem;
    align-self: end;
    color: #ffffff;
    border: none;
    margin-right: 0.75rem;
}

input[type=file]::file-selector-button:hover {
    background-color: #c2c400;
}

.text-input-area {
    display: grid;
}

textarea {
    height: 13rem;
}

textarea:focus {
    outline: none !important;
    border-color: #c2c400;
    box-shadow: 0 0 1px #c2c400;
}

.button-and-message-line {
    align-self: end;
    display: flex;
    gap: 1rem;
    align-items: end;
}

.generated-area {
    display: grid;
    padding: 0rem 2rem 0rem 2rem;
    grid-template-rows: 10% 90%;
}

.questions-and-answers {
    height: 100%;
}

footer {
    display: grid;
    grid-template-rows: 50% 50%;
    margin: 2rem;
}

.copyright {
    justify-self: end;
    margin-top: 1.5rem;
}

.disclaimer {
    font-size: small;
    justify-self: center;
}

.green-text {
    align: center;
    color: green;
    height: 20px;
}


.red-text {
    align: center;
    color: red;
    height: 20px;
}