@media screen and (orientation: landscape) { html { /* Rotate the content container */ transform: rotate(-90deg); transform-origin: left top; /* Set content width to viewport height */ width: 100vh; /* Set content height to viewport width */ height: 100vw; overflow-x: hidden; position: absolute; top: 100%; left: 0; } }body, div.ui-page { background-color: white; height:100%; overflow: hidden; min-height:0px; width:fit-content; margin:0; padding:0; background: BLACK; width: 100%; background-repeat: no-repeat; background-size: 100%; }.fullScreen{ position: absolute; z-index: 1; color: #424242; font-size: 1.2em; white-space: break-spaces; left: 15px; top: 15px; }.calculator { position: relative; margin: 0; display: block-inline; background-color: black; border-radius: 35px; font-family: sans-serif; height: 100vh;} p { margin: 0 auto; padding: 0; /*transform: translate(0, 30%);*/ /* TEXT-ALIGN: center; */ /* vertical-align: middle; */ height: fit-content; } .calc-row { text-align: center; display:block; }.calc-row div.screen { font-family: sans-serif; display: table; width: 85%; background-color: black; text-align: right; font-size: 6em; color: white; border-radius:0; /*height: calc(100vh/4);*/ position: relative; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -4px;}.screen>span.screenText, .screen>span.thirdLetter { position: absolute; right: 15px; bottom: 7%; white-space: nowrap; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right:2px; }.calc-row div { text-align: center; display: inline-block; /*border: 1px solid #555;*/ background-color: #333; margin: 4px; /*7px 5px;*/ border-radius: 50%; /*15px;*/ width: 20%; /*50px;*/ cursor: pointer; color: white; -webkit-tap-highlight-color: transparent; user-select:none; font-size:2.2em; }div.button.operator { background-color:#f1a33c;}div.button.operator.minus>p { margin-top: 24px; letter-spacing: -2px; text-align: center; }div.button>span { margin-top: 34%; display: block; }div.button.cancel, div.plus-minus, div.percent { background-color:#a5a5a5; color: black; }div.plus-minus>p { display:inline-block } div.plus-minus>p:nth-child(1) { position: absolute; z-index: 5; visibility: visible; color: transparent;position: absolute; } div.plus-minus>p:nth-child(2) { font-size: .7em; transform: translate(0, -25%); } div.plus-minus>p:nth-child(3) { -webkit-transform: rotate(34deg); } div.plus-minus>p:nth-child(4) { font-size: .7em; letter-spacing: -4px; transform: translate(-80%, 20%); }.calc-row div.zero { border-radius: 50px; width: 40%; margin-right: 5px; text-align:left; height: 90px; width: 42%; }.calc-row div.zero>p { margin-left: 25px; }div.button:active { background-color:#ffffff73; }div.button.operator:active { background-color:white; color:#f1a33c; }div.button.active { background-color:white; color:#f1a33c;}