body{
    padding:5px;
    margin:5px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background: linear-gradient(to right, #134e5e, #71b280);
    color: #d4af37;
}   

h1{
    text-align:center;

    font-size:45px;
    letter-spacing:4px;

    margin-top:20px;

    text-shadow:0 0 10px rgba(0,0,0,0.3);
}

#calc-buttons{
width: 90vw;
    max-width: 500px;

    height: 90vh;
    max-height: 700px;

    margin: auto;

    border: 3px solid #d4af37;
    border-radius: 20px;


    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);

    justify-content: center;
    align-items: center;
    padding : 320px 75px 75px 125px  ;
}


#calc-buttons button,
#sub,
#res {
    margin: 10px;
    padding: 10px;

    width: 105px;
    height: 45px;

    border: 3px solid #d4af37;
    border-radius: 20px;

    background-color: antiquewhite;

    font-size: 18px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

#calc-buttons button:hover,
#sub:hover,
#res:hover {
    background-color: #d4af37;
    color: white;

    transform: scale(1.05);
}


#dis{
    background-color: antiquewhite;
    width:100%;
    padding: 10px;
    margin:2px;
    height:100px;
    border: 3px solid #d4af37;
    border-radius: 20px;
    font-size: 45px;
    text-align: center;
}