crazy

frontend/src/style/RootContainer.scss

@@ -1,10 +1,65 @@
+@import 'camphor.scss';
 @import 'palette.scss';
 @import 'constants.scss';
 
 body {
   margin: 0;
-  font-family: 'Roboto';
+  font-family: 'Camphor' !important;
+  font: 400 13.333px 'Camphor' !important;
   overflow-x: hidden;
   width: 100vw;
-  height: 100vh;
+  background-color: $orange;
+}
+
+.root-container {
+  //box-shadow: 0 30px 40px rgba(0,0,0,.1);
+  padding: 2em;
+  margin-top: 2em;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    background-image: url('../../assets/images/Maanteeamet.png');
+    background-size: cover;
+    height: 120px;
+    margin-bottom: 3em;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  img {
+    text-align: center;
+  }
+}
+
+.button-container {
+  margin-top: 1em;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  button {
+    margin: 0.25em;
+    font-family: inherit;
+
+    &.light {
+      background-color: rgba(255, 121, 121, 0.5);
+      border: 1px solid rgba(255, 121, 121, 1.0);
+    }
+  }
+}
+
+.capture-container {
+  canvas {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  & img {
+    max-width: 100%;
+    max-height: auto;
+  }
 }