@import url(https://fonts.googleapis.com/css?family=Roboto:100);

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    margin: 0;
    padding: 0;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    font-family: 'Roboto';
    font-weight: 100;
}

body {
    /* display: flex; */
    justify-content: center;
    /* margin-top: 1em; */
    font-size: 2em;
    background-color: #bbb;
    height: 98vh;
    /* overflow: hidden; */
}

.calculator {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 100%;
    width: 100%;
    box-shadow: 0px 3px 10px 3px #aaa;
    border-right: 0.01em solid #333;
    border-bottom: 0.01em solid #333;
}

.result {
    width: 100%;
    background-color: #000;
    height: 15%;
    color: white;
}

.result>p {
    padding: 0 1em;
    text-align: right;
    /* line-height: 2em; */
    /* top: 50%; */
    transform: translate(0%, 100%);
}

span {
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    width: 25%;
    background-color: #ccc;
    /* line-height: 100%; */
    border-top: 0.01em solid #333;
    border-left: 0.01em solid #333;
    font-size: 4em;
}

.operator {
    background-color: #FF9500;
    color: white;
}

.double {
    width: 50%;
}

.grey {
    background-color: #aaa;
}

.clicked {
    background-color: rgb(206, 134, 0);
}
.title-bar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    height: env(titlebar-area-height, 50px);
    width: env(titlebar-area-width, 100%);
    -webkit-app-region: drag;
  }



::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background:transparent;
}