@import "reset.css";
@import url("https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css");

body {
      height: 100vh;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      user-select: none;
      height: 100vh;
      background: hsla(197, 100%, 63%, 1);
      background: linear-gradient(90deg, hsla(197, 100%, 63%, 1) 0%, hsla(294, 100%, 55%, 1) 100%);
}

.container {
  border-radius: 20px;
  background: linear-gradient(145deg, #f0f0f0, #c9c9c9);
  box-shadow: 0px 0px 40px -15px rgb(0, 0, 0);
  width: 400px;
  min-height: 550px;
  margin: 100px auto 50px auto;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-content: center;
  justify-items: center;

}

.container .result-section {
  height: 30%;
  font-size: x-large;
}

.container .result-section .result {
  padding: 10px;
  word-break: break-word;
}

.container .result-section .live-result {
  padding: 0px 10px 0px 10px;
  word-break: break-word;
  color: rgb(29, 245, 47);
}

.container .buttons .backspace {
  color: rgb(236, 18, 18);
  margin: 5px auto 5px auto;
}

.container .buttons .del-div1 {
  grid-area: 1 / 1 / 2 / 2;
}
.container .buttons .del-div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.container .buttons .delete-sec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
}

.container .buttons .parrent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 70%;
}

.div1 { grid-area: 1 / 1 / 2 / 2; } .div2 { grid-area: 1 / 2 / 2 / 3; } .div3 { grid-area: 1 / 3 / 2 / 4; } .div4 { grid-area: 1 / 4 / 2 / 5; } .div5 { grid-area: 2 / 1 / 3 / 2; } .div6 { grid-area: 2 / 2 / 3 / 3; } .div7 { grid-area: 2 / 3 / 3 / 4; } .div8 { grid-area: 2 / 4 / 3 / 5; } .div9 { grid-area: 3 / 1 / 4 / 2; } .div10 { grid-area: 3 / 2 / 4 / 3; } .div11 { grid-area: 3 / 3 / 4 / 4; } .div12 { grid-area: 3 / 4 / 4 / 5; } .div13 { grid-area: 4 / 1 / 5 / 2; } .div14 { grid-area: 4 / 2 / 5 / 3; } .div15 { grid-area: 4 / 3 / 5 / 4; } .div16 { grid-area: 4 / 4 / 5 / 5; } .div17 { grid-area: 5 / 1 / 6 / 2; } .div18 { grid-area: 5 / 2 / 6 / 3; } .div19 { grid-area: 5 / 3 / 6 / 4; } .div20 { grid-area: 5 / 4 / 6 / 5; } 

.container .buttons .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  background-color: #f2f2f2;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-shadow:  0px -6px 10px rgba(225, 225, 225, 1),
  0px 4px 15px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.30s;
  margin: 5px auto 5px auto;
}

.container .buttons .btn:hover {
  box-shadow: -5px -10px 10px rgba(225, 225, 225, 1),
              0 4px 15px rgba(0, 0, 0, 0.5);
}

.container .buttons .operator {
  background-color: #5aafff;
  color: #ffffff;
}

.container .buttons .equal {
  background-color: rgb(29, 245, 47);
  color: #fff;
}
  
@media (max-width: 576px) {
  .container {
    width: 350px;
  }
}