* {
		   margin: 0;
		   padding: 0;
		   box-sizing: border-box;
		   font-family: verdana;
		}
   
   .header {
      width: 98%;
      max-width: max-content;
      margin: 0 auto;
      text-align: center;
      border-bottom: 1.2px solid silver;
   }
   
   .header h1{
      color: #2d7086;
      font-weight: bold;
   }
   
   .header p {
      color: #1c2137;
      
      & span:nth-child(1) {
         color: #2d7086;
         font-weight: 500;
      }
      & span:nth-child(2) {
         color: orange;
         font-weight: 500;
      }
   }
   
		.clac {
		   width: clamp(330px, 90vw, 500px);
		   height: 450px;
		   margin: 20px auto;
		   padding: 5px;
		   background: #1c2137;
		   border: 1px solid #abc;
		   border-radius: 10px;
		}

		.display-box {
		   width: auto;
		   height: 25%;
		   margin: 5px;
		   padding: 2px;
		   background: #fffcf3;
		   border-radius: 5px;
		}

		.display {
		   width: 100%;
		   height: 60%;
		   font-size: 3rem;
		   color: #192a56;
		   background: transparent;
		   border: none;
		   outline: none;
		   padding-inline: 2px;
		   text-align: right;
		   transition: all .8s;
		}
		.auto_calculate {
		   width: 100%;
		   height: 40%;
		   font-size: 1.5rem;
		   color: gray;
		   background: transparent;
		   border: none;
		   outline: none;
		   padding-inline: 2px;
		   text-align: right;
		   transition: all .5s;
		}
		.btns {
		   width: 100%;
		   height: 75%;
		   padding-bottom: 5px;
		   display: flex;
		   flex-wrap: wrap;
		   justify-content: space-around;
		   align-items: center;
		}

		.btn {
		   width: 22%;
		   height: 15%;
		   background: #ddd;
		   border: none;
		   border-radius: 5px;
		   font-size: 1.5rem;
		   transition: all 0.1s ease-out;
		}

		.btn:hover {
		   box-shadow: inset 3px 3px 8px #899,
		      inset -3px -3px 8px #899;
		   font-size: 1.6rem;
		}

		.equal {
		   width: 47%;
		   color: #3c3;
		   font-size: 2.3rem;
		}

		.equal:hover {
		   background: #396;
		   box-shadow: none;
		   font-size: 2.5rem;
		}

		.back {
		   color: #3cf;
		   font-size: 2rem;
		}

		.back:hover {
		   background: #678;
		   box-shadow: none;
		   font-size: 2.2rem;
		}

		.operator {
		   color: #3cc;
		   font-size: 1.5rem;
		}
   .operator:hover {
		   font-size: 2.2rem;
		}
		.clear {
		   color: #ff0033;
		}

		.clear:hover {
		   background: #903;
		   box-shadow: none;
		}