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

body {
    font-family: 'Big Shoulders Text', Arial, Verdana, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    background: #0f0d35;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
      linear-gradient(217deg, rgba(255, 105, 105, 0.8), rgba(255, 0, 157, 0) 70.71%),
      linear-gradient(127deg, rgba(93, 24, 255, 0.8), rgba(139, 38, 255, 0) 70.71%),
      linear-gradient(336deg, rgba(255, 135, 23, 0.8), rgba(0, 153, 255, 0) 70.71%);
}

#calculator {
    width: 50%;
    max-width: 50rem;   
    height: 70%;
    max-height: 70rem;
    display: grid;
    grid-template-rows: 25% 75%;
    grid-template-columns: 1fr;
    border: #fff 1px solid;
    border-radius: 1.2rem;
    /* box-shadow: 0 0 .5rem #d6c7ff; */
    overflow: hidden;
}

.display {
    width: 100%;
    color: white;
    font-size: 4rem;
    backdrop-filter: blur(3px);
    /* background: rgba(255, 255, 255, 0.6);
    background: linear-gradient(rgb(70,70,70),rgb(40,40,40)); */
    background: linear-gradient(to Top, rgba(255,255,255,.5), transparent);
    border: #919191 1px solid;
    border-radius: 1.2rem 1.2rem 0 0;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

.keys {
    background: #919191;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

button {
    font-family: 'Big Shoulders Text', Arial, Verdana, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: bold;
}

button:focus {
    outline: none;
}

button:active {
    border: white 1px solid; 
    outline: none;
}

.key {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgb(230,230,230),rgb(190,190,190));
    /* background: linear-gradient(rgb(230,230,230),rgb(160,160,160)); */
    border: #919191 1px solid;
}

.key:active {
    background: linear-gradient(rgb(160,160,160), rgb(216,216,216));
}

.decimal {
    border-radius: 0 0 0 1.2rem;
}

.operators {
    background: linear-gradient(rgb(73,62,150),rgb(40,50,110));
    color: white;
}

.operators:active {
    background: linear-gradient(rgb(40,50,110), rgb(73,62,150));
}

.equal {
    grid-row: 2/6;
    grid-column: 4/5;
    color: white;
    background: linear-gradient(rgb(245,120,30),rgb(215,55,0));
    border-radius: 0 0 1.2rem 0;
}

.equal:active {
    background: linear-gradient(rgb(215,55,0), rgb(245,120,30));
}

.clearing {
    background: linear-gradient(rgb(250,185,115),rgb(230,85,30));
    color:  white;
}

.clearing:active {
    background: linear-gradient(rgb(230,85,30), rgb(250,185,115));
}


@media (max-width: 720px) {
    #calculator {
        width: 90%;
        height: 80%;
    }
}