body
{
  background-color: skyblue;
}
header h1{
  color:  rgb(1, 31, 36) ;
  font-family: sans-serif;
  text-align: center;
  font-size: 50px;
}
main
{
  display: grid;
  place-items: center;
  margin-top: 8%;
  background-color: skyblue;
}
.calculator
{
  transform: scale(1.3);
  height: 300px;
  width: 400px;
  border-right: 12px solid rgba(9, 126, 147, 0.705);
  border-bottom: 12px solid rgba(9, 126, 147, 0.471);
  border-top: 12px solid rgba(9, 126, 147, 0.471);
  border-left: 12px solid rgba(9, 126, 147, 0.705);
  border-radius: 10px;
  padding: 15px 15px;
  background-color: rgb(1, 31, 36);
  margin-bottom: 100px;
}

#screen
{
  height:70px;
  width: 390px;
  border: 2px solid black;
  border-radius: 10px;
  margin-bottom: 15px;
  background-color: rgba(9, 126, 147, 0.471);
  color: white;
  font-size: 35px;
  font-family:sans-serif;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: row-reverse;
  
}
#div-one
{
  display: grid;
  grid-template-columns: auto auto auto auto;
}

#div-two-1
{
    display: grid;
    grid-template-columns: auto auto;
}

#div-two-2
{
    display: grid;
    grid-template-columns: auto auto;
    float: left;
}

#bottom
{
    display: grid;
    grid-template-columns: auto;
}

.main-div , .bottom-buttons
{
    float: left;
}

.button
{
  height:50px;
  width:60px;
  margin-bottom: 5px;
  margin-left: 5px;
  border-radius: 10px;
  font-size: 20px;
  color: skyblue;
  background-color: black;
  border-top: 0.5px solid white;
  border-left: 0.5px solid white;
}

.button:active
{
  border-top: 0.5px solid black;
  border-left: 0.5px solid black;
  border-bottom: 0.5px solid white;
  border-right: 0.5px solid white;
}

button::current
{
  border: 2px solid black;
}
#add-button
{
  height: 105px;
}