Fix button width, remove elements from display when not used

credits

@@ -5,3 +5,4 @@ Icons:
  - menu by Nawicon from <a href="https://thenounproject.com/browse/icons/term/menu/" target="_blank" title="menu Icons">Noun Project</a>
  - square by Nawicon from <a href="https://thenounproject.com/browse/icons/term/square/" target="_blank" title="square Icons">Noun Project</a>
  - triangle by Nawicon from <a href="https://thenounproject.com/browse/icons/term/triangle/" target="_blank" title="triangle Icons">Noun Project</a
+ - headphones by Maxim Kulikov from <a href="https://thenounproject.com/browse/icons/term/headphones/" target="_blank" title="Headphones Icons">Noun Project</a>

main.js

@@ -43,6 +43,10 @@ const begin = () => {
     for (let element of document.querySelectorAll('.controlButtonOff')) {
       element.className = 'controlButtonOn';
     }
+    for (let element of document.querySelectorAll('.headphonesOff')) {
+      element.style.display = 'none';
+    }
+    document.querySelector('#beginOff').style.display = 'none';
     playPauseAudio()
-  }, 7000);
+  }, 6500);
 };

styles.css

@@ -32,6 +32,7 @@ main {
   margin: 40vh 0;
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .centre #begin {
@@ -40,6 +41,7 @@ main {
   border-radius: var(--border-radius);
   padding: 1rem 1.2rem;
   transition: background 200ms, border 200ms;
+  width: 75%;
 }
 
 .centre #beginOff {
@@ -50,6 +52,7 @@ main {
   border: 1px solid rgb(var(--card-border-rgb));
   border-radius: var(--border-radius);
   padding: 1rem 1.2rem;
+  width: 75%;
 }
 
 .headphonesOff {