*, *::before, *::after {
    box-sizing: border-box;
    font-family: Spartan, sans-serif ;
    font-weight: 700;
}

:root {
    --darkblue : hsl(222, 26%, 31%); 
    --darkerblue: hsl(223, 31%, 20%);
    --evendarkerblue: hsl(224, 36%, 15%);
    --grayorange: hsl(30, 25%, 89%);
    --grayorangeshadow: hsl(28, 16%, 65%);
    
 }   
 

body {
    padding: 0;
    margin: 0;
    background-color: var(--darkblue) ;
}

h1 {
    align-items: center;
    color: white;
}

.screen {
    width: calc(4*5.3rem + 3rem + 2rem);
    min-height: 8rem;
    background-color: var(--evendarkerblue);
    border-radius: 10px;
    margin: 0 auto 20px auto;
    position: relative;
    word-wrap: break-word;
    word-break: break-all;
}
.screen div {
    margin: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 3rem;
    color: white;
}

.calculator-grid {
    height: calc(5*3.75rem + 7rem);
    width: calc(4*5.3rem + 3rem + 2rem);
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(4, 5.3rem);
    grid-template-rows: repeat(5,3.75rem);
    grid-gap: 1rem;
    background-color: var(--darkerblue);
    border-radius: 10px;
    margin: auto;
}

.calculator-grid button {
    cursor: pointer;
    outline: none;
    color: var(--darkblue);
    border:0;
    border-bottom: 5px solid hsl(28, 16%, 65%);
    border-radius: 8px;
    font-size: 1.5rem;
    background-color: var(--grayorange);
    transform: scale(1);
    transition: 0.2s;
}

.calculator-grid button:active{
    transform: scale(.95);
}

.calculator-grid button:hover{
    background-color: whitesmoke;
}

.span-two {
    grid-column: span 2;
}

#delete {
    color: white;
    background-color: hsl(225, 21%, 49%) ;
    border-bottom: 5px solid hsl(224, 28%, 35%);
}

#equal {
    color: white;
    background-color: hsl(6, 63%, 50%);
    border-bottom: 5px solid hsl(6, 70%, 34%);
}

#reset {
    color: white;
    background-color: hsl(225, 21%, 49%) ;
    border-bottom: 5px solid hsl(224, 28%, 35%);
}

.output {
    grid-column: 1/-1 ;
    color: white;   
    font-size: 1.9rem;
    background-color: var(--evendarkerblue);
    text-align: right;
    padding: 20px;
    word-wrap: break-word;
    word-break: break-all;
    border-radius: 8px;
    
}

article[data-number] {
    color: red;
}