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

@font-face{
    font-family: myFont;
    src: url(font/digital.ttf);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-heading {
    margin: 60px 0;
    font-size: 45px;
    color: rgb(4, 26, 67);
    font-family: courier, sans-serif;
    text-align: center;
}


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

.heading {
    font-size: 10px;
    color: rgb(213, 218, 223);
    font-family: 'georgia';
    letter-spacing: 0.2vh;
}

.calculator {
    width: 300px;
    min-width: 300px;
    box-sizing: border-box;
    padding: 20px 25px 45px;
    background: radial-gradient(ellipse farthest-corner at 20% 65%, #5E6470, #161213);
    border-top-left-radius: 100% 30px;
    border-top-right-radius: 100% 30px;
    border-bottom-right-radius: 100% 60px;
    border-bottom-left-radius: 100% 60px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .7),
                0 0 20px 0 rgba(0, 0, 0, 0.5),
                0 0 25px 0 rgba(0, 0, 0, 0.3),
                10px 0 4px 10px rgba(0, 0, 0, 0.3),
                inset 0 0 3px 0 rgba(0, 0, 0, .7),
                inset 0 0 10px 0 rgba(0, 0, 0, 0.5),
                inset 0 -25px 5px 0 rgba(0, 0, 0, 0.2),
                inset 0 -5px 10px 0 rgba(255, 255, 255, 0.3);
    user-select: none;            
}

.calculator .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.heading .title {
    font-size: 25px;
    font-family: 'Play', 'Russo One', sans-serif;
    color: #EAEAEA;
    letter-spacing: 1px;
    margin: 0;
}

.sun .battery {
    width: 107px;
    height: 30px;
    border-radius: 3px;
    background-color: #3D2115;
    background-image: repeating-linear-gradient(to right, transparent, transparent 26px, rgba(255, 255, 255, 0.1), 26px,
    rgba(255, 255, 255, 0.1)27px);
    box-shadow: 0 -3px 5px -3px rgba(255, 255, 255, 0.2),
                5px 0 3px -5px rgba(255, 255, 255, 0.8),
                0 2px 5px -2px rgba(0, 0, 0, 0.5),
                -3px 0 3px -1px rgba(0, 0, 0, 0.8),
                inset 0 -5px 3px -3px rgba(0, 0, 0, 0.5),
                inset 5px 0 5px -2px rgba(0, 0, 0, 0.8);
}

.calculator .screen {
    margin: 20px 0;
}

.screen-container .screen {
    width: 100%;
    height: 66px;
    display: block;
    border: 0;
    text-align: right;
    font-size: 50px;
    padding: 10px;
    border-radius: 5px;
    color: #000;
    text-overflow: ellipsis;
    font-family: myFont;
      background-image: linear-gradient(-155deg, #44443A 0%, #656F66 100%);
      box-shadow: 0 -4px 4px -3px rgba(255, 255, 255, 0.3),
      5px  0 3px -5px rgba(255, 255, 255, 0.8),
      0 5px 5px -3px rgba(0, 0, 0, 0.5),
      -3px 0 3px -1px rgba(0, 0, 0, 0.8),
      inset 0 -5px 3px -3px rgba(0, 0, 0, 0.5),
      inset 5px 0 5px -2px rgba(0, 0, 0, 0.8);
}
.screen-container .screen::placeholder {
    color: #000;
}

.calculator .keyboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 40px;
    gap: 15px;
}

.keyboard .button {
    font-size: 30px;
    padding: 0;
    border-radius: 7px;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(25deg, #525A65, #3B423B);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: inset 2px -1px 1px 0 rgba(255, 255, 255, 0.2),
                inset -3px 2px 5px 0 rgba(0, 0, 0, 0.2),
                4px 1px 1px 0 rgba(0, 0, 0, 0.5),
                -1px -3px 1px 0 rgba(0, 0, 0, 0.5),
                4px -3px 1px 0 rgba(0, 0, 0, 0.5),
                -1px -1px 5px 0 rgba(0, 0, 0, 0.5);
}

.keyboard .button:active {
    box-shadow: inset 2px -1px 1px 0 rgba(255, 255, 255, 0.2),
                inset -3px 2px 5px 0 rgba(0, 0, 0, 0.2),
                3px 1px 1px 0 rgba(0, 0, 0, 0.5),
                -1px -1px 1px 0 rgba(0, 0, 0, 0.5),
                3px -1px 1px 0 rgba(0, 0, 9, 0.5),
                -1px -1px 5px 0 rgba(0, 0, 0, 0.5),
                4px 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translate(1px, -1px);            
}

.keyboard .clear {
    font-size: 22px;
    background: #a80d6f;
    color: beige;
    font-family: sans-serif;
}

.keyboard .button.num {
    font-size: 25px;
}

.keyboard .percent {
    font-size: 20px;
}

.keyboard .pro {
    font-size: 20px;
}

.keyboard .min {
    padding-bottom: 8px;
    font-size: 35px;
}

.keyboard .add {
    font-size: 25px;
}

.keyboard .equal {
    font-size: 25px;
    color: rgb(218, 218, 218);
}

.keyboard .button .dot {
    font-size: 30px;
    padding-bottom: 15px;
}

.foot {
    margin-top: 50px;
}