cleaning up

src/components/Hero.jsx

@@ -228,18 +228,20 @@ export function Hero(props) {
     return (
         <div id='hero'>
             <NotificationContainer />
-            <h1>the web3 revolution & its consequences have been a disaster for the human race.</h1>
-            <p>
+            <h1 id='heroTitle'>the web3 revolution & its consequences have been a disaster for the human race.</h1>
+            <p id='heroText'>
                 Technology is advancing at an exponential rate and boomers are being left behind. A.I., Bitcoin, 
                 and expensive JPEGs have made them angry. <br /><br />
-                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? '35,000': options.unaboomerMaxSupply} Boomers have joined forces 
+                They've begun to radicalize. {options.unaboomerMaxSupply > 0 ? options.unaboomerMaxSupply: '35,000'} Boomers have joined forces 
                 to lash out at the system.<br /><br />
             </p>
             <div id='heroFlex'>
                 <div className='heroFlexItem'>
                     <img src={Unaboomer} width='280px' alt='Pixelated Unaboomer profile picture - a hooded man with dark sunglasses.' />
                     <p>
-                        
+                        Unaboomers are terrorizing the metaverse. 
+                        This gang of deplorables is on a warpath to stress 
+                        the system and spark a revolution against technology.<br /><br />
                     </p>
                     {options.unaboomersMinted > 0 && (
                         <p>
@@ -349,6 +351,8 @@ export function Hero(props) {
                     </>
                 )}
             </div>
+            {isConnected && address && (
+                <>
                     <StatsPanel 
                         leaderKillCount={options.leaderKillCount}
                         leaderAddress={options.leaderAddress}
@@ -361,6 +365,8 @@ export function Hero(props) {
                         ws={props.ws}
                         address={address} 
                     />
+                </>
+            )}
         </div>
     )
 }

src/styles/hero.css

@@ -8,6 +8,11 @@
     margin: 1em auto;
 }
 
+#heroText {
+    width: 80%;
+    margin: 2em auto;
+}
+
 #heroFlex {
     display: flex;
     flex-wrap: wrap;
@@ -34,6 +39,7 @@ button.doThing {
     margin: 1em;
     cursor: pointer;
     transition: .1s ease all;
+    min-width: 180px;
 }
 
 button.doThing:hover {