calculator.html

<div>
	<style>
    #result {
      width: 100%;
      padding: 1rem;
      font-size: 2rem;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      background: HSLA(336, 20%, 9%, 1.00);
      color: white;
      box-sizing: border-box;
      font-family: sans-serif;
    }
    #buttons {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
    }
    .op {
      background: HSLA(336, 10%, 18%, 1.00);
    }
    button {
      margin: 0;
      padding: 1rem;
      border: .05rem solid black;
      border-radius: 0;
      background: HSLA(336, 45%, 9%, 1.00);
      font-size: 2rem;
      color: white;
    }
		button[data-value]:after {
		  content: attr(data-value)
		}
    button[data-value="0"] {
      grid-column-start: 0;
      grid-column-end: span 2;
      border-bottom-left-radius: 1rem;
    }
    button:nth-col(1) {
      border-top-left-radius: 1rem;
    }

    button[data-value="="] {
      border-bottom-right-radius: 1rem;
    }
	</style>

	<div id="result">0</div>
	<div id="buttons">
		<button data-value="C" class="op" />
		<button data-value="&plusmn;" class="op" />
		<button data-value="%" class="op" />
		<button data-value="&divide;" class="op" />

		<button data-value="7" />
		<button data-value="8" />
		<button data-value="9" />
		<button data-value="&times;" class="op" />

		<button data-value="4" />
		<button data-value="5" />
		<button data-value="6" />
		<button data-value="-" class="op"/>

		<button data-value="1" />
		<button data-value="2" />
		<button data-value="3" />
		<button data-value="&plus;" class="op" />

		<button data-value="0" />
		<button data-value="." class="op" />
		<button data-value="=" class="op" />
	</div>
</div>