update monster png and styles

src/ui/Start/index.scss

@@ -39,24 +39,17 @@ body * {
   z-index: 20;
 }
 
-header.main {
+.neos-header {
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 20;
+  padding: 22em 0 4em;
 }
 
-header.main.top {
-    padding: 22em 0 4em;
-    position: relative;
-}
-
-header.main.top.mon1::after {
+.neos-header::after {
   background-image: url(/neos-assets/monster.png);
   background-position: center -50px;
-}
-
-header.main.top::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -64,19 +57,18 @@ header.main.top::after {
   left: 0;
   top: 0;
   background-repeat: no-repeat;
-  // opacity: 0;
   z-index: 1;
-  animation: mainvisual .1s ease-in-out .5s 1 normal forwards;
 }
 
-header.main.top h1 {
+.neos-header h1 {
   margin-bottom: 1em;
   padding: 0 1.5em;
   position: relative;
   z-index: 2;
 }
 
-header.main.top .header-main p {
+.neos-header p {
+  color: white;
   font-size: 2.5em;
   font-weight: bold;
   text-shadow: 0 0 0.5em #2137bd, 0 0 0.5em #2137bd;

src/ui/Start/index.tsx

@@ -18,8 +18,8 @@ const Start: React.FC = () => (
       </a>
     </div>
     <div className="wrapper">
-      <header role="banner" className="main top mon1">
-        <div className="header-main">
+      <div role="banner" className="neos-header">
+        <div>
           <h1>
             <img
               src={`${NeosConfig.assetsPath}/neos_logo.png`}
@@ -30,7 +30,7 @@ const Start: React.FC = () => (
           </h1>
           <p>PLAY NOW!</p>
         </div>
-      </header>
+      </div>
     </div>
   </>
 );