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

.flex-container {
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(  violet, pink purple, blue, lightblue, green, lightgreen, yellow, orange, red );
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-body {
    background-color: black;
    width: 175px;
    height: 350px;
    border-radius: 25px;
    border: 2px solid silver;
    position: relative;
    box-shadow: 10px 10px 99px;
}

.time {
    color: white;
    font-size: 10px;
    position: absolute;
    left: 15px;
    top: 5px;
    font-family: Arial, Helvetica, sans-serif;
}

.fa-wifi {
    color: white;
    font-size: 10px;
    position: absolute;
    right: 25px;
    top: 5px;
}

.fa-battery-three-quarters {
    color: white;
    position: absolute;
    right: 45px;
    top: 3px;
}

.fa-signal {
    color: white;
    font-size: 10px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.C {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(188, 180, 180);
    position: absolute;
    top: 120px;
    border: none;
    left: 10px;
}

.plus-minus {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(188, 180, 180);
    position: absolute;
    top: 120px;
    border: none;
    left: 50px;
}

.percentage {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(188, 180, 180);
    position: absolute;
    top: 120px;
    border: none;
    left: 90px;
}

.divide {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: orange;
    color: white;
    position: absolute;
    top: 120px;
    border: none;
    left: 130px;
}

.seven {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 160px;
    border: none;
    left: 10px;
}

.eight {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 160px;
    border: none;
    left: 50px;
}

.nine {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 160px;
    border: none;
    left: 90px;
}

.multiply {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: orange;
    color: white;
    position: absolute;
    top: 160px;
    border: none;
    left: 130px;
}

.four {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 200px;
    border: none;
    left: 10px;
}

.five {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 200px;
    border: none;
    left: 50px;
}

.six {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 200px;
    border: none;
    left: 90px;
}

.minus {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: orange;
    color: white;
    position: absolute;
    top: 200px;
    border: none;
    left: 130px;
}

.one {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 240px;
    border: none;
    left: 10px;
}

.two {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 240px;
    border: none;
    left: 50px;
}

.three {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 240px;
    border: none;
    left: 90px;
}

.plus {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: orange;
    color: white;
    position: absolute;
    top: 240px;
    border: none;
    left: 130px;
}

.zero {
    border-radius: 50px;
    width: 75px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 280px;
    border: none;
    left: 5px;
}

.point {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: rgb(63, 61, 58);
    color: white;
    position: absolute;
    top: 280px;
    border: none;
    left: 90px;
}

.equals {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background-color: orange;
    color: white;
    position: absolute;
    top: 280px;
    border: none;
    left: 130px;
}

.number{
    color: white;
    font-size: 25px;
    position: absolute;
    left: 55px;
    top: 75px;
    font-family: Arial, Helvetica, sans-serif;
}