Modify Elm HTML output and create stylesheet.

public/scss/main.scss

@@ -0,0 +1,87 @@
+$background-grey: #f4f4f4;
+
+@mixin board-cell($size) {
+    padding: 100%/$size/2;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Indie Flower", serif;
+}
+
+h1 {
+    font-size: 5em;
+    margin: 0px;
+    text-align: center;
+}
+
+body {
+    font-family: "Raleway", sans-serif;
+    margin: 0px;
+    background-color: $background-grey;
+}
+
+.content-wrapper {
+    max-width: 750px;
+    margin: auto;
+}
+
+.board {
+    background-color: tomato;
+    padding: 20px;
+    max-width: 500px;
+    margin: auto;
+    border-radius: 10px;
+}
+
+.black-player .overlay {
+    &:hover {
+        background-color: black;
+    }
+}
+
+.white-player .overlay {
+    &:hover {
+        background-color: white;
+    }
+}
+
+.board-cell {
+    display: inline-block;
+    position: relative;
+    @include board-cell(9);
+
+    .overlay {
+        position: absolute;
+        box-sizing: border-box;
+        top: 10%;
+        left: 10%;
+        width: 80%;
+        height: 80%;
+        border-radius: 50%;
+        transition: background-color .25s;
+    }
+
+    &.small {
+        @include board-cell(9);
+    }
+
+    &.medium {
+        @include board-cell(13);
+    }
+
+    &.large {
+        @include board-cell(19);
+    }
+}
+
+.black-cell {
+    .overlay {
+        background-color: black;
+    }
+}
+
+.white-cell {
+    .overlay {
+        background-color: white;
+    }
+}