html, body {
    overscroll-behavior: none;        /* Prevent rubber-band effect */
    touch-action: pan-y;              /* Allow vertical scrolling */
    height: 100%;                     /* Ensure body takes full height */
}

/* Calculator Container */
.calculator-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* Calculator Buttons */
.calcbutton {
    width: 23vw;
    height: 23vw;
 /*   max-width: 80px; */
 /*   max-height: 80px; */
    background-color: lightsteelblue;
    color: black;
    font-size: 7vw;
    text-align: center;
    padding: 0;
    touch-action: manipulation;
}

/* Labels */
label {
    font-size: 7vw;
    min-height: 10vw;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Display */
#mydisplay {
    width: 20vw;
    height: 10vw;
    font-size: 7vw;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

/* Other Styles */
h1 {
    text-align: center;
}

#header {
    font-size: 8vw;
}

div {
    text-align: center;
    margin-bottom: 0px;
}

table {
    margin-left: auto;
    margin-right: auto;
}

body {
/*   overflow: hidden; Also stops rubber band effect, but doesn't allow scrolling */
    margin: auto;
    text-align: center;
}

.right {
    text-align: right;
}
.left {
    text-align: left;
}
.center {
    text-align: center;
}

.radioinput {
    font-size: 3vw;
    vertical-align: middle;
    height: 2vw;
    width: 2vw;
}

.radiolabel {
    font-size: 3vw;
    text-align: left;
    width: 7%;
    height: 3%;
    min-height: 3vw;
}

/* Offcanvas Container */
.offcanvas-container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Adjust font sizes within the offcanvas */
.offcanvas-container label,
.offcanvas-container .radiolabel {
    font-size: 1em;
    line-height: 1.2;
}

/* Reset table cell padding and margin */
.offcanvas-container table td {
    padding: 5px;
    margin: 0;
}

/* Control table layout */
.offcanvas-container table {
    border-collapse: collapse;
}

.offcanvas-container table tr {
    height: auto;
}

.offcanvas-container .radioinput {
    width: 1em;
    height: 1em;
}

.container-header {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 15px;
}

/* Media Queries for Larger Screens */
@media (min-width: 801px) {
    .calcbutton {
        width: 184px;  /* 80px */
        height: 184px; /* 80px */
        font-size: 56px; /* 24px */
    }

    #header {
        font-size: 64px;
    }

    label, #mydisplay {
        font-size: 56px;
    }

    #mydisplay {
        width: 160px;
        height: 80px;
    }

    label {
        min-height: 0;
    }

    .offcanvas-container label,
    .offcanvas-container .radiolabel {
        font-size: 16px;
    }

    .offcanvas-container .radioinput {
        width: 16px;
        height: 16px;
    }
}

.disable-select {
    user-select: none;          /* Supported by Chrome and Opera */
    -webkit-user-select: none;  /* Safari */
    -khtml-user-select: none;   /* Konqueror HTML */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
}