layout

_sass/main.scss

@@ -34,12 +34,14 @@ a {
 #hero {
   display: flex;
   flex-wrap: wrap;
+  flex-direction: row;
   background-color: transparent;
   position: relative;
   height: 100vh;
   width: 100%;
   background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9));
   background-size: 1000% 1000%;
+  
   -webkit-animation: AnimationName 30s ease infinite;
   -moz-animation: AnimationName 30s ease infinite;
   animation: AnimationName 30s ease infinite;
@@ -62,31 +64,30 @@ a {
 
   div {
     background-image: url('/assets/img/texture.png');
-    padding: 10px;
+    background-repeat: repeat;
+    background-attachment: fixed;
+    flex: wrap;
+    background-color: rgba(68, 0, 124, 0.568);
     border-radius: 40px;
-    flex: 1 1 300px;
+    margin: auto;
+    letter-spacing: -.05em;
+    line-height: .95em;
+    padding: 20px;
+    box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
+    border: #000 solid 1px;
+    flex: 0 0 300px;;
+    }
 
-
-  }
-  .pivot {
-    line-height: .5em;
-    transform: rotate(-90deg); 
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
- 
-    height: 300px;
-  }
   h1 {
-    line-height: .5em;
-    font-size: 4em;
- 
+
+    font-size: 3em;
+    line-height: .3em;
 
   }  
   h2 {
-    line-height: .5em;
-    font-size: 2em;
 
+    font-size: 1em;
+    line-height: .8em;
   }  
 
 }