UUpdated Forest

index.html

@@ -34,9 +34,10 @@ <h1>Headphones Recommended</h1>
                 <hr />
                 <h1>SELECT A SCENE BELOW</h1>
             </div>
-            <div id='container'>
+
+        </div>
+        <div id='container'>
 
-            </div>
         </div>
         <div class="controls">
             <div class="sceneSelect">

main.js

@@ -5,6 +5,6 @@ const video = document.querySelector("#video");
 function changeScene(source) {
     document.getElementById("audio").src = "./audio/" + source + ".mp3";
     document.getElementById("video").src = "./video/" + source + ".mp4";
-    document.getElementById("infoText").style.display = "none";
+    document.getElementById("infoPanel").style.display = "none";
     document.getElementById('container').style.display = 'flex';
 }

styles.css

@@ -40,6 +40,10 @@ body {
     min-height: 50px;
 }
 
+.sceneSelect{
+    display: flex;
+}
+
 .sceneSelect button, .timerButton {
     font-size: 24pt;
     border-radius: 50%;
@@ -52,10 +56,13 @@ body {
     width: 70px;
     cursor: pointer;
     margin: 0 2px 0 2px;
-    color: rgba(0, 0, 0, 0.75)
+    color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.sceneSelect button:hover {
+.sceneSelect button:hover, .timerButton:hover {
     color: #ffffff;
     background-color: #000000;
 }
@@ -111,12 +118,12 @@ body {
 #container{
     height: 85%;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     display: none;
 }
 
 #app{
-    height: 90%;
+    height:auto;
     width: 90%;
     max-height: 500px;
     max-width: 600px;
@@ -128,6 +135,7 @@ body {
     border-radius: 10px;
     background-color: rgba(0, 0, 0, 0.7);
     text-align: center;
+    padding: 10px;
 }
 
 #first{
@@ -143,6 +151,9 @@ body {
 
 #second{
     height: 30%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
 }
 
 #third{
@@ -161,4 +172,14 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-transform: capitalize;
+}
+
+#timer-label{
+    font-size: 30px;
+    text-transform: uppercase;
+}
+
+#time-left{
+    font-size: 72px;
 }

timer.js

@@ -200,7 +200,7 @@ class App extends React.Component{
                 <div id='first'>
                     <Display mode={this.state.mode} mins={this.state.minutes} secs={this.state.seconds}/>
                 </div>
-                <div id='second'>
+                <div id='second' class='sceneSelect'>
                     <button 
                         id='start_stop'
                         class="timerButton"