body {
    background-color: #bef5f0;
}

.calculator {
    margin-top: 20px;
    margin-left: 10px;
    align-content: center;
    background-color: #f9dd8b;
    height: 400px;
    width: 334.75px;
    border-radius: 15px;
    border-color: black;
    border-style: inset;
}

.display {
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #fff;
    height: 60px;
    width: 307.75px;
    border-radius: 8px 8px 8px 8px;
    border-width: 3px;
    border-color: black;
    border-style: solid;
}

input[type=text] {
    text-align: right;
    font: Verdana;
    font-size: 30px;
    position: absolute;
    margin-left: 5px;
    margin-top: 14px;
    height: 35px;
    width: 290.75px;
    border-style: hidden;
}

.parentesis {
    position: absolute;
    margin-left: 12px;
    margin-top: 84px;
}

.par-left {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 8px 0px 0px 8px;
    height: 58.75px;
    width: 88.125px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.par-right {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 8px 8px 0px;
    height: 58.75px;
    width: 88.125px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.clear {
    position: absolute;
    margin-left: 196.25px;
    margin-top: 84px;
    background-color: #fff;
    color: black;
    border: 3px solid black;
    border-radius: 8px 8px 8px 8px;
    height: 58.75px;
    width: 127.5px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial;
}

.numbers {
    position: absolute;
    margin-top: 150px;
    margin-left: 12px;
}

.button7 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 8px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.button8 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.button9 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 8px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: block;
}

.button4 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.button5 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.button6 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: block;
}

.button1 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.button2 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.button3 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: block;
}

.button0 {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 8px;
    height: 58.75px;
    width: 117.50px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.buttonpoint {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 8px 0px;
    height: 58.75px;
    width: 58.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.basic-functions {
    position: absolute;
    margin-left: 196px;
    margin-top: 150px;
}

.mul {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 8px 0px 0px 0px;
    height: 84.125px;
    width: 63.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.div {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 8px 0px 0px;
    height: 84.125px;
    width: 63.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: block;
}

.add {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 0px 8px;
    height: 84.125px;
    width: 63.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.sub {
    background-color: #333;
    color: white;
    border: 1px solid black;
    border-radius: 0px 0px 8px 0px;
    height: 84.125px;
    width: 63.75px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
    display: inline-block;
    float: left;
}

.result {
    position: absolute;
    margin-left: 196px;
    margin-top: 325px;
    background-color: #ff8a00;
    color: white;
    border: 3px solid black;
    border-radius: 8px 8px 8px 8px;
    height: 58.75px;
    width: 127.50px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana;
}

.par-left, .par-left,
.button7, .button8, .button9,
.button4, .button5, .button6,
.button1, .button2, .button3,
.button0, .buttonpoint,
.clear, .delete,
.mul, .div, .add, .sub,
.result {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.par-left:hover, .par-right:hover,
.button7:hover, .button8:hover, .button9:hover,
.button4:hover, .button5:hover, .button6:hover,
.button1:hover, .button2:hover, .button3:hover,
.button0:hover, .buttonpoint:hover,
.clear:hover, .delete:hover,
.mul:hover, .div:hover, .add:hover, .sub:hover,
.result:hover {
    background-color: black;
    color: white;
}