body { 
    margin: 0;
    background-color: var(--displaycolor);
    transition: 0.2s;
}
* { 
    box-sizing: border-box;
}
:root { 
    --keycolor: #ff6666;
    --keypadcolor: #4d4d4d;
    --displaycolor: #262626;
    --buttoncolor: white;
    --inputcolor: white;
}
.lightmode { 
    --keycolor: #e60073;
    --keypadcolor: white;
    --displaycolor: #e6e6e6;
    --buttoncolor: black;
    --inputcolor: black;
}
.lightmode button { 
    color: black;
}
#theme-container { 
    margin: 2px;
}
#theme-container button { 
    font-size: 15px;
    float:right;
}
.display { 
    position: relative;
    width: 100%;
    height: 360px;
    z-index: -1;
}
#overlay { 
    position: absolute;
    bottom: 0;
    right: 100%;
    left: 0%;
    background-color: var(--keycolor);
    width: 0%; height: 100%;
    overflow: hidden;
    
    transition: 0.3s ease;
}
#text { 
    font-size: 23px;
}
#result { 
    font-size: 50px;
    float: right;
    border: 0px solid white;
    border-bottom-width: 1px;
}
#text, #result { 
    z-index:+3 !important;
    position: relative;
    color: var(--inputcolor);
}

.keypad { 
    display: grid;
    background-color: var(--keypadcolor);
    padding: 10% 3%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    justify-content: center;
}
.subtract { grid-area: 2 / 4 / 3 / 5}
.add { grid-area: 3 / 4 / 4 / 5}
.equals { grid-area: 4 / 4 / 6 / 5}

.button { 
    text-align: center;
}
.button:active { 
    background-color: #ccc
}
button { 
    padding: 15px;
    background-color: transparent;
    font-size: 25px;
    border: none;
    display: block;
    color: var(--buttoncolor);
}
.key button { 
    color: var(--keycolor);
}
.equals button { 
    background-color: var(--keycolor);
    color: white;
    height: 100%;
    padding: 20px;
    border-radius: 10px;
}
.more { 
    text-align: center;
    color: var(--buttoncolor);
    margin: 10px;
}
.more a {
    text-decoration: none;
    color: inherit;
}