Does anyone know why the screen part looks like that? [closed]

The screen doesn't look very nice. looks very weird I don't know why but the bottom part and the whole calculator container looks fine.

enter image description here

Here's what its meant to look like.

enter image description here

here's my code

.calc-screen {
    align-items: center;
    justify-content: center;
    display: flex;
}


.calc-buttons-container button {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 3D-like box shadow */
    color: white;
    font-size: 35px;
    border: none;
}

.calc-container {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 3D-like box shadow */
    width: 70vh;
    height: 95vh;
    background-color: white;
    margin: auto; /* This is the key property for centering horizontally */
    position: absolute; /* Centering vertically */
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    border-radius: 10%;
    background-color: #7E6767;
    display: flex;
    flex-direction: column;
}

.calc-buttons-container {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 3D-like box shadow */
    background-color: #3B3232;
    display: flex;
    border-radius: 10%;
    width: 90%;
    height: 65%;
    position: relative;
    left: 35px;
    top: 30px;
}