better responsiveness + more content

style.css

@@ -33,7 +33,6 @@ body {
   font-style: normal;
   color: whitesmoke;
   background-color: black;
-  text-align: center;
 }
 
 h1,
@@ -44,7 +43,7 @@ h3 {
 }
 
 h1 {
-  font-size: 8rem;
+  font-size: min(23vw, 8rem);
 }
 
 a:link,
@@ -53,31 +52,28 @@ a:visited {
 }
 
 main {
-  height: 100%;
   padding: 0;
   margin: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr auto;
+  width: 100%;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
 
-header {
-  grid-row: 1;
-  grid-column: 2;
+main > * {
+  width: min(80vw, 50rem);
 }
 
 section.first {
   margin-top: 2em;
-  grid-column: 2;
-  grid-row: 2;
 }
 
-section.second {
-  grid-column: 2;
-  grid-row: 3;
+.socials {
+  width: min(20rem, 100%);
 }
-
-.socials > ul {
+.socials>ul {
   columns: 2;
 }