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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: sans-serif;
    background-color: hsl(267, 65%, 18%);
}

.calculator {
    display: grid;
    grid-template-areas: 
    "display display display display"
    "clear   clear   clear   addition"
    "seven   eight   nine    subtraction"
    "four    five    six     multiplication"
    "one     two     three   division"
    "nought  nought  nought  equals";
    gap: 0.2rem;
    padding: 1rem;
    width: min(35rem, 100%);
    height: calc(100% - 10rem);
    background-color: hsl(267, 100%, 50%);
    box-shadow: 0px 5px 20px 0px hsl(267 100% 68% / 0.4);
    border-radius: 20px;
}

.calculator__button {
    border: none;
    font-size: 1.2rem;
    background-color: hsl(267, 100%, 40%);
    box-shadow: inset -6px 6px 0px 0px rgba(0, 0, 0, 0.4);
    color: white;
    border-radius: 10px;
    transition: transform, box-shadow 0.15s 0s ease-in-out;
}

.calculator__button:hover,
.calculator__button:focus-visible {
    transform: translateX(3px) translateY(-3px);
    box-shadow: inset -3px 2px 0px 0px rgba(0, 0, 0, 0.4);
}

.calculator__display {
    grid-area: display;
    padding: 1rem;
    text-align: right;
    color: white;
    font-size: 3rem;
    word-break: break-all;
    background-color: hsl(267, 100%, 40%); 
    border-radius: 10px;
}

.calculator__button:nth-child(2) { grid-area: nought; }
.calculator__button:nth-child(3) { grid-area: one; }
.calculator__button:nth-child(4) { grid-area: two; }
.calculator__button:nth-child(5) { grid-area: three; }
.calculator__button:nth-child(6) { grid-area: four; }
.calculator__button:nth-child(7) { grid-area: five; }
.calculator__button:nth-child(8) { grid-area: six; }
.calculator__button:nth-child(9) { grid-area: seven; }
.calculator__button:nth-child(10) { grid-area: eight; }
.calculator__button:nth-child(11) { grid-area: nine; }
.calculator__button:nth-child(12) { grid-area: addition; }
.calculator__button:nth-child(13) { grid-area: subtraction; }
.calculator__button:nth-child(14) { grid-area: multiplication; }
.calculator__button:nth-child(15) { grid-area: division; }
.calculator__button:nth-child(16) { grid-area: equals; }
.calculator__button:nth-child(17) { grid-area: clear; }