Adjust landing page content

src/App.css

@@ -2,41 +2,10 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 body > #root > div {
   height: 100vh;
+}
+
+html {
+  box-sizing: border-box;
 }

src/components/LandingPage/LandingPage.js

@@ -1,20 +1,22 @@
 import React from 'react';
 import '../../styles/landingPage.scss'
 
-const LandingPage = () => (
-  <div className='main'>
-    <div className='main-paragraph'>
-      <h1 style={{textAlign: 'left', width: '80%%', fontSize: '80px', margin: 0}}>Hello!&nbsp;</h1>
-      <span style={{width: '80%%', textAlign: 'left', marginTop: '5px', marginBottom: '5px'}}>
-        My name is Danylo; welcome to my homepage. Feel free to reach me at the following <a className='link' href="mailto:danylo@dotsenko.ca">email</a>.
-      </span>
-      <span>
-        Thanks for visiting!
-      </span>
-      {/* spinning thingy  */}
+const LandingPage = () => {
+  return (
+    <div className='main'>
+      <div className='main-paragraph'>
+        <h1 className='title'>nÿlo.dev</h1>
+        <h2 className='subtitle'>Hello.&nbsp;</h2>
+        <span style={{ width: '80%%', textAlign: 'left', marginTop: '5px', marginBottom: '5px' }}>
+          My name is Danylo; welcome to my homepage. Feel free to reach me at the following <a className='link' href="mailto:danylo@dotsenko.ca">email</a>.
+        </span>
+        <span>
+          Thank you for visiting.
+        </span>
+      </div>
     </div>
-  </div>
-);
+  )
+};
 
 //LandingPage.propTypes = {};
 

src/styles/landingPage.scss

@@ -1,18 +1,20 @@
 .main {
-    background-color: #d28800;
+    background-color: #250032;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-size: 40px 40px;
-    background-image: radial-gradient(circle, #b0b0b0 1px, rgba(0, 0, 0, 0) 1px);
+    background-image: radial-gradient(circle, #b0b0b0 0.5px, rgba(0, 0, 0, 0) 1px);
+    color: white;
+    padding:  0 10px;
 }
 
 .main-paragraph {
     font-size: 30px;
     color: white;
-    font-family: 'Helvetica', 'Futura';
+    font-family: 'Menlo', 'Helvetica', 'Futura';
     letter-spacing: -1px;
     text-align: left;
 
@@ -22,6 +24,23 @@
 }
 
 .link {
-    text-decoration: underline; 
+    text-decoration: underline;
     color: inherit;
+}
+
+.title {
+    font-size: 100px;
+    text-align: left;
+    width: 80%;
+    margin: 0 0 40px;
+
+    @media (max-width: 750px) {
+        font-size: 80px;
+    }
+}
+
+.subtitle {
+    text-align: left;
+    width: 80%;
+    margin: 0;
 }