diff --git a/main.js b/main.js
index ec29e5c..1db184f 100644
--- a/main.js
+++ b/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';
}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 75a38ae..c9464f8 100644
--- a/styles.css
+++ b/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;
}
\ No newline at end of file
diff --git a/timer.js b/timer.js
index 61b587d..bf63e4e 100644
--- a/timer.js
+++ b/timer.js
@@ -200,7 +200,7 @@ class App extends React.Component{
-