html,
body {
    min-height: 100%;
    background: #fff;
}

body {
    overflow: hidden;
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
}

.hero {
    display: none;
}

.translator {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.translator-bar {
    min-height: 66px;
    padding: 16px 24px;
}

.translation-pane {
    min-height: 265px;
}

.translation-pane textarea[readonly] {
    resize: none;
}

.result-card {
    padding: 20px 22px;
}

@media (max-width: 720px) {
    main {
        width: 100%;
        padding: 0;
    }

    .translation-pane {
        min-height: 210px;
    }

    .translator-bar {
        flex-wrap: wrap;
        gap: 12px;
    }
}