From 4e2c967f883f6d7d22254fb826688b1af90f643c Mon Sep 17 00:00:00 2001
From: Luke Aschenbrenner <ashbren21@gmail.com>
Date: Fri, 5 May 2023 12:48:28 -0500
Subject: [PATCH] UI tweaks

---
 SoundboardQuiz.xcodeproj/project.pbxproj      |   4 +
 .../Base.lproj/LaunchScreen.storyboard        |  73 +++++--
 SoundboardQuiz/Base.lproj/Main.storyboard     | 180 ++++++------------
 SoundboardQuiz/GradientView.swift             |  51 +++++
 4 files changed, 166 insertions(+), 142 deletions(-)
 create mode 100644 SoundboardQuiz/GradientView.swift

diff --git a/SoundboardQuiz.xcodeproj/project.pbxproj b/SoundboardQuiz.xcodeproj/project.pbxproj
index 1d129ee..4e96993 100644
--- a/SoundboardQuiz.xcodeproj/project.pbxproj
+++ b/SoundboardQuiz.xcodeproj/project.pbxproj
@@ -27,6 +27,7 @@
 		2A9093D529F72D49002DBA4F /* SoundCollectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2A9093D429F72D49002DBA4F /* SoundCollectionView.swift */; };
 		2A9093D729F73564002DBA4F /* MainGameViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2A9093D629F73564002DBA4F /* MainGameViewController.swift */; };
 		2A9F5AB12A02BF0700EA876A /* Sound.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2A9F5AB02A02BF0700EA876A /* Sound.swift */; };
+		2A9F5AB32A05748F00EA876A /* GradientView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2A9F5AB22A05748F00EA876A /* GradientView.swift */; };
 		2AC1DDC129F6D292001253C3 /* SoundCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2AC1DDC029F6D292001253C3 /* SoundCollectionViewCell.swift */; };
 		2AC1DDC329F6D2A8001253C3 /* ImageCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2AC1DDC229F6D2A8001253C3 /* ImageCollectionViewCell.swift */; };
 		2AC1DDC929F6E1A2001253C3 /* TestTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2AC1DDC829F6E1A2001253C3 /* TestTableViewCell.swift */; };
@@ -73,6 +74,7 @@
 		2A9093D429F72D49002DBA4F /* SoundCollectionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = SoundCollectionView.swift; path = SoundboardQuiz/SoundCollectionView.swift; sourceTree = "<group>"; };
 		2A9093D629F73564002DBA4F /* MainGameViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = MainGameViewController.swift; path = SoundboardQuiz/MainGameViewController.swift; sourceTree = "<group>"; };
 		2A9F5AB02A02BF0700EA876A /* Sound.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = Sound.swift; path = SoundboardQuiz/Sound.swift; sourceTree = "<group>"; };
+		2A9F5AB22A05748F00EA876A /* GradientView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = GradientView.swift; path = SoundboardQuiz/GradientView.swift; sourceTree = "<group>"; };
 		2AC1DDC029F6D292001253C3 /* SoundCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = SoundCollectionViewCell.swift; path = SoundboardQuiz/SoundCollectionViewCell.swift; sourceTree = "<group>"; };
 		2AC1DDC229F6D2A8001253C3 /* ImageCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = ImageCollectionViewCell.swift; path = SoundboardQuiz/ImageCollectionViewCell.swift; sourceTree = "<group>"; };
 		2AC1DDC829F6E1A2001253C3 /* TestTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TestTableViewCell.swift; sourceTree = "<group>"; };
@@ -123,6 +125,7 @@
 				2A0ACF0929F1A02E001E5D03 /* LevelSelectTableViewController.swift */,
 				2A0ACF2529F1A0F3001E5D03 /* LaunchScreen.storyboard */,
 				2A0ACF2729F1A107001E5D03 /* Main.storyboard */,
+				2A9F5AB22A05748F00EA876A /* GradientView.swift */,
 				2A7AF4792A015F8500AF3E7B /* HighScoresViewController.swift */,
 				2AC744AB29FB1CF5006E0CD7 /* GameOverViewController.swift */,
 				2AFCB22D29FAD2B5003BD84E /* ShuffleView.swift */,
@@ -269,6 +272,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				2A9093D729F73564002DBA4F /* MainGameViewController.swift in Sources */,
+				2A9F5AB32A05748F00EA876A /* GradientView.swift in Sources */,
 				2A9F5AB12A02BF0700EA876A /* Sound.swift in Sources */,
 				2A0ACF1E29F1A02F001E5D03 /* CategoryTableViewCell.swift in Sources */,
 				2A0ACF2329F1A02F001E5D03 /* SceneDelegate.swift in Sources */,
diff --git a/SoundboardQuiz/Base.lproj/LaunchScreen.storyboard b/SoundboardQuiz/Base.lproj/LaunchScreen.storyboard
index 54bae14..df0a99e 100644
--- a/SoundboardQuiz/Base.lproj/LaunchScreen.storyboard
+++ b/SoundboardQuiz/Base.lproj/LaunchScreen.storyboard
@@ -1,9 +1,10 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13142" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12042"/>
-        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -12,37 +13,75 @@
             <objects>
                 <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
-                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
-                                <rect key="frame" x="0.0" y="626.5" width="375" height="20.5"/>
+                                <rect key="frame" x="0.0" y="832" width="393" height="0.0"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="SoundboardQuiz" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
-                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
-                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
+                            <view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="iuw-K8-5bD">
+                                <rect key="frame" x="140" y="180" width="113" height="120"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <subviews>
+                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="play.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="aXd-lC-L6C">
+                                        <rect key="frame" x="13" y="14" width="86" height="93"/>
+                                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                        <color key="tintColor" systemColor="systemBackgroundColor"/>
+                                    </imageView>
+                                </subviews>
+                                <color key="backgroundColor" red="0.66666666666666663" green="0.22352941176470587" blue="0.22352941176470587" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                            </view>
+                            <view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="QZY-cN-5Sz">
+                                <rect key="frame" x="140" y="366" width="113" height="120"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <subviews>
+                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="checkerboard.rectangle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="x5Z-o3-D2V">
+                                        <rect key="frame" x="13" y="14" width="86" height="93"/>
+                                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                        <color key="tintColor" systemColor="systemBackgroundColor"/>
+                                    </imageView>
+                                </subviews>
+                                <color key="backgroundColor" red="0.0" green="0.45882352941176469" blue="0.8901960784313725" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                            </view>
+                            <view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="EhK-38-f8y">
+                                <rect key="frame" x="140" y="548" width="113" height="120"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <subviews>
+                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="person.fill.questionmark" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="rLE-FY-xu5">
+                                        <rect key="frame" x="13" y="14" width="86" height="93"/>
+                                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                        <color key="tintColor" systemColor="systemBackgroundColor"/>
+                                    </imageView>
+                                </subviews>
+                                <color key="backgroundColor" systemColor="systemGreenColor"/>
+                            </view>
                         </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
                             <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
                             <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" constant="20" symbolic="YES" id="SfN-ll-jLj"/>
                             <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" constant="20" symbolic="YES" id="x7j-FC-K8j"/>
                         </constraints>
-                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="53" y="375"/>
+            <point key="canvasLocation" x="52.671755725190835" y="374.64788732394368"/>
         </scene>
     </scenes>
+    <resources>
+        <image name="checkerboard.rectangle" catalog="system" width="128" height="93"/>
+        <image name="person.fill.questionmark" catalog="system" width="128" height="102"/>
+        <image name="play.fill" catalog="system" width="117" height="128"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+        <systemColor name="systemGreenColor">
+            <color red="0.20392156862745098" green="0.7803921568627451" blue="0.34901960784313724" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </systemColor>
+    </resources>
 </document>
diff --git a/SoundboardQuiz/Base.lproj/Main.storyboard b/SoundboardQuiz/Base.lproj/Main.storyboard
index 4b61b17..c20a2be 100644
--- a/SoundboardQuiz/Base.lproj/Main.storyboard
+++ b/SoundboardQuiz/Base.lproj/Main.storyboard
@@ -11,77 +11,6 @@
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
-        <!--Select a level-->
-        <scene sceneID="TgU-b4-ZBe">
-            <objects>
-                <viewController title="Select a level" id="x3v-oV-yvd" customClass="LevelSelectController" customModule="SoundboardQuiz" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="m0l-Mt-4Wa">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
-                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <subviews>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="PERCENTAGE:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="gOw-ka-ssN">
-                                <rect key="frame" x="146" y="68" width="111" height="21"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <nil key="textColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <slider opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="0.5" minValue="0.0" maxValue="1" translatesAutoresizingMaskIntoConstraints="NO" id="PvD-O9-dWW">
-                                <rect key="frame" x="47" y="126" width="298" height="30"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <connections>
-                                    <action selector="Slider:forEvent:" destination="x3v-oV-yvd" eventType="valueChanged" id="j7G-Zn-HIn"/>
-                                </connections>
-                            </slider>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="17n-ny-wxH">
-                                <rect key="frame" x="110" y="97" width="182" height="21"/>
-                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <nil key="textColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="-1" estimatedSectionHeaderHeight="-1" sectionFooterHeight="-1" estimatedSectionFooterHeight="-1" id="t26-Si-8kE">
-                                <rect key="frame" x="-12" y="163" width="394" height="641"/>
-                                <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                                <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                                <prototypes>
-                                    <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="categoryCell" id="N0p-1K-NE1" customClass="CategoryCellTableViewCell" customModule="SoundboardQuiz" customModuleProvider="target">
-                                        <rect key="frame" x="0.0" y="50" width="394" height="43.666667938232422"/>
-                                        <autoresizingMask key="autoresizingMask"/>
-                                        <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="N0p-1K-NE1" id="Y9C-qI-fgd">
-                                            <rect key="frame" x="0.0" y="0.0" width="394" height="43.666667938232422"/>
-                                            <autoresizingMask key="autoresizingMask"/>
-                                            <subviews>
-                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="3NR-GS-yw4">
-                                                    <rect key="frame" x="35" y="11" width="42" height="21"/>
-                                                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                                    <nil key="textColor"/>
-                                                    <nil key="highlightedColor"/>
-                                                </label>
-                                            </subviews>
-                                        </tableViewCellContentView>
-                                        <connections>
-                                            <outlet property="labelName" destination="3NR-GS-yw4" id="WUG-nG-Hx7"/>
-                                        </connections>
-                                    </tableViewCell>
-                                </prototypes>
-                            </tableView>
-                        </subviews>
-                        <viewLayoutGuide key="safeArea" id="rmJ-Xh-nwT"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </view>
-                    <navigationItem key="navigationItem" id="hY2-80-jiH"/>
-                    <connections>
-                        <outlet property="PercentageLabel" destination="17n-ny-wxH" id="mAe-6j-63Y"/>
-                        <outlet property="sliderOutlet" destination="PvD-O9-dWW" id="ZVo-gY-7dx"/>
-                        <outlet property="table" destination="t26-Si-8kE" id="Cyx-OH-W7j"/>
-                    </connections>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="EmS-E9-syG" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="1120" y="-815"/>
-        </scene>
         <!--NavController-->
         <scene sceneID="yv4-vi-Or2">
             <objects>
@@ -116,7 +45,7 @@
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Quiz" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aEu-th-9J6">
                                 <rect key="frame" x="157" y="183" width="79" height="48"/>
                                 <fontDescription key="fontDescription" name=".AppleSystemUIFont" family=".AppleSystemUIFont" pointSize="40"/>
-                                <color key="textColor" systemColor="systemGreenColor"/>
+                                <color key="textColor" systemColor="systemRedColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="VUY-3M-0xL">
@@ -128,11 +57,11 @@
                                 <state key="normal" title="Button"/>
                                 <buttonConfiguration key="configuration" style="filled" title="Resume" cornerStyle="dynamic">
                                     <backgroundConfiguration key="background" cornerRadius="13" imageContentMode="left">
-                                        <color key="backgroundColor" systemColor="systemRedColor"/>
+                                        <color key="backgroundColor" red="0.86274509803921573" green="0.10980392156862745" blue="0.12941176470588234" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                         <imageReference key="image" image="arrow.forward" catalog="system" symbolScale="large" renderingMode="original" variableValue="1"/>
                                     </backgroundConfiguration>
                                     <fontDescription key="titleFontDescription" type="system" pointSize="40"/>
-                                    <directionalEdgeInsets key="contentInsets" top="0.0" leading="30" bottom="0.0" trailing="10"/>
+                                    <directionalEdgeInsets key="contentInsets" top="0.0" leading="0.0" bottom="0.0" trailing="0.0"/>
                                 </buttonConfiguration>
                                 <connections>
                                     <segue destination="tXV-QY-UTS" kind="show" identifier="directGameViewSegue" id="WQn-BQ-bGV"/>
@@ -149,7 +78,6 @@
                                     <backgroundConfiguration key="background" cornerRadius="13" imageContentMode="left" strokeWidth="3" strokeOutset="0.0">
                                         <color key="backgroundColor" name="AccentColor"/>
                                         <imageReference key="image" image="trophy.fill" catalog="system" symbolScale="large" renderingMode="original" variableValue="1"/>
-                                        <color key="strokeColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                     </backgroundConfiguration>
                                     <fontDescription key="titleFontDescription" type="system" pointSize="40"/>
                                     <directionalEdgeInsets key="contentInsets" top="0.0" leading="30" bottom="0.0" trailing="10"/>
@@ -168,7 +96,7 @@
                                 <state key="normal" title="Button"/>
                                 <buttonConfiguration key="configuration" style="filled" title="New Game" cornerStyle="dynamic">
                                     <backgroundConfiguration key="background" cornerRadius="13" imageContentMode="left">
-                                        <color key="backgroundColor" systemColor="systemTealColor"/>
+                                        <color key="backgroundColor" red="0.066666666666666666" green="0.52941176470588236" blue="0.51372549019607838" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                         <imageReference key="image" image="theatermasks.fill" catalog="system" symbolScale="large" renderingMode="original" variableValue="1"/>
                                     </backgroundConfiguration>
                                     <fontDescription key="titleFontDescription" type="system" pointSize="43"/>
@@ -241,7 +169,7 @@
                             <outlet property="delegate" destination="BBh-RV-B99" id="uPL-6W-6Ob"/>
                         </connections>
                     </tableView>
-                    <navigationItem key="navigationItem" id="Vzd-VX-nCI">
+                    <navigationItem key="navigationItem" largeTitleDisplayMode="always" id="Vzd-VX-nCI">
                         <barButtonItem key="backBarButtonItem" title="Exit" id="fs4-fn-5YZ"/>
                     </navigationItem>
                 </tableViewController>
@@ -342,7 +270,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="cm2-jf-iV2" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="2189" y="801"/>
+            <point key="canvasLocation" x="2905" y="504"/>
         </scene>
         <!--Second Game View-->
         <scene sceneID="R58-Rc-XKW">
@@ -367,24 +295,24 @@
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="CeK-06-gX6" customClass="ShuffleView" customModule="SoundboardQuiz" customModuleProvider="target">
                                 <rect key="frame" x="77" y="761" width="238" height="57"/>
                                 <subviews>
-                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" image="shuffle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="NMK-3v-9w8">
-                                        <rect key="frame" x="16" y="10" width="39" height="38"/>
+                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="shuffle" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="NMK-3v-9w8">
+                                        <rect key="frame" x="16" y="15.000000000000037" width="23" height="27.333333333333336"/>
                                         <color key="tintColor" systemColor="systemBackgroundColor"/>
                                     </imageView>
                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="(X Left)" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Ld5-fW-OxI">
                                         <rect key="frame" x="132" y="18" width="58" height="21"/>
                                         <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                        <nil key="textColor"/>
+                                        <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                         <nil key="highlightedColor"/>
                                     </label>
                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Shuffle" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dg5-ny-NNJ">
                                         <rect key="frame" x="69.333333333333343" y="18" width="55" height="21"/>
                                         <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                        <nil key="textColor"/>
+                                        <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                         <nil key="highlightedColor"/>
                                     </label>
                                 </subviews>
-                                <color key="backgroundColor" systemColor="systemCyanColor"/>
+                                <color key="backgroundColor" red="0.066666666666666666" green="0.52941176470588236" blue="0.51372549019607838" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 <accessibility key="accessibilityConfiguration">
                                     <accessibilityTraits key="traits" button="YES"/>
                                     <bool key="isElement" value="YES"/>
@@ -393,10 +321,11 @@
                                 <constraints>
                                     <constraint firstItem="Ld5-fW-OxI" firstAttribute="top" secondItem="CeK-06-gX6" secondAttribute="top" constant="18" id="4I3-aX-Jte"/>
                                     <constraint firstAttribute="bottom" secondItem="Ld5-fW-OxI" secondAttribute="bottom" constant="18" id="6tM-6n-dQa"/>
-                                    <constraint firstItem="dg5-ny-NNJ" firstAttribute="leading" secondItem="NMK-3v-9w8" secondAttribute="trailing" constant="30" id="Dqn-5x-AUN"/>
-                                    <constraint firstAttribute="bottom" secondItem="NMK-3v-9w8" secondAttribute="bottom" constant="8" id="Pkf-Fp-Hdz"/>
+                                    <constraint firstItem="dg5-ny-NNJ" firstAttribute="leading" secondItem="NMK-3v-9w8" secondAttribute="trailing" constant="30.333333333333343" id="8Uj-eJ-8K2"/>
+                                    <constraint firstAttribute="trailing" secondItem="Ld5-fW-OxI" secondAttribute="trailing" constant="48" id="AW6-Ct-am5"/>
+                                    <constraint firstItem="NMK-3v-9w8" firstAttribute="centerY" secondItem="CeK-06-gX6" secondAttribute="centerY" id="T9d-sG-6jA"/>
                                     <constraint firstItem="dg5-ny-NNJ" firstAttribute="centerY" secondItem="CeK-06-gX6" secondAttribute="centerY" id="WIc-37-bdk"/>
-                                    <constraint firstItem="NMK-3v-9w8" firstAttribute="top" secondItem="CeK-06-gX6" secondAttribute="top" constant="8" id="kfh-me-4x2"/>
+                                    <constraint firstItem="NMK-3v-9w8" firstAttribute="top" secondItem="CeK-06-gX6" secondAttribute="top" constant="13.333333333333336" id="gQc-yf-cwh"/>
                                     <constraint firstItem="Ld5-fW-OxI" firstAttribute="leading" secondItem="dg5-ny-NNJ" secondAttribute="trailing" constant="7.6666666666666572" id="uq8-2b-yAT"/>
                                     <constraint firstItem="NMK-3v-9w8" firstAttribute="leading" secondItem="CeK-06-gX6" secondAttribute="leading" constant="16" id="vMY-ar-HYc"/>
                                 </constraints>
@@ -405,7 +334,7 @@
                                 </connections>
                             </view>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Score: 10000" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="yp5-VI-CkV">
-                                <rect key="frame" x="145" y="126" width="102" height="21"/>
+                                <rect key="frame" x="145.66666666666666" y="126" width="101.66666666666666" height="21"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
@@ -420,21 +349,22 @@
                             <constraint firstItem="CeK-06-gX6" firstAttribute="leading" secondItem="csc-yf-t0A" secondAttribute="leading" constant="77" id="3iL-ZF-XcW"/>
                             <constraint firstItem="csc-yf-t0A" firstAttribute="trailing" secondItem="tVM-2t-eum" secondAttribute="trailing" constant="23" id="3v7-su-YDg"/>
                             <constraint firstItem="yp5-VI-CkV" firstAttribute="top" secondItem="csc-yf-t0A" secondAttribute="top" constant="23" id="4fx-NO-PKe"/>
-                            <constraint firstItem="yp5-VI-CkV" firstAttribute="leading" secondItem="csc-yf-t0A" secondAttribute="leading" constant="145" id="CJp-dH-FUj"/>
                             <constraint firstItem="csc-yf-t0A" firstAttribute="trailing" secondItem="CeK-06-gX6" secondAttribute="trailing" constant="78" id="CUb-2A-Mw3"/>
                             <constraint firstItem="csc-yf-t0A" firstAttribute="bottom" secondItem="tVM-2t-eum" secondAttribute="bottom" constant="87" id="FDq-JZ-Feo"/>
+                            <constraint firstItem="yp5-VI-CkV" firstAttribute="leading" secondItem="csc-yf-t0A" secondAttribute="leading" constant="145.66666666666666" id="IBR-04-klB"/>
                             <constraint firstItem="89A-kF-OLT" firstAttribute="height" secondItem="tVM-2t-eum" secondAttribute="height" id="MM2-Rb-Hzl"/>
                             <constraint firstItem="CeK-06-gX6" firstAttribute="top" secondItem="89A-kF-OLT" secondAttribute="bottom" constant="30" id="UxU-gv-rVI"/>
                             <constraint firstItem="89A-kF-OLT" firstAttribute="leading" secondItem="csc-yf-t0A" secondAttribute="leading" constant="16" id="Vmc-JC-9gT"/>
                             <constraint firstItem="89A-kF-OLT" firstAttribute="top" secondItem="yp5-VI-CkV" secondAttribute="bottom" constant="32" id="Xfb-Pf-TKE"/>
+                            <constraint firstItem="yp5-VI-CkV" firstAttribute="centerX" secondItem="csc-yf-t0A" secondAttribute="centerX" id="aM6-5I-gqO"/>
                             <constraint firstItem="89A-kF-OLT" firstAttribute="top" secondItem="csc-yf-t0A" secondAttribute="top" constant="76" id="gDH-PA-75i"/>
                             <constraint firstItem="csc-yf-t0A" firstAttribute="bottom" secondItem="CeK-06-gX6" secondAttribute="bottom" id="nr8-9C-RBZ"/>
                             <constraint firstItem="csc-yf-t0A" firstAttribute="bottom" secondItem="89A-kF-OLT" secondAttribute="bottom" constant="87" id="uT4-Sl-7aE"/>
-                            <constraint firstItem="csc-yf-t0A" firstAttribute="trailing" secondItem="yp5-VI-CkV" secondAttribute="trailing" constant="146" id="yOg-9A-9AS"/>
+                            <constraint firstItem="csc-yf-t0A" firstAttribute="trailing" secondItem="yp5-VI-CkV" secondAttribute="trailing" constant="145.66666666666669" id="wqx-TW-pje"/>
                             <constraint firstItem="CeK-06-gX6" firstAttribute="top" secondItem="tVM-2t-eum" secondAttribute="bottom" constant="30" id="zNx-gS-0Lr"/>
                         </constraints>
                     </view>
-                    <navigationItem key="navigationItem" title="Title of Navigation" id="jdW-xP-Ytc"/>
+                    <navigationItem key="navigationItem" title="Title of Navigation" largeTitleDisplayMode="never" id="jdW-xP-Ytc"/>
                     <connections>
                         <outlet property="containerView1" destination="89A-kF-OLT" id="6n4-W9-n6e"/>
                         <outlet property="containerView2" destination="tVM-2t-eum" id="ZJw-jI-V1L"/>
@@ -451,26 +381,25 @@
                     </connections>
                 </tapGestureRecognizer>
             </objects>
-            <point key="canvasLocation" x="4915.2671755725187" y="57.74647887323944"/>
+            <point key="canvasLocation" x="4295" y="218"/>
         </scene>
         <!--Game Over View Controller-->
         <scene sceneID="0NE-ly-DJo">
             <objects>
                 <viewController storyboardIdentifier="GameOver" id="5mH-T7-Cgi" customClass="GameOverViewController" customModule="SoundboardQuiz" customModuleProvider="target" sceneMemberID="viewController">
-                    <view key="view" contentMode="scaleToFill" id="KWn-3S-AeE">
+                    <view key="view" contentMode="scaleToFill" id="KWn-3S-AeE" customClass="GradientView" customModule="SoundboardQuiz" customModuleProvider="target">
                         <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="GAME OVER" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Xoe-7m-2Ga">
-                                <rect key="frame" x="22" y="316" width="349" height="77"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="64"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="GAME OVER" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Xoe-7m-2Ga">
+                                <rect key="frame" x="22" y="316" width="349" height="65"/>
+                                <fontDescription key="fontDescription" name="Kailasa" family="Kailasa" pointSize="50"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="GGs-E4-Kal">
-                                <rect key="frame" x="143" y="537" width="108" height="35"/>
-                                <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="New Game"/>
+                                <rect key="frame" x="143" y="540" width="108" height="34.333333333333371"/>
+                                <buttonConfiguration key="configuration" style="filled" title="New Game"/>
                                 <connections>
                                     <action selector="newGamePressed:" destination="5mH-T7-Cgi" eventType="touchUpInside" id="koT-fq-Maz"/>
                                 </connections>
@@ -479,20 +408,20 @@
                                 <rect key="frame" x="117" y="615" width="160" height="35"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <state key="normal" title="Button"/>
-                                <buttonConfiguration key="configuration" style="gray" title="Exit to Main Menu"/>
+                                <buttonConfiguration key="configuration" style="filled" title="Exit to Main Menu"/>
                                 <connections>
                                     <action selector="mainMenuPressed:" destination="5mH-T7-Cgi" eventType="touchUpInside" id="TRZ-Gy-Hr6"/>
                                 </connections>
                             </button>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Score: 999999" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aZC-yI-DHl">
-                                <rect key="frame" x="139" y="455" width="116" height="21"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Score: -1" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aZC-yI-DHl">
+                                <rect key="frame" x="139" y="443" width="116" height="36"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="30"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="aSw-39-Hao"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                         <constraints>
                             <constraint firstItem="aSw-39-Hao" firstAttribute="trailing" secondItem="Xoe-7m-2Ga" secondAttribute="trailing" constant="22" id="Dtg-Ju-JPG"/>
                             <constraint firstItem="Xoe-7m-2Ga" firstAttribute="leading" secondItem="aSw-39-Hao" secondAttribute="leading" constant="22" id="EL3-tx-wr5"/>
@@ -504,6 +433,15 @@
                             <constraint firstItem="GGs-E4-Kal" firstAttribute="top" secondItem="aZC-yI-DHl" secondAttribute="bottom" constant="61" id="rKS-Og-oue"/>
                             <constraint firstItem="aZC-yI-DHl" firstAttribute="top" secondItem="Xoe-7m-2Ga" secondAttribute="bottom" constant="62" id="syP-5v-Bl1"/>
                         </constraints>
+                        <userDefinedRuntimeAttributes>
+                            <userDefinedRuntimeAttribute type="color" keyPath="firstColor">
+                                <color key="value" red="0.86274509799999999" green="0.35932694043161179" blue="0.37243678826127524" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                            </userDefinedRuntimeAttribute>
+                            <userDefinedRuntimeAttribute type="color" keyPath="secondColor">
+                                <color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                            </userDefinedRuntimeAttribute>
+                            <userDefinedRuntimeAttribute type="boolean" keyPath="isHorizontal" value="NO"/>
+                        </userDefinedRuntimeAttributes>
                     </view>
                     <navigationItem key="navigationItem" id="SRY-pT-R39"/>
                     <connections>
@@ -512,7 +450,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="VWD-7r-l90" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="6227" y="103"/>
+            <point key="canvasLocation" x="5607" y="263"/>
         </scene>
         <!--Square Collection View Controller-->
         <scene sceneID="ww2-dg-ROi">
@@ -536,8 +474,8 @@
                                     <rect key="frame" x="0.0" y="0.0" width="111.00000000000001" height="115"/>
                                     <autoresizingMask key="autoresizingMask"/>
                                     <subviews>
-                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="c30-gz-Y6Z">
-                                            <rect key="frame" x="0.0" y="0.0" width="111" height="115"/>
+                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="c30-gz-Y6Z">
+                                            <rect key="frame" x="3" y="3" width="105" height="109"/>
                                             <accessibility key="accessibilityConfiguration">
                                                 <accessibilityTraits key="traits" none="YES"/>
                                                 <bool key="isElement" value="YES"/>
@@ -545,22 +483,20 @@
                                         </imageView>
                                     </subviews>
                                     <constraints>
-                                        <constraint firstItem="c30-gz-Y6Z" firstAttribute="leading" secondItem="jx4-11-57y" secondAttribute="leading" id="7BQ-S2-edX"/>
-                                        <constraint firstAttribute="bottom" secondItem="c30-gz-Y6Z" secondAttribute="bottom" id="8vx-qC-qIj"/>
-                                        <constraint firstItem="c30-gz-Y6Z" firstAttribute="height" secondItem="jx4-11-57y" secondAttribute="height" id="IJA-M0-ERM"/>
-                                        <constraint firstItem="c30-gz-Y6Z" firstAttribute="top" secondItem="jx4-11-57y" secondAttribute="top" id="Zw9-mE-gRI"/>
-                                        <constraint firstAttribute="trailing" secondItem="c30-gz-Y6Z" secondAttribute="trailing" id="fIw-0q-rxl"/>
-                                        <constraint firstItem="c30-gz-Y6Z" firstAttribute="width" secondItem="jx4-11-57y" secondAttribute="width" id="viT-gX-gLa"/>
+                                        <constraint firstItem="c30-gz-Y6Z" firstAttribute="leading" secondItem="jx4-11-57y" secondAttribute="leading" constant="3" id="7BQ-S2-edX"/>
+                                        <constraint firstAttribute="bottom" secondItem="c30-gz-Y6Z" secondAttribute="bottom" constant="3" id="8vx-qC-qIj"/>
+                                        <constraint firstItem="c30-gz-Y6Z" firstAttribute="top" secondItem="jx4-11-57y" secondAttribute="top" constant="3" id="Zw9-mE-gRI"/>
+                                        <constraint firstAttribute="trailing" secondItem="c30-gz-Y6Z" secondAttribute="trailing" constant="3" id="fIw-0q-rxl"/>
                                     </constraints>
                                 </collectionViewCellContentView>
-                                <color key="backgroundColor" systemColor="systemRedColor"/>
+                                <color key="backgroundColor" red="0.86274509803921573" green="0.10980392156862745" blue="0.13333333333333333" alpha="1" colorSpace="calibratedRGB"/>
                                 <size key="customSize" width="111.00000000000001" height="115"/>
                                 <connections>
                                     <outlet property="image" destination="c30-gz-Y6Z" id="1mA-bL-nPb"/>
                                 </connections>
                             </collectionViewCell>
                         </cells>
-                        <collectionReusableView key="sectionFooterView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="a9o-n1-FIt">
+                        <collectionReusableView key="sectionFooterView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" reuseIdentifier="imageFooter" id="a9o-n1-FIt">
                             <rect key="frame" x="0.0" y="115" width="159.33333333333331" height="200"/>
                             <autoresizingMask key="autoresizingMask"/>
                         </collectionReusableView>
@@ -572,7 +508,7 @@
                 </collectionViewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="473-qW-fyf" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="5069" y="-487"/>
+            <point key="canvasLocation" x="4449" y="-327"/>
         </scene>
         <!--Square Collection View Controller-->
         <scene sceneID="Ohd-zN-G3d">
@@ -618,7 +554,7 @@
                                         <constraint firstAttribute="bottom" secondItem="0MS-cS-km3" secondAttribute="bottom" constant="20" id="O2W-cN-MGF"/>
                                     </constraints>
                                 </collectionViewCellContentView>
-                                <color key="backgroundColor" systemColor="systemGreenColor"/>
+                                <color key="backgroundColor" red="0.5" green="0.85540273238201525" blue="0.058411267338966837" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 <size key="customSize" width="111" height="115"/>
                                 <connections>
                                     <outlet property="label" destination="0MS-cS-km3" id="0c0-Wj-kyX"/>
@@ -626,7 +562,7 @@
                                 </connections>
                             </collectionViewCell>
                         </cells>
-                        <collectionReusableView key="sectionFooterView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="FTM-nL-6Oq">
+                        <collectionReusableView key="sectionFooterView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" reuseIdentifier="soundFooter" id="FTM-nL-6Oq">
                             <rect key="frame" x="0.0" y="115" width="160.33333333333331" height="200"/>
                             <autoresizingMask key="autoresizingMask"/>
                         </collectionReusableView>
@@ -638,11 +574,11 @@
                 </collectionViewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="O8L-gJ-eJY" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="4737" y="-487"/>
+            <point key="canvasLocation" x="4117" y="-327"/>
         </scene>
     </scenes>
     <inferredMetricsTieBreakers>
-        <segue reference="WQn-BQ-bGV"/>
+        <segue reference="j5h-lb-Psq"/>
     </inferredMetricsTieBreakers>
     <resources>
         <image name="arrow.forward" catalog="system" width="128" height="95"/>
@@ -659,12 +595,6 @@
         <systemColor name="systemBackgroundColor">
             <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
         </systemColor>
-        <systemColor name="systemCyanColor">
-            <color red="0.19607843137254902" green="0.67843137254901964" blue="0.90196078431372551" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-        </systemColor>
-        <systemColor name="systemGreenColor">
-            <color red="0.20392156862745098" green="0.7803921568627451" blue="0.34901960784313724" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-        </systemColor>
         <systemColor name="systemRedColor">
             <color red="1" green="0.23137254901960785" blue="0.18823529411764706" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
         </systemColor>
diff --git a/SoundboardQuiz/GradientView.swift b/SoundboardQuiz/GradientView.swift
new file mode 100644
index 0000000..7386353
--- /dev/null
+++ b/SoundboardQuiz/GradientView.swift
@@ -0,0 +1,51 @@
+// *** THIS FILE WAS NOT CREATED BY ME! ****
+
+//  GradientView.swift
+//
+//
+//  Created by Egor Sakhabaev on 23.07.17.
+//  Copyright © 2017 Egor Sakhabaev. All rights reserved.
+//
+
+import UIKit
+
+@IBDesignable
+class GradientView: UIView {
+    
+    @IBInspectable var firstColor: UIColor = UIColor.clear {
+        didSet {
+            updateView()
+        }
+    }
+    
+    @IBInspectable var secondColor: UIColor = UIColor.clear {
+        didSet {
+            updateView()
+        }
+    }
+
+    @IBInspectable var isHorizontal: Bool = true {
+        didSet {
+            updateView()
+        }
+    }
+    
+    override class var layerClass: AnyClass {
+        get {
+            return CAGradientLayer.self
+        }
+    }
+    
+    func updateView() {
+        let layer = self.layer as! CAGradientLayer
+        layer.colors = [firstColor, secondColor].map {$0.cgColor}
+        if (isHorizontal) {
+            layer.startPoint = CGPoint(x: 0, y: 0.5)
+            layer.endPoint = CGPoint (x: 1, y: 0.5)
+        } else {
+            layer.startPoint = CGPoint(x: 0.5, y: 0)
+            layer.endPoint = CGPoint (x: 0.5, y: 1)
+        }
+    }
+    
+}