* {
    padding: 10px;
    box-sizing: border-box;
}

.bolder {
    font-weight: bolder;
}

body {
    text-align: center;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 10%, rgba(217,232,233,1) 46%, rgba(110,231,255,1) 82%);
    font-family: 'Sofia', sans-serif;
}

.header {
    margin-top: 4%;
    text-align: center;
    color: #0d0b79;
    font-size: 500%;
    text-shadow: 0 1px 0 rgb(255, 255, 255), 0 2px 0 rgb(255, 255, 255),
        0 3px 0 rgb(255, 255, 255), 0 4px 0 rgb(255, 255, 255),
        0 5px 0 rgb(255, 255, 255), 0 6px 0 rgb(255, 255, 255),
        0 7px 0 rgb(255, 255, 255), 0 8px 0 rgb(255, 255, 255),
        0 9px 0 rgb(255, 255, 255), 0 10px 0 rgb(255, 255, 255),
        0 11px 0 rgb(255, 255, 255), 0 12px 0 rgb(255, 255, 255),
        0 20px 30px rgba(230, 241, 241, 0.5);
}

.form {
    text-align: center;
    position: relative;
    display: contents;
    margin-right: 50%;
    margin-left: 50%;
}

#input {
    font-size: 200%;
    padding: 1%;
    margin: 2%;
    margin-top: -1%;
    border: 3px solid #0d0b79;
    font-family: 'Sofia', sans-serif;
}

#input:focus {
    border: 4px solid #c00909;
}

/* Modifying buttons */


.btn {
    padding: 15px;
    font-size: 200%;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    font-family: 'Sofia', sans-serif;
}

#calc {
    background-color: #0b7a52;
    margin-right: 5%;
}

#calc:hover {
    background-color: #2b502c
}

#calc:active {
    background-color: #2b502c;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

#clear {
    background-color: #9c1414;
}

#clear:hover {
    background-color: #b66969;
}

#clear:active {
    background-color: #b66969;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.output {
    position: relative;
    font-size: 200%;
    text-align: left;
    border: 3px solid #0d0b79;
    background-color: rgba(253, 251, 251, 0.801);
    margin-top: 2%;
}

.theader {
    color: #0b7a52;
}