update style

static/browser_detect.css

@@ -19,19 +19,21 @@ body {
     position: relative;
   text-align: left;
   padding: 10px;
-  background-color: #d3d3d3;
+  background-color: #656565;
   border-radius: 12.5px;
   min-width:calc(10px + 1em);
   max-width:100%;
   font-weight: bold;
-
+  color:#DFDFDF
 }
 .wrapper_result{
     position: relative;
   text-align: left;
   padding: 10px;
-  background-color: #3e3e3e;
+  background-color: #F3F3F3;
+  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
   margin: 10px;
+  margin-bottom: 20px;
   border-radius: 15px;
 
 
@@ -41,7 +43,8 @@ body {
 #text{
   text-align: center;
   padding: 10px;
-  background-color: #d3d3d3;
+  background-color:#d9d9d9;
+  
   margin: none;
   margin-top: 0px;
   border-radius: 12.25px;
@@ -56,19 +59,37 @@ body {
     position: relative;
   text-align: left;
   padding: 10px;
-  background-color: #3e3e3e;
+  background-color: #F3F3F3;
+  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.25);
   margin: 10px;
   margin-top: none;
   border-radius: 15px;
   overflow-y: hidden;
 }
+.canvas_wrapper{
+  position: relative;
+text-align: left;
+height:290px;
+background-color: #F3F3F3;
+box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
+margin:10px;
+margin-bottom: 20px;
+
+border-radius: 15px;
+overflow: hidden;
+}
 #output_canvas{
-    display:block; position:relative;
+    display:block; position:absolute;
+    left:0px;
+    width:100%
 }
 #text-to-speech{
+  margin-top: 5px;
   padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 12.25px;
     width:100%;
-    background-color: #3e3e3e;
+    background-color: #374e60;
     font-size: large;
     border: none;
     color:#d3d3d3

templates/browser-detect.html

@@ -28,7 +28,9 @@
 
     <div class="container">
         <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
+        <div class="canvas_wrapper">
         <canvas class="output_canvas" id="output_canvas" width="100%" height="300%"></canvas>
+        </div>
     </div>
     <center>
         <img id="output_image" style="display:none"></img>