*{
    font-family: 'courier new';
}

body{
    height: 100vh;
    background: rgb(193,85,82);
    background: linear-gradient(36deg, rgba(193,85,82,1) 2%, rgba(244,157,155,1) 38%, rgba(255,244,232,1) 90%);
    background-size: cover;
}

#calculator-container{
    background-color: #f2d0a9;
    width: 600px;
    height: 930px;
    display: grid;
    grid-template-rows: 80px 100px repeat(5, 150px);
    grid-template-columns: repeat(4, 150px);
    padding: 40px;
    border-radius: 12px;
    margin: 0 auto;
    margin-top: 100px;
    box-shadow: 20px 20px 40px 0 rgba(255,244,232,.5);
}

#display{
    background-color: #edf6f9;
    width: 600px;
    height: 80px;;
    grid-column: 1 / -1 ;
    grid-row: span 1;
    font-size: 32px;
}

#answer-display{
    background-color: #edf6f9;
    font-size: 28px;
    width: 600px;
    height: 100px;
    grid-column: 1 / -1 ;
    grid-row: span 1;
    font-size: 48px;
    font-weight: bold;
}

#clear-btns-container{
    grid-column: span 3;
    grid-row: span 1;
    grid-gap: 0px;
    display: grid;
    grid-template-columns: repeat(2, 225px);
}

#clear-btns-container .btn{ 
    width: 225px;
    grid-column: span 1;
    background-color: #d88c9a;
    border: solid 1px grey;
}

.equals{
    background-color: #d88c9a;
} 

#digits{
    grid-column: span 3;
    grid-row: span 4;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(4, 150px);
}

/* zero */
.wide-btn{
    grid-column: span 2;
    width: 300px;
    font-size: 36px;
    background-color: #f1e3d3;
    border: solid 1px grey;
}

#operands{
    grid-column: 4 / -1;
    grid-row: 3 / 7;
}

.btn{
    width: 150px;
    height: 150px;
    font-size: 36px;
    border: solid 1px grey;
}

#digits .btn{
    background-color: #f1e3d3;
}

#operands .btn{
    background-color: #99c1b9;
}

footer{
    text-align: center;
}

a{
    text-decoration: none;
    color: black;
}