Implement companion styling and animations

styles.scss

@@ -4,6 +4,7 @@ body {
   padding: 0;
   height: 100%;
   overflow: hidden;
+  position: relative;
 }
 
 main {
@@ -15,3 +16,59 @@ main {
 *::after {
   box-sizing: border-box;
 }
+
+.ui {
+  position: absolute;
+  bottom: 40px;
+  left: 40px;
+  right: 40px;
+  display: flex;
+  justify-content: flex-end;
+
+  #companion {
+    position: relative;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    #companion-shape {
+      height: 40px;
+      width: 40px;
+    }
+
+    #companion-mouth {
+      position: absolute;
+      z-index: 2;
+      bottom: 16%;
+      left: calc(50% - 15px);
+      width: 30px;
+      height: 15px;
+      border: solid 3px #590c13;
+      border-color: #590c13 transparent transparent transparent;
+      border-radius: 70%/15px 15px 0 0;
+      transform: rotate(180deg);
+      opacity: 0;
+    }
+
+    #companion-eye {
+      height: 20px;
+      width: 20px;
+      top: 20%;
+      left: calc(50% - 10px);
+      position: absolute;
+      border-radius: 50%;
+      background-color: #ebeef2;
+
+      #companion-pupil {
+        height: 5px;
+        width: 5px;
+        top: 50%;
+        left: calc(50% - 4px);
+        position: absolute;
+        border-radius: 50%;
+        background-color: #0d0d0d;
+      }
+    }
+  }
+}