body {
    text-align: center;
}

.center {
    display: inline-block;
    background-color: gray;
    border: 1px solid black;
    box-shadow: 1px 1px 3px 1px #000000;
    border-radius: 10px;
    padding-top: 2px;
}

.text{
    border-radius: 10px;
    width: 420px;
    height: 30px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.cencel{
    border-radius: 10px;
    margin-top: 10px;
    width: 428px;
    height: 28px;
    font-size: x-large;
    box-shadow: 1px 1px 3px 1px #000000;
}

.top{
    margin-top: 20px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.num{
    border-radius: 10px;
    font-size: x-large;
    padding: 20px 50px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.size{
    border-radius: 10px;
    padding: 20px 20px;
    font-size: x-large;
    box-shadow: 1px 1px 3px 1px #000000;
}

.siz{
    border-radius: 10px;
    margin-top: 3px;
    font-size: x-large;
    padding: 20px 24px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.si{
    border-radius: 10px;
    margin-top: 3px;
    font-size: x-large;
    padding: 20px 21px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.num1{
    border-radius: 10px;
    margin-top: 5px;
    font-size: x-large;
    padding: 20px 140px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.num2{
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 3px;
    font-size: x-large;
    padding: 20px 21px;
    box-shadow: 1px 1px 3px 1px #000000;
}

.num3{
    border-radius: 10px;
    font-size: x-large;
    margin-top: 5px;
    padding: 16px 13px 19px 12px;
    box-shadow: 1px 1px 3px 1px #000000;
}







/* saylani assignment */


/*.container{
    display: relative;
    width: 200px;
    height: 390px;
    margin: auto;
    margin-top: 100px;
    padding: 10px;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    background-color: #000000;
}

#input{
    display: flex;
    width: 100%;
    height: 90px;
    border: none;
    text-align: right;
    align-items: flex-end;
    font-size: 24px;
    background-color: #303030;
    color: #ffffff;
}

.mainBtn{
    margin-top: 10px;
}

.clearNum{
    width: 100%;
    height: 40px;
    margin-top: 15px;
    font-size: 20px;
    background-color: #eae8e8;
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 5%;
    cursor: pointer;
}

.num{
    width: 23%;
    height: 40px;
    margin-top: 5px;
    font-size: 16px;
    background-color: #323232;
    color: white;
    border: none;
    border-radius: 100%;
    cursor: pointer;
}

.numCol{
    width: 23%;
    height: 40px;
    margin-top: 5px;
    font-size: 16px;
    background-color: #de9a24;
    color: white;
    border: none;
    border-radius: 100%;
    cursor: pointer;
}

.num1{
    width: 36%;
    height: 40px;
    margin-top: 5px;
    font-size: 16px;
    background-color: #323232;
    color: white;
    border: none;
    border-radius: 10%;
    cursor: pointer;
}

.num1{
    width: 36%;
    height: 40px;
    margin-top: 5px;
    font-size: 20px;
    background-color: #323232;
    color: white;
    border: none;
    border-radius: 10%;
    cursor: pointer;
}

.num3{
    width: 98%;
    height: 40px;
    margin-top: 5px;
    font-size: 20px;
    background-color: #de9a24;
    color: white;
    border: none;
    border-radius: 10%;
    cursor: pointer;
}*/