body{
    margin: 0; 
    padding: 0;
    font-family: 'Roboto Slab', serif;
}

.calculator-container {
    background-image: linear-gradient( #340266, #2f025c);
    width: 300px;
    height: 500px;
    margin: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position:relative;
}
.display-container {
    display: block;
    flex-basis:40%;  
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}

.keypad-container {
    border-radius: 10px;
    flex-basis:60%;
    display: flex;  
    flex-wrap: wrap;
    background-image: linear-gradient( #764d9c, #400080);
    z-index: 1;
}
.keypad-container button {
    height: 25%;
    width: 25%;
    border:0;
    background: rgba(255, 255, 255, 0);
    color: white;
    font-size: 1.75em;
}
#display {
    font-size: 3em;
    font-weight: bold;
    overflow: hidden;
    display: block;
    color: white;
    padding:20px
}

.history-container {
    background-color: rgb(61, 28, 88);
    position:absolute;
    width: 100%;
    top: 35%;
    z-index: 0;
    height: 40%;
    color:white;
} 
.cancel-button {
    background: rgb(170, 42, 3) !important;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition-duration: 0.4s;
}
.operator-button {
    background: rgba(102, 27, 109, 0.842) !important; 
    transition-duration: 0.4s;

}
.equals-button {
    background: rgb(23, 3, 49) !important;
    border-top-left-radius:10px;
    transition-duration: 0.4s;
}
.number-button {
    transition-duration: 0.4s;
}
.number-button:hover {
    background-color: #943ece; 
}

.cancel-button:hover {
    background-color: #943ece !important; 
}

.operator-button:hover {
    background-color: #943ece !important; 
}

.equals-button:hover {
    background-color: #943ece !important; 
}

.history-upbutton {
    width: 100%;
    display: inline-block;
    border: none;
    margin: 0;
    text-decoration: none;
    background: #2a0e3a;
    color: #d19494;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.history-list {
    margin: 20px;
    overflow-y: auto;
    height: 100%;
}