* {
    box-sizing: border-box;
}

body {
    padding-top: 100px;
    padding-bottom: 20px;
}

calculator {
    background-color: oldlace;
    display: block;
    width: 300px;
    height: auto;
    border: 2px solid papayawhip;
    border-radius: 7%;
    box-shadow: 4px 4px 8px black;
}

@font-face {
  font-family: myDigitalFont;
  src: url("fonts/digital-7.regular.ttf");
}

#screen {
    background-color: azure;
    height: auto;
    border:solid 7px;
    border-bottom-color:#ffe;
    border-left-color:#eed;
    border-right-color:#eed;
    border-top-color:#ccb;    
}

#calculation, #display {
	width: 100%;
/*    min-height: 100%;*/
    height: auto;
    text-align: right;
    overflow: auto;
}

#display {
	font-size: 45px;
    font-family: myDigitalFont;
}

.container-fluid .row {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.row [id] {
    padding: 15px 0; 
}

.row [id]:hover {
    padding: 9px 0px; 
    font-size: 1.3em;
}

#equals:hover {
    padding: 43px 0px; 
}

.row [id]:active {
    font-size: 1em;
    padding: 13px 0px; 
    box-shadow: none;
    border:solid 1px;
    border-bottom-color:#ffe;
    border-left-color:#eed;
    border-right-color:#eed;
    border-top-color:#ccb; 
}

#clear, .operator, .number, #decimal , #equals {
    box-shadow: 1px 1px 1px black;	
}

#clear:active, 
.operator:active, 
.number:active, 
#decimal:active, 
#equals:active {
    box-shadow: none;
    border:solid 1px;
    border-bottom-color:#ffe;
    border-left-color:#eed;
    border-right-color:#eed;
    border-top-color:#ccb;
}

#clear {
	background: radial-gradient(orangered, red);
}

.operator {
    background: radial-gradient(darkgrey, grey);
}

.number {
    background: radial-gradient(white, papayawhip);
    
}

#zero {
	border-bottom-left-radius: 7%;
}

#decimal {
    background: radial-gradient(white, papayawhip); 
}

#equals {
	background: radial-gradient(lightblue, blue);
    padding: 45px 0;
    border-bottom-right-radius: 7%;
}

footer {
    --fccGreen: #006600;
    background-color: var(--fccGreen);
    color: white;
    margin-top: 20px;
    text-align: center; 
}

footer img {
    width: 40px;
    margin-left: 60px;
}

@media (max-width: 576px) {
    footer img {
        margin-left: 20px;
    }
}