/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap'); */

:root {
    --defaultcolor: #9c00c4;
    --calcbntnumcolor: #4f0163;
    --onesquare: #ac4907;
    --twosquare: #018501;
    --threesquare: #0a0a9c;
    --darkredsquare: #d45806;
    --darkgreensquare: #01a101;
    --darkbluesquare: #2929f3;
}

/* [data-bg="defaultcolor"] {
    background: var(--defaultcolor);
} */

[data-bg="onesquare"] {
    background: var(--onesquare);
}

[data-bg="twosquare"] {
    background: var(--twosquare);
}

[data-bg="threesquare"] {
    background: var(--threesquare);
}

[data-bg="darkonesquare"] {
    background: var(--darkredsquare);
}

[data-bg="darktwosquare"] {
    background: var(--darkgreensquare);
}

[data-bg="darkthreesquare"] {
    background: var(--darkbluesquare);
}

html {
    font-family: 'Segoe UI', sans-serif;
}

*, ::before, ::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/* .bebas-neue-regular {
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: normal;
} */
  
.calculator-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* padding-bottom: 8px; */
}

.calculator-info > div {
    width: 13px;
    height: 13px;
    cursor: pointer;
}

.calculator-info div:nth-child(2) {
    background: #ff5e00;
}

.calculator-info div:nth-child(4) {
    background: #0000ff;
}

.calculator-info div:nth-child(3) {
    background: #00ff00;
}

.calculator { 
    min-height: 422px;
    min-width: 390px;
    max-width: 390px;
    /* border: 10px solid var(--defaultcolor); */
    border-radius: 10px;
    padding: 0 10px;
}

h2 {
    color: #fff;
    letter-spacing: 1px;
    font-family: inherit;
    font-weight: 500;
    padding: 10px 0;   
}

.display {
    width: 100%;
    height: 60px;
    background-color: white;
    color: rgb(70, 70, 70);
    word-break: break-all;
    padding-right: 5px;
    margin-bottom: 3px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.currentNumber {
    font-size: 35px;
}

.previousNumber {
    font-size: 35px;
}

.mathSign {
    font-size: 20px;
}

.panel {
    min-height: 300px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 3px;
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: inherit;
    /* background-color: var(--calcbntnumcolor); */
    color: white;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all .2s ease-in-out;
    
}

/* button.number {
    background-color: var(--calcbntnumcolor);
} 

.equals:hover {
    background-color: #b603e2;
}*/

.equals {
    grid-row: -1/-2;
    grid-column: -3/-1;
}

.active {
    background-color: var(--defaultcolor);
}

.activeBtn {
    background-color: var(--calcbntnumcolor);
}