*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  html{
    font-family: 'Montserrat', sans-serif;
  }
  section{
    background-color: rgb(18, 26, 31);
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container{
    width: 90%;
    max-width: 400px;
    background-color: rgb(39, 55, 59);
    border-radius: 8px;
    overflow: hidden;
  }
  .display{
    background-color: rgb(182, 182, 182);
    height: 100px;
    width: 100%;
    text-align: right;
    padding: 20px;
    font-size: 30px;
    position: relative;
  }
  .display-1{
    opacity: .4;
    font-size: 20px;
    height: 20px;
    overflow: hidden;
  }
  .temp-result{
    position: absolute;
    bottom: 0;
    left: 10;
    font-size: 20px;
    opacity: .4;
  }
  .all_buttons{
    color: whitesmoke;
    display: grid;
    grid-template:repeat(4, 1fr) / repeat(4, 1fr) ;
  }
  .button{
    border: .5px solid rgba(92, 92, 92, 0.137);
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
  }
  .button:hover{
    background-color: rgb(30, 43, 46);
  }
  .btn-0{
    grid-column: 1/3;
  }