html,
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.theme-0 {
    --page-background: #000000;
    --calculator-background: #5BCEFA;
    --button-background: #F5A9B8;
    --button-active: #f28da1;
    --text-color: #FFFFFF;
    --border-color: #FFFFFF;
    --text-active: #ebebeb;
    --border-active: #ebebeb;
}
.theme-1 {
    --page-background: white;
    --calculator-background: gray;
    --button-background: gainsboro;
    --button-active: lightgray;
    --text-color: black;
    --border-color: black;
    --text-active: black;
    --border-active: black;
}
.theme-2 {
    --page-background: #151515;
    --calculator-background: #252525;
    --button-background: #7B61FF;
    --button-active: #6249d4;
    --text-color: #FFFFFF;
    --border-color: #FFFFFF;
    --text-active: #ebebeb;
    --border-active: #ebebeb;
}
.theme-3 {
    --page-background: magenta;
    --calculator-background: lime;
    --button-background: cyan;
    --button-active: blue;
    --text-color: yellow;
    --border-color: red;
    --text-active: yellow;
    --border-active: red;
}
.calculator-theme {
    width: 100vw;
    height: 100vh;
    background-color: var(--page-background);
    display: flex;
    justify-content: center;
    align-items: center;
}
.calculator-container {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    background: none;
    width: 100vw;
    height: 100vh;
    cursor: default;
}
.calculator {
    background-color: var(--calculator-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 330px;
    height: 450px;
    border: 3px solid var(--border-color);
    padding: 0;
    box-sizing: border-box;
}
.calculator > * {
    flex-shrink: 0;
}
.display-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.display {
    color: var(--text-color);
    background-color: var(--button-background);
    width: 310px;
    height: 70px;
    font-size: 50px;
    text-align: right;
    border: 2px solid var(--border-color);
    padding: 0;
}
.mode-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.short-button {
    width: 70px;
    height: 30px;
    font-size: 15px;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    background-color: var(--button-background);
}
.short-button:active {
    color: var(--text-active);
    border: 3px solid var(--border-active);
    background-color: var(--button-active);
}
.magmafish-button {
    width: 230px;
    height: 30px;
    font-size: 15px;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    background-color: var(--button-background);
    cursor: pointer;
}
.magmafish-button:active {
    color: var(--text-active);
    border: 3px solid var(--border-active);
    background-color: var(--button-active);
}
.button-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.button-row:last-child {
    margin-bottom: 0;
}
.large-button {
    width: 70px;
    height: 70px;
    font-size: 50px;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    background-color: var(--button-background);
    cursor: pointer;
}
.large-button:active {
    width: 70px;
    height: 70px;
    font-size: 50px;
    color: var(--text-active);
    border: 3px solid var(--border-active);
    background-color: var(--button-active);
}