:root {
    font-size: 80%; /* Scale everything down to 80% */
}

html, body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

/* Fix for modal backdrops */
.modal-backdrop {
    width: 100% !important;
    height: 100% !important;
}

/* Ensure modals display correctly */
.modal-dialog {
    max-width: 80vw;
    margin: 1.75rem auto;
}

/* Adjust any fixed elements that might need specific sizing */
.btn, .form-control, .input-group, .card {
    font-size: 1rem; /* This will be 80% of the original size due to root font size */
}

/* Opt-in fix for elements that need font-size scaling */
.scale-font-size {
    font-size: inherit !important;
}

/* Ensure proper spacing: These classes (.p-1, .m-1, etc.) will automatically scale with the root font size */