* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*background: #3a6186;
    background: -webkit-linear-gradient(to right, #89253e, #3a6186);
    background: linear-gradient(to right, #89253e, #3a6186);*/
    background: #90B8F8; 
    
}
.container{
    text-align:center;
}
table{
    margin:auto;
}
input{
   background-color: #5F85DB;
    grid-column: 1/-1;
    border-radius: 1rem;
    border: none;
    outline: none;
    padding: 0.5rem 1rem;
    text-align: right;
    font-size: 1.2rem;
    color: white;
    overflow-x: visible;
    height: 60px;
    word-wrap: break-word;
    word-break: break-all;
    max-width: 260px;
    margin-bottom: 1rem;
    resize: none;
}
button{
    /*background-color: #1E1E1E;*/
    background-color: #5F85DB;
     color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.3rem;
    margin: 0.2rem 0.4rem;
    border: none;
    outline: none;
    
  
}

button:hover{
    background-color: #1E1E1E;
     color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.3rem;
    margin: 0.2rem 0.4rem;
    border: none;
    outline: none;
    background-color:#90B8F8;
    
  
}
.calculator{
    width: 320px;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
    border-radius: 1rem;
}
.calculator:hover{
    width: 320px;
    background-color: #26282B;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
    border-radius: 1rem;
}
h1{
    font-size:50px;
    color: whitesmoke;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px #3a6186;
}

.red {
    color: red;
}

.green {
    color: #021953;
}

#equal{
    background-color: #0814f6;
    color: white;
}

#equal:hover{
    background-color: #90B8F8;
    color: white;
}