index.html

<header>
  body {
                margin: 0;
                background-color: #121212;
                font-family: sans-serif;
            }

            .header {
                background-color: #333;
                text-align: center;
                color: #FFF;
                padding: 16px;
                border-radius: 4px;
            }

            .calculator {
                background-color: #FFF;
                margin: 40px auto;
                max-width: 400px;
                padding: 16px;
                border-radius: 4px;
            }

            .display {
                width: 100%;
                padding: 8px;
                border: 1px solid #CCC;
                border-radius: 4px;
                font-size: 1.2em;
            }

            .keyboard {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-gap: 16px;
                font-size: 1.2em;
                margin-top: 16px;
                font-weight: bold;
            }

            button {
                border: 0;
                border-radius: 4px;
                background-color: #efefef;
                padding: 8px;
                cursor: pointer;
            }

            html {
                box-sizing: border-box;
            }

            *, *::before, *::after {
                box-sizing: inherit;
            }

            button.span2 {
                grid-column: span 2;
            }

            button.primary {
                background-color: #FFEEC2;
                color: #C49023;
            }

            .error {
                color: red;
            }

            .history {
                padding: 0 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
                height: 100px;
                overflow-y: scroll;
                margin-bottom: 8px;
                text-align: right;
            }
</header>