html {

    box-sizing: border-box;
    height: 100%;
    width: 100%;

}

body {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.container {

    height: 400px;
    width: 400px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(314.61deg, rgba(0, 0, 0, 0.3) -31.16%, rgba(255, 255, 255, 0.3) 136.93%), #02a0c5;
    background-blend-mode: soft-light, normal;
    box-shadow: -2.5px -2.5px 5px rgba(250, 251, 255, 0.4), 2.5px 2.5px 5px #35373E;
    border-radius: 20px;
    padding: 20px;
    border-radius: 20px;

}

.container_description {

    display: flex;
    justify-content: space-between;
    font-style: italic;
    color: white;

}
.container_buttons {

    display: grid;
    height: 270px;
    grid-gap: 5px;

}

.container_screen {

    display: flex;
    place-items: center;
    margin-top: 20px;
    width: 200px;
    height: 40px;
    background: linear-gradient(317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18%), #E7EBF0;
    background-blend-mode: soft-light, normal;
    border: 0.5px solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    box-shadow: inset -2.5px -2.5px 5px #FAFBFF, inset 2.5px 2.5px 5px #A6ABBD;
    border-radius: 10px;

}

.container_screen p {

    padding-left: 10px;
    font-size: 25px;
    font-weight: 700;

}

.number0, .number1, .number2, .number3, .number4, .number5, .number6, .number7, .number8, .number9, .point, .suma, .division, .igual, .reset, .resta, .multiplicacion {

    cursor: pointer;
    background: linear-gradient(317.7deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 105.18%), #E7EBF0;
    background-blend-mode: soft-light, normal;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 300;
    

}

.number9 {

    display: grid;
    grid-column: 3;
    grid-row: 4;
    align-items: center;

}
.number8 {

    display: grid;
    grid-column: 2;
    grid-row: 4;
    align-items: center;

}

.number7 {

    display: grid;
    grid-column: 1;
    grid-row: 4;
    align-items: center;

}
.division {

    display: grid;
    grid-column: 4;
    grid-row: 4;
    align-items: center;

}
.number6 {

    display: grid;
    grid-column: 3;
    grid-row: 5;
    align-items: center;

}
.number5 {

    display: grid;
    grid-column: 2;
    grid-row: 5;
    align-items: center;

}

.number4 {

    display: grid;
    grid-column: 1;
    grid-row: 5;
    align-items: center;

}
.multiplicacion {

    display: grid;
    grid-column: 4;
    grid-row: 5;
    align-items: center;

}
.number3 {

    display: grid;
    grid-column: 3;
    grid-row: 6;
    align-items: center;

}
.number2 {

    display: grid;
    grid-column: 2;
    grid-row: 6;
    align-items: center;

}
.number1 {

    display: grid;
    grid-column: 1;
    grid-row: 6;
    align-items: center;

}

.resta {

    display: grid;
    grid-column: 4;
    grid-row: 6;
    align-items: center;

}

.number0 {

    display: grid;
    grid-column: 1;
    grid-row: 7;
    align-items: center;

}

.point {

    display: grid;
    grid-column: 2;
    grid-row: 7;
    align-items: center;

}

.suma {

    display: grid;
    grid-column: 3;
    grid-row: 7;
    align-items: center;

}

.igual {

    display: grid;
    grid-column: 4;
    grid-row: 7;
    align-items: center;
    
}

.reset {

    display: grid;
    grid-column: 4;
    grid-row: 2;
    align-items: center;
}