style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* RESET */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
body { line-height: 1;}
ol,ul { list-style: none;}
blockquote,q { quotes: none;}
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

/* STYLE */

body {
    background-color: #556B2F;
    font-family: 'Roboto', sans-serif;
}

#calculator {
    width: 300px;
    height: 400px;
    margin: 6rem auto;
    padding: 1.8rem;
    background-color: #212529;
    
}

#display {
    width: 100%;
    height: 100px;
    margin-bottom: 2rem;
    background-color: #808080;
}

#operation {
    font-size: 1.2rem;
    text-align: right;
    padding: 0.5rem;
}

#result {
    font-size: 2.8rem;
    text-align: right;
    padding: 0.5rem;
}

#buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}

button {
    font-size: 1.5rem;
    padding: 0.8rem;
    background-color: #343a40;
    color: #fff;
    cursor: pointer;
    border: none;
}

button:hover {
    background-color: #6c757d;
}

.special-btn {
    background-color: #556B2F;
    color: #000;
}

.special-btn:hover {
    background-color: #6B8E23;
}

footer {
    font-size: 1.5rem;
    margin-top: -3rem;
}

a {
    color: #000;
}