html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(232, 231, 236);
    font-family: "Noto Sans", sans-serif;
}

#main-content {
    padding: 4%;
    width: 92%;
}

#tool-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.5fr;
    gap: 20px;
}

@media screen and (min-width: 784px) {
    #tool-area {
        grid-template-columns: 0.5fr 0.5fr;
        grid-template-rows: 1fr;
    }
}

#hanzi-inp { 
    resize: none;
    border: none;
    outline: none;
    padding: 2%;
    border-radius: 5px;
    width: 94%;
    height: 500px;
    margin: 1%;
}

#output-text {
    padding: 2%;
    border-radius: 5px;
    width: 94%;
    height: 500px;
    background-color: white;
    margin: 1%;
    box-sizing: border-box; /* Border-box is default for textareas (#hanzi-inp) */
}

.accent-text {
    padding-bottom: 4px;
    font-size: 0.8rem;
    color: rgb(58, 51, 51);
}