/* ================================================== */
/* SECTIONS */
/* ================================================== */

.input-section { max-width: 70%; }
.output-section { max-width: 30%; }

#settingsButton {
    position: relative;
    anchor-name: --SettingsAnchor;
}

#settingsModal {
    border: none;
    position: absolute;
    position-anchor: --SettingsAnchor;
    position-area: bottom right;
    position-try-fallbacks:
        bottom left,
        top right, top left,
        top center, bottom center;
}

/* ================================================== */
/* & RESPONSIVENESS */
/* ================================================== */

@media (max-width: 1024px) {
    .main .main_body { flex-direction: column; }
    
    .input-section,
    .output-section { max-width: 100%; }
}