body
{
    background:linear-gradient(180deg, #805875, #5e2750,#411934);
    
    color:white;
    font-weight: bold;
}


#main-container
{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#calculator
{
    
    width:500px;
    height: 500px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px black;
    border:solid;
    border-color:#cc0000 ;
    background-color: #333333;
 
}

#display-container
{
    display:flex;
    justify-content:center;
    align-items: center;
    width:100%;
    height: 30%;
    
}

#calc-result
{   
    width: 90%;
    height: 60%;
    
    background-color:#B6AFA8;
    color:white;
    font-weight: bold;
    font-size:19px;
    border:none;
    border-radius:5px;
    display:flex;
    justify-content: flex-end;
    text-align: center;
    align-items: center;
    padding:10px;
   
}

#input-container
{
    display:flex;
    justify-content: center;
    padding-top:20px;
    height:60%;
    width: 100%;  

}

#output-control-container
{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
     
    width:100%;
    height:20%;
}
#output-control-keys-container
{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 1px 0px 3px black;
    
    background-color:#cc0000 ;
    border-radius:10px;
    width:80%;
    height:100%;
}
#operators-container
{  
    margin-left:10px;
    margin-right:10px;
    padding:25px;
    display: grid;
    grid-template-areas:
    "content content";
    background-color:#B6AFA8; 
    width:30%;
    height:80%;
    border-radius:5px;
}

#keys-container
{
    
    margin-left:10px;
    margin-right:10px;
    padding:25px;
    padding-top:30px;
    display: grid;
    grid-template-areas:
    "content content content";
    padding-right:0px;
    background-color: #411934;
    box-shadow: 1px 0px 3px black;
    width:60%;
    height:80%;
    border-radius:5px;
    
}
.operator
{
    width:60px;
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#333333;
    border-radius:5px;
    box-shadow: 1px 0px 3px black;
    color:white;
    font-weight: bold;
    

}

.operand
{
    display: flex;
    justify-content: center;
    align-items: center;
    width:60px;
    height:40px;
    background-color:#333333;
    border-radius:5px;
    box-shadow: 1px 0px 3px black;
    color:white;
    font-weight: bold;

}

button:hover {background-color: #b40303}

button:active {
  background-color: #cc0000;
  box-shadow: 0 5px 2px rgb(0, 0, 0);
  transform: translateY(1px);
}