body {
    margin-right: auto;
    margin-left: auto;
    max-width: 42rem;
    background-image: url("mini3.jpg");

    background-repeat: no-repeat;
    background-size: 100% 115%;
    opacity: 0.8;
    z-index: -1;
}

:root {
    --primary-color: #6f60f5c7;
}

.navigation {
    background-color: var(--primary-color);

    padding: 1rem;
}
.navigation .nav-name {
    font-weight: bolder;
}
.navigation .nav-name h1 {
    text-align: center;
}

#text-input {
    font-size: 1.5em;
    width: 90%;
    height: 20vh;
    margin: 1rem 1rem;
    padding: 1rem;
    background-color: transparent;
    color: bisque;
}

#btn-translate {
    border: 1px solid var(--primary-color);
    margin: 1rem 1rem;
    padding: 1rem;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

#output-div {
    border: 1px solid rgb(134, 133, 133);
    width: 90%;
    height: 20vh;
    margin: 4rem 1rem;
    padding: 1rem;
    color: rgb(56, 248, 8);
    font-size: 2.2em;
}

.footer {
    padding: 1rem 1rem;
    text-align: center;
    color: rgb(255, 215, 38);
    font-size: 30px;
}

.footer .footer-header {
    font-weight: large;
}