@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap');

/* Body */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
}

/* Calculators properties */
.calculator {
    max-width: 450px;
    background-color: #383838;
    border-radius: 2%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 5px 20px 0px #000000, inset 0px 5px 20px 0px #000000;

}

/* Display */
#screen {
    width: 90%;
    height: 100px;
    border-radius: 2px;
    background-color: #494949;
    color: #d4d4d4;
    margin: auto;
    margin-top: 20px;
    box-shadow: inset 0px 5px 20px 0px #000000;
}

input {
    font-family: 'Bai Jamjuree', sans-serif;
    text-align: right;
    padding: 0 12.5px 0 12.5px;
    font-size: 50px;
}

/* Buttons properties */
/* Frame for the buttons */
#key-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 25px;
}

/* Buttons */
button {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 100%;;
    width: 75px;
    height: 75px;
    border-radius: 5px;
    border: 0.5px solid #d4d4d4;
    background-color: #3a3a3a;
    color: #d4d4d4;
    cursor: pointer;
    box-shadow: 0px 5px 20px 0px #000000, inset 0px 5px 20px 0px #000000;
    transition: box-shadow 0.3s ease-in-out;
}

button:hover {
    background-color: #494949;
    box-shadow: 0px 5px 25px 0px #000000, inset 0px 5px 25px 0px #000000;
}

button:active {
    background-color: #696969;
    box-shadow: 0px 5px 15px 0px #000000, inset 0px 5px 15px 0px #000000;
}

.operators {
    background-color: #505200;
}

.operators:hover {
    background-color: #686900;
}

.operators:active {
    background-color: #8c8f00;
}

.decimals {
    background-color: #002c5f;
}

.decimals:hover {
    background-color: #003572;
}

.decimals:active {
    background-color: #004797;
}

.equals {
    background-color: #006100;
    grid-column: span 4;
    width: calc(100%);
}

.equals:hover {
    background-color: #007000;
}

.equals:active {
    background-color: #008800;
}

.clears {
    background-color: #610000;
}

.clears:hover {
    background-color: #700000;
}

.clears:active {
    background-color: #960000;
}

.author {
    font-family: 'Bai Jamjuree', sans-serif;
    color: #666666;
}