.calculator { width: 100%; height: 100%; position: relative; background-color: #000; display: flex; flex-direction: column; background-color: var(--color-window-content); } .display { height: 20%; background-color: var(--color-text); color: var(--color-window-content); display: flex; flex-direction: column; padding-right: 1em; > div:nth-child(1) { font-size: 1em; padding-top: .5em; white-space: nowrap; text-align: right; } > div:nth-child(2) { font-size: 2.5em; flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; } } .keys { height: 80%; width: 100%; display: flex; & > div { height: 100%; display: flex; & > div { height: 25%; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-window-buttons); transition: .3s background-color; font-size: 2em; } &:nth-of-type(1) { width: 75%; flex-wrap: wrap; background-color: var(--color-window-popup); & > div { width: 33.3%; flex-grow: 1; &:hover { background-color: var(--color-window-content); } &:first-of-type { order: 2; } &:nth-of-type(12) { order: 3; } } } &:nth-of-type(2) { width: 25%; flex-direction: column; & > div { width: 100%; background-color: var(--color-window-menu-alt); &:hover { background-color: var(--color-window-content); } } } } }