* {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

button {
    color: white;
    border: none;
    background: none;
    font-size: inherit;
}

button:hover {
    background-color: rgb(64, 64, 64);
}

button:active, button.clicked {
    background-color: rgb(96, 96, 96);
}

#calculator-container {
    z-index: 1337;
    position: fixed;
    visibility: hidden;
    top: 0;
    margin: 1em;
    background-color: rgb(31, 31, 31);
    border: 1px solid rgb(42, 139, 215);
    color: white;
    min-width: 350px;
    width: 25vw;
    min-height: 625px;
    height: 40vh;
    box-shadow: 6px 6px 12px 3px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 2em auto auto auto 3em auto auto auto auto auto auto;
    justify-items: stretch;
}

#main-button-grid {
    display: grid;
    grid-row: 6 / span 6;
    grid-column: 1 / span 4;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    padding: 0.25em;
}

#top-bar {
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    padding: 0;
    margin: 0;
    border: 0;
}

#app-name {
    display: inline-block;
    font-size: 75%;
    padding-left: 1em;
    padding-top: 0.75em;
}

#app-controls {
    float: right;
    box-sizing: border-box;
    color: grey;
}

.app-control-item {
    box-sizing: border-box;
    padding: 0;
    border: 0;
    width: 3em;
    height: 2em;
}

#app-close:hover {
    color: white;
    background-color: rgb(232, 17, 35);
}

#menu-container {
    display: none;
}

#second-bar {
    grid-column: 1 / span 4;
    grid-row: 2 / span 1;
    padding: 0;
    margin: 0;
    display: flex;
}

.second-bar-item {
    font-size: 150%;
    height: 2em;
    width: 2em;
}

#calculator-type {
    flex-grow: 1;
    font-size: 150%;
    height: 2em;
    line-height: 2em;
    margin-left: 0.5em;
}

#display-container {
    grid-column: 1 / span 4;
    grid-row: 3 / span 2;
    text-align: right;
    padding-right: 1em;
}

#previous-operation-display:after {
    content: '\200b'; /* fixed: empty div wont display */
}

#previous-operation-display {
    color: grey;
    padding: 0;
    margin: 0;
    padding-right: 1em;
}

#display-current {
    margin: 0;
    font-size: 300%;
    background: none;
    border: none;
    color: white;
    text-align: right;
    width: 100%;
}

#memory-controls-container {
    grid-column: 1 / span 4;
    grid-row: 5 / span 1;
    display: flex;
}

.memory-control-item {
    font-size: 90%;
    flex-grow: 1;
    border: none;
    padding: 1em;
    margin: 0.2em;
    height: 3em;
}

#percent {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

#square-root {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

#square {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1
}

#one-over {
    grid-column: 4 / span 1;
    grid-row: 1 / span 1;
}

#clear-entry {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

#clear {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

#backspace {
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}

#divide {
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
}

#multiply {
    grid-column: 4 / span 1;
    grid-row: 3 / span 1;
}

#subtract {
    grid-column: 4 / span 1;
    grid-row: 4 / span 1;
}

#add {
    grid-column: 4 / span 1;
    grid-row: 5 / span 1;
}

#sign {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
}

#decimal {
    grid-column: 3 / span 1;
    grid-row: 6 / span 1;
}

#equals {
    grid-column: 4 / span 1;
    grid-row: 6 / span 1;
}

#nine {
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
}

#eight {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
}

#seven {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
}

#six {
    grid-column: 3 / span 1;
    grid-row: 4 / span 1;
}

#five {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
}

#four {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
}

#three {
    grid-column: 3 / span 1;
    grid-row: 5 / span 1;
}

#two {
    grid-column: 2 / span 1;
    grid-row: 5 / span 1;
}

#one { 
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
}

#zero {
    grid-column: 2 / span 1;
    grid-row: 6 / span 1;
}

.main-button {
    background-color: rgb(16, 16, 16);
    font-size: 140%;
    padding: 0.75em;
    margin: 0.1em;
    z-index: 2;
}

.number-button {
    background-color: black;
}

.blue-bg:hover {
    background-color: rgb(0, 120, 215);
}

.blue-bg:active, .blue-bg.clicked {
    background-color: rgb(0, 79, 143);
}

.history-and-memory-container {
    grid-column: 1 / span 4;
    grid-row: 6 / span 6;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 10;
    background-color: rgba(43,43,43,1);
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 0px;
    transition-property: height top;
    transition-duration: 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
}

.h-and-m-open {
    height: 100%;
    top: 0;
}

#history-list {
    flex-grow: 1;
    overflow-y: scroll;
}

.history-item {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: right;
    padding: 0.5em;
    padding-right: 1em;
    cursor: pointer;
}

.history-item-ops {
    text-align: right;
    color: grey;
}

.history-item-total {
    text-align: right;
    color: white;
    font-size: 175%;
    margin-top: 0.5em;
}

.history-item:hover {
    background-color: rgb(64,64,64);
}

#history-trash {
    margin-left: auto;
    font-size: 300%;
    flex-grow: 0;
    height: 1.5em;
    width: 1.5em;
}

#memory-list {
    flex-grow: 1;
    overflow-y: scroll;
}

.memory-item {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: right;
    padding: 0.5em;
    padding-right: 1em;
    cursor: pointer;
}

.memory-item-value {
    font-size: 150%;
    padding: 0.5em;
}

.memory-item-button {
    font-size: 80%;
    padding: 1em;
}

.memory-item:hover {
    background-color: rgb(64,64,64);
}

.memory-item-button:hover {
    background-color: rgb(96, 96, 96);
}

#memory-trash {
    margin-left: auto;
    font-size: 300%;
    flex-grow: 0;
    height: 1.5em;
    width: 1.5em;
}