:root {
    --background-color: #9ab3e2;
    --border: #3b4c6b;
    --upper-bg: #a4bac7;
    --lower-bg: #d6e2e0;
    --screen-bg: #cfddba;
    --dark-button-lighter: #5985a2;
    --dark-button: #50748c;
    --dark-button-darker: #395262;
    --light-button-lighter: #86aab9;
    --light-button: #7798a8;
    --light-button-darker: #5f7884;
    --orange-button-lighter: #ff9a34;
    --orange-button: #ff8202;
    --orange-button-darker: #b05800;
}


body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: monospace;    
  background-color: var(--background-color);
}

.calculator {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.flex-horizontal, .horizontal-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.flex-vertical {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.upper-calculator {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border: 6px solid var(--border);
    border-bottom: 3px solid var(--border);
    width: 270px;
    height: 100px;
    background-color: var(--upper-bg);
}

.screen {
    font-family: monospace;
}

.history {
    margin: 2px 0 10px 2px;
}

.last-input {
    text-align: end;
    margin: 0 2px 10px 2px;
    font-size: 18px;
}

.lower-calculator {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border: 6px solid var(--border);
    border-top: 3px solid var(--border);
    width: 270px;
    height: 280px;
    background-color: var(--lower-bg);
}

.screen {
    width: 220px;
    height: 55px;
    background-color: var(--screen-bg);
    border: 5px solid var(--border);
    border-radius: 9px;
}

.buttons {
    margin: 16px;
    gap:  8px;
}

.horizontal-buttons {
    gap:  8px;
}
.vertical-buttons{
    gap:  8px;
}

.left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:  8px;
}

.upper, .lower {
    gap:  8px;
}

.first-row-button, .regular-row-button {
    width: 50px;
    height: 35px;
    border: 3px solid var(--border);
    border-radius: 10px;
    color: white;
    font-size: 24px;
    transition: all ease 0.07s;
    transform: translateY(0);
    font-family: monospace;
}

.first-row-button {
    background-color: var(--dark-button);
    box-shadow: 0 4px 0 0 var(--dark-button-darker);
}

.first-row-button:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--dark-button-darker);
}

.first-row-button:hover {
    background-color: var(--dark-button-lighter);
}

.regular-row-button {
    background-color: var(--light-button);
    box-shadow: 0 4px 0 0 var(--border);
}

.regular-row-button:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--border);
}

.regular-row-button:hover {
    background-color: var(--light-button-lighter);
}

.wide-button {
    width: 108px;
}

.high-button {
    width: 50px;
    height: 78px;
    border: 3px solid var(--orange-button-darker);
    border-radius: 10px;
    color: white;
    font-size: 24px;
    background-color: var(--orange-button);
    box-shadow: 0 4px 0 0 var(--orange-button-darker);
    transition: all ease 0.07s;
    transform: translateY(0);
    font-family: monospace;
}

.high-button:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 0 var(--orange-button-darker);
}

.high-button:hover {
    background-color: var(--orange-button-lighter);
}