body{
  background-color: black;
}
button{
  font-size: 30px;
}

p{
  margin-top: 0px;
  margin-bottom: 0px;
}
.calculator-page{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator-border{
  border: solid;
  padding-top:10px ;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-width: 1px;
  border-color: lightblue;
  border-radius: 20px;
  margin-top: 10px;
}

.js-show-calculation{
  background-color: white;
  width: 430px;
  height: 90px;
  margin-top: 15px;
  margin-bottom: 30px;
  border: solid;
  border-width: 1px;
  border-color: lightgray;
  border-radius: 20px;
  position: relative;
}

.calculation-full-box{
  display: flex;
  flex-direction: column;
}

.previous-calculation{
  display: flex;
  margin-left: 3px;
  margin-top: 3px;
  color: gray;
  font-size: 25px;
}

.js-input-calculation{
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 35px;

}




.name{  
  color: red;
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.button-lines{
  display: flex;
  flex-direction: column;
}

.number-buttons{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.numbers{
  background-color: rgb(51, 51, 51);
  color: white;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: none;
  margin-right: 10px;
}

.operations{
  background-color:rgb(254, 160, 10);
  color: white;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: none;
  font-size: 50px;
}

.clear{
  background-color: rgb(255, 0, 0);
  color: white;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: none;
}