small style changes

index.html

@@ -12,7 +12,11 @@
     <!-- Home Screen -->
     <div id="home_screen">
         <h1 id="page_name">Threatmixer</h1>
-        <button id="select_button">Begin!</button>
+        <div id="home_button_container">
+            <button class="home_buttons" id="begin_button">BEGIN</button>
+            <button class="home_buttons" id="info_button">INFO</button>
+            <button class="home_buttons" id="credits_button">CREDITS</button>
+        </div>
     </div>
 
     <!-- Selection Screen -->

script.js

@@ -11,7 +11,7 @@ const layerButtons = document.getElementsByClassName("layer_button"),
     recordButton = document.getElementById("record_button"),
     saveButton = document.getElementById("save_button"),
     deleteButton = document.getElementById("delete_button"),
-    selectButton = document.getElementById("select_button"),
+    beginButton = document.getElementById("begin_button"),
     exitButton = document.getElementById("exit_button"),
     visButton = document.getElementById("visualizer_toggle"),
     musicScreen = document.getElementById("music_screen"),
@@ -35,7 +35,7 @@ const layerButtons = document.getElementsByClassName("layer_button"),
 // hiding these screens initially for cleaner page startup
 loadingScreen.style.display = "none";
 musicScreen.style.display = "none";
-selectionScreen.style.display = "flex";
+selectionScreen.style.display = "none";
 
 // also setting carousel visibility
 modCarousel.style.display = "none";
@@ -102,6 +102,7 @@ let layerSoloed, songStarted, eraseRecording, loadedLayers,
     regionsAddedToSelector = false,
     recorderQueued = false,
     visActive = false,
+    programStarted = false,
     divIndex = -1,
     baseSlideNum = 1,
     modSlideNum = 1,
@@ -116,7 +117,17 @@ const brightened = "brightness(100%)",
     soloIcon1 = "assets/images/button_icons/solo_icon_1.png",
     soloIcon2 = "assets/images/button_icons/solo_icon_2.png";
 
-// giving the side carousel buttons functionality to switch between region groups
+/*
+NON-DYNAMIC ONCLICKS
+*/
+
+// home page buttons
+beginButton.onclick = () => {
+    hideScreen(homeScreen);
+    showScreen(selectionScreen);
+}
+
+// changing variables based on which region gorup was clicked
 baseButton.onclick = () => {
     selectionState = "base";
     selectionHeader.innerText = "Vanilla / Downpour";
@@ -154,8 +165,16 @@ function runProgram() {
         // only showing the home screen until the user is ready to move on
         hideScreen(loadingScreen);
         hideScreen(musicScreen);
-        hideScreen(homeScreen);
-        showScreen(selectionScreen);
+
+        if (!programStarted) {
+            hideScreen(selectionScreen);
+            showScreen(homeScreen);
+            programStarted = true;
+        }
+        else {
+            hideScreen(homeScreen);
+            showScreen(selectionScreen);
+        }
 
         // setting the page name
         document.title = "Threatmixer - Selection Screen";
@@ -760,7 +779,7 @@ function addOnClick(element, regionData, resolve) {
             box-shadow: 0vw 0vw 1.3vw 0.4vw ${altColor}99;
         }
 
-        progress::-moz-progress-bar, progress::-webkit-progress-bar {
+        progress::-moz-progress-bar, progress::-webkit-progress-value {
             background-color: ${pageStyle};
         }
         `;
@@ -984,5 +1003,5 @@ function startVisualizer() {
 setTimeout(() => {
     loadingScreen.style.display = "flex";
     musicScreen.style.display = "flex";
-    selectionScreen.display = "flex";
+    selectionScreen.style.display = "flex";
 }, 300);

style.css

@@ -1,9 +1,9 @@
 /* General page formatting */
 @font-face {
     font-family: Rodondo;
-    src: url(assets/fonts/Rodondo.woff);
+    src: url(assets/fonts/rodondo.woff);
     font-family: RWmenu;
-    src: url(assets/fonts/RainWorldMenu.woff);
+    src: url(assets/fonts/rainworldmenu.woff);
 }
 
 html, body, #home_screen, #loading_screen, #music_screen {
@@ -29,7 +29,7 @@ button {
     box-shadow: 0.5vw 0.5vw 0.4vw #000000e6;
 }
 
-#select_button, .carrot_buttons {
+.home_buttons, .carrot_buttons {
     color: #dadbdd;
     border: 0.15vw solid #dadbdd;
 }
@@ -86,7 +86,7 @@ progress {
     z-index: 0;
     position: absolute;
     left: -3.2vw;
-    top: 15vw;
+    top: 19vw;
 }
 
 .side_button {
@@ -165,13 +165,21 @@ progress {
 
 /* Home and loading screen styling */
 #page_name {
-    font-size: 150px;
-    margin: 40px;
+    font-size: 10vw;
+    margin: 1vw;
+}
+
+.home_buttons {
+    border-radius: 0.9vw;
+    margin: 0.5vw;
+    padding: 0.5vw;
+    padding-left: 3vw;
+    padding-right: 3vw;
 }
 
-#select_button {
-    margin: 20px;
-    padding: 5px;
+#home_button_container {
+    display: flex;
+    flex-direction: column;
 }
 
 #home_screen {
@@ -278,7 +286,7 @@ body, #music_screen {
 }
 
 .layer_button_brightened:hover, .layer_button_brightened:hover, .solo_button, 
-    .other_buttons:hover, .recording_buttons:hover, #select_button:hover, 
+    .other_buttons:hover, .recording_buttons:hover, .home_buttons:hover, 
     #exit_button:hover, #visualizer_toggle:hover, .layer_button_darkened, 
     .alt_layer_button_darkened, .carrot_buttons:hover, .side_button:hover {
     filter: brightness(60%);