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

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: 	#E0FFFF;
}

.calculadora {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 275px;
    height: 375px;
    background-color:#708090;
    padding: 14px;
    border-radius: 10px;

    & .pantalla {
        grid-column: 1 / 5;
        background-color: #98c91a;
        font-family: monospace;
        font-size: 24px;
        margin-bottom: 30px;
        box-shadow: #0008 2px 3px 10px inset, #0008 0 0 3px inset;
        padding: 0 3px;
        border-radius: 5px;
        outline: thick double rgba(73, 255, 103, 0.595);
    }

    & .btn:nth-child(18) {
        grid-row: 6 / 8;
        grid-column: 4 / 5;
    }

    & h2 {
        grid-column: 1 / 5;
        font-size: x-small;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: hsla(210, 20%, 20%, 0.2);
    }

    & .btn {
        background-color: #696969;
        color: #ffff;
        font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
        font-weight: 600;
        font-size: larger;
        border: 0;
        box-shadow: #656865 -1px 1px, #656865 -2px 2px, #656865 -3px 3px;
        border-radius: 5px;
        transition: all 0.2s ease-in-out;

        &:active {
            transform: translateY(4px);
            box-shadow: none;
        }
    }

    & .clear {
        background-color: 	#A52A2A;
        box-shadow: #af2020 -1px 1px, #af2020 -2px 2px, #af2020 -3px 3px;
    }

    & .igual {
        background-color: rgb(62, 96, 199);
        box-shadow: #5959df -1px 1px, #5959df -2px 2px, #5959df -3px 3px;
    }
}