*{box-sizing: border-box;}
body{
    background-color:#222226;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    
}
.wrapper{
    color: white;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    width: min(670px, 98vw) ;
    margin: 3rem auto;
    padding: 10px;
}
#answer-field{
    font-size: 2rem;
    height: 6rem;
    background-color: #333337;
    border-radius: 1rem;
    text-align: right;
    display: grid;
    grid-template-areas: 'history' 'answer';
    grid-template-rows: 1fr 1fr;
    padding: 1rem;
}

#history, #current-line{
    min-height: 100%;
}
#history{
    color: #ddd;
}

footer{
    text-align: center;
    color: #ddd;
    a {
        color: #fd8;
        text-decoration: none;
    }
    a:hover{
        color: gold;
    }
}
.input-area{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: repeat(4,1fr);
    gap: .5rem;
}
.input-area div{
    font-size: 1rem;
    border-radius: 1rem;
    padding: 1em;
    text-align: center;
}
.input-area div:hover{
        filter: brightness(1.1);
}
.clear, .operator{
    background-color: #38383B;
}
.input-area .number{
    background-color: #4E4E51;
}
.equals{
    background-color: #3584E4;
}