Regenerate GlobalStyles

src/pages/_app.tsx

@@ -5,26 +5,47 @@ import Head from "next/head";
 import styled, { createGlobalStyle } from "styled-components";
 import { colors } from "@theme/colors";
 
-const fontFamily = "'Montserrat', sans-serif;"
+const fontFamily = "'Montserrat', sans-serif";
+const fontSize = 12; // 16px
+const lineHeight = 1.5;
 
 const GlobalCommonStyles = createGlobalStyle`
 * {
   box-sizing: border-box;
 }
 
-html,
-body {
+html {
   font-family: ${fontFamily};
-  font-size: 12pt;
-  background-color: ${colors.darkBlue};
-  height: 100%;
+  /* 12px */
+  font-size: ${fontSize * 0.75}pt;
+  line-height: ${lineHeight};
+
+  @media screen and (min-width: 1200px) {
+    /* 16px */
+    font-size: ${fontSize}pt;
+  }
+
+  @media screen and (min-width: 1920px) {
+    /* 20px */
+    font-size: ${fontSize * 1.25}pt;
+  }
+
+  @media screen and (min-width: 2560px) {
+    /* 32px */
+    font-size: ${fontSize * 2}pt;
+  }
+}
+
+body {
   padding: 0;
-  margin: auto !important;
+  background-color: ${colors.darkBlue};
 }
 
 p {
   font-size: 1.2rem;
   font-weight: 300;
+  word-break: break-word;
+  hyphens: auto;
 
   &.large {
     font-size: 2rem;
@@ -32,6 +53,7 @@ p {
 }
 
 h1 {
+  line-height: 1.15;
   font-size: 2.5rem;
   font-weight: 200;
   margin-block-start: 0;
@@ -56,7 +78,7 @@ h2 {
 }
 
 h3 {
-  font-size: 1.5rem;
+  font-size: 2rem;
   font-weight: 200;
   margin-block-start: 0;
   margin-block-end: 0;
@@ -103,9 +125,7 @@ h6 {
   }
 }
 
-/* TODO: List item style » */
 li {
-  font-size: 1.2rem;
   font-weight: 600;
 
   &.large {