html {
    height: 100%;
  }

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:100% ;
    background-color: #636360;
    
}

/* ------------------------------container area start------------------------------*/
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* background-color: #82C3EC; */
    background-color: #636360;
    /* width:768px; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height:100% ;
    border: 1px solid black;
}
/* ------------------------------container area end------------------------------*/

/* ------------------------------display areas start------------------------------*/

.display-area{
    display: flex;
    flex-direction: column;
    gap:20px;
    justify-content: center;
    padding:20px;
    margin:20px;
    border:1px solid black;
    width:239px;
    height:100px;
    max-width: 250px;
    overflow:auto;
    
}

.primary-text{
    font-size: 20px;
    text-align: right;
    color:white;
    max-width: 250px;
}

.secondary-text{
    font-size: 20px;
    text-align: right;
    color:white;
}

/* ------------------------------display areas end------------------------------*/

/* ------------------------------clear and delete buttons start------------------------------*/

.two-buttons button{
    background-color: #ffa00a;
    border: 1px solid #ffa00a;
    padding:10px 20px;
    font-weight: bold;
    color:white;
    max-width: 100%;
    width: 130px;
}

.two-buttons button:hover{
    background-color: white;
    border: 1px solid white;
    padding:10px 20px;
    color:#ffa00a;
}

.two-buttons{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
}


.button-area{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap:20px;
  }

/* ------------------------------clear and delete buttons end------------------------------*/

/* ------------------------------numeric and symbol buttons start------------------------------*/

.row-1, .row-2, .row-3, .row-4{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap:20px;
    
}
.item-button{
    background-color: #636360;
    padding:20px;
    color: white;
   
    flex: 1;
}

.item-button:hover{
    color: #636360;
    padding:20px;
    background-color: white;
   
    flex: 1;
}

/* ------------------------------numeric and symbol buttons end------------------------------*/