From 973a584610580f47a618eb689bd8ef35ece31f62 Mon Sep 17 00:00:00 2001
From: xieyibo <1226594277@qq.com>
Date: Fri, 15 Dec 2023 11:47:10 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E9=87=8D?=
 =?UTF-8?q?=E5=AE=9A=E5=90=91=E9=A1=B5=E9=9D=A2=E9=94=99=E8=AF=AF=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=89=8B=E6=9C=BA=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 MBTI.html               |  10 +-
 index.html              | 154 ++++++++++++-----------
 personalities.html      |   1 -
 personalities/INTP.html |   2 +-
 personalities/ISFJ.html |   2 +-
 personalities/ISFP.html |   2 +-
 personalities/ISTJ.html |   2 +-
 personalities/ISTP.html |   2 +-
 static/css/app.css      |  12 +-
 static/css/article.css  |  40 +++---
 static/css/title.css    |  21 +++-
 static/css/welcome.css  | 267 ++++++++++++++++++++++------------------
 12 files changed, 289 insertions(+), 226 deletions(-)
diff --git a/MBTI.html b/MBTI.html
index d439605..8a5e363 100644
--- a/MBTI.html
+++ b/MBTI.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="A website for MBTI test">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="keywords" content="MBTI, mbti">
     <title>测试中</title>
     <link rel="shortcut icon" href="./static/img/favicon.ico">
@@ -18,8 +18,12 @@
     <script src="./static/js/MBTI.js"></script>
     <script src="./static/js/printProjectInfo.js"></script>
     <style>
+        body {
+            height: 100%;
+            overflow: hidden;
+        }
+
         .questionbox {
-            height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -28,7 +32,7 @@
 </head>
 
 <body>
-    <div class="navbar navbar-default navbar-fixed-top">
+    <div class="navbar navbar-default" style="margin-bottom: 10em;">
         <div class="container">
             <div class="navbar-header">
                 <a href="./index.html" class="navbar-brand">MBTI</a>
diff --git a/index.html b/index.html
index 6888a35..ea61ee5 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="A website for MBTI test">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="keywords" content="MBTI, mbti">
     <title>首页</title>
     <link rel="shortcut icon" href="./static/img/favicon.ico">
@@ -20,83 +20,87 @@
 </head>
 
 <body>
-    <div class="navbar navbar-default navbar-fixed-top">
-        <div class="container">
-            <div class="navbar-header">
-                <a href="#" class="navbar-brand">MBTI</a>
-                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-            </div>
-            <div class="navbar-collapse collapse" id="navbar-main">
-                <ul class="nav navbar-nav">
-                    <li>
-                        <a href="./personalities.html">十六种人格简介</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <div class="container">
-
-        <div class="content">
-            <svg viewBox="0 0 1000 300">
-                <symbol id="s-text">
-                    <text text-anchor="middle" x="50%" y="50%" dy=".2em">
-                        MBTI-TEST
-                    </text>
-                </symbol>
-                <use xlink:href="#s-text" class="text"></use>
-                <use xlink:href="#s-text" class="text"></use>
-                <use xlink:href="#s-text" class="text"></use>
-                <use xlink:href="#s-text" class="text"></use>
-                <use xlink:href="#s-text" class="text"></use>
-                <use xlink:href="#s-text" class="text"></use>
-                <clippath id="cp-text">
-                    <text text-anchor="middle" x="50%" y="50%" dy=".2em" class="text--line">
-                        MBTI-TEST
-                    </text>
-                </clippath>
-                <g clip-path="url(#cp-text)" class="shadow">
-                    <rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
-                </g>
-                <g clip-path="url(#cp-text)" class="colortext">
-                    <rect width="100%" height="100%" class="anim-shape"></rect>
-                    <rect width="80%" height="100%" class="anim-shape"></rect>
-                    <rect width="60%" height="100%" class="anim-shape"></rect>
-                    <rect width="40%" height="100%" class="anim-shape"></rect>
-                    <rect width="20%" height="100%" class="anim-shape"></rect>
-                </g>
-                <use xlink:href="#s-text" class="text--transparent"></use>
-            </svg>
-        </div>
-
-
-        <div class="bs-docs-section">
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="bs-component">
-                        <h2>MBTI测试前须知</h2>
-                        <p>1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</p>
-                        <p>2、性格分析展示的是你的性格倾向，而不是你的知识、技能、经验。</p>
-                        <p>
-                            3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。
-                        </p>
-                        <p>4、共93题；所有题目没有对错之分，请根据自己的实际情况选择。</p>
-                        <p>测试结果仅供参考！</p>
-                    </div>
+    <div>
+        <div class="navbar navbar-default navbar-fixed-top">
+            <div class="container">
+                <div class="navbar-header">
+                    <a href="#" class="navbar-brand">MBTI</a>
+                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                </div>
+                <div class="navbar-collapse collapse" id="navbar-main">
+                    <ul class="nav navbar-nav">
+                        <li>
+                            <a href="./personalities.html">十六种人格简介</a>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
-        <a href="./MBTI.html" class="a-btn">
-            <span></span>
-            <span>Start</span>
-            <span>Go!</span>
-        </a>
-    </div>
+
+        <div class="container">
+
+            <div class="page-header">
+                <div class="content">
+                    <svg viewBox="0 0 1000 300" style="width: 100%;">
+                        <symbol id="s-text">
+                            <text text-anchor="middle" x="50%" y="60%" dy=".2em">
+                                MBTI-TEST
+                            </text>
+                        </symbol>
+                        <use xlink:href="#s-text" class="text"></use>
+                        <use xlink:href="#s-text" class="text"></use>
+                        <use xlink:href="#s-text" class="text"></use>
+                        <use xlink:href="#s-text" class="text"></use>
+                        <use xlink:href="#s-text" class="text"></use>
+                        <use xlink:href="#s-text" class="text"></use>
+                        <clippath id="cp-text">
+                            <text text-anchor="middle" x="50%" y="60%" dy=".2em" class="text--line">
+                                MBTI-TEST
+                            </text>
+                        </clippath>
+                        <g clip-path="url(#cp-text)" class="shadow">
+                            <rect width="100%" height="100%" class="anim-shape anim-shape--shadow"></rect>
+                        </g>
+                        <g clip-path="url(#cp-text)" class="colortext">
+                            <rect width="100%" height="100%" class="anim-shape"></rect>
+                            <rect width="80%" height="100%" class="anim-shape"></rect>
+                            <rect width="60%" height="100%" class="anim-shape"></rect>
+                            <rect width="40%" height="100%" class="anim-shape"></rect>
+                            <rect width="20%" height="100%" class="anim-shape"></rect>
+                        </g>
+                        <use xlink:href="#s-text" class="text--transparent"></use>
+                    </svg>
+                </div>
+            </div>
+
+
+            <div class="bs-docs-section">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <div class="bs-component">
+                            <h2>MBTI测试前须知</h2>
+                            <p>1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</p>
+                            <p>2、性格分析展示的是你的性格倾向，而不是你的知识、技能、经验。</p>
+                            <p>
+                                3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。
+                            </p>
+                            <p>4、共93题；所有题目没有对错之分，请根据自己的实际情况选择。</p>
+                            <p>测试结果仅供参考！</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <a href="./MBTI.html" class="a-btn">
+                <span></span>
+                <span>Start</span>
+                <span>Go!</span>
+            </a>
+        </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/personalities.html b/personalities.html
index e8bf647..116d13f 100644
--- a/personalities.html
+++ b/personalities.html
@@ -3,7 +3,6 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="A website for MBTI test">
     <meta name="viewport" content="width=device-width">
diff --git a/personalities/INTP.html b/personalities/INTP.html
index 0ddf3ea..a894225 100644
--- a/personalities/INTP.html
+++ b/personalities/INTP.html
@@ -32,7 +32,7 @@
             <div class="navbar-collapse collapse" id="navbar-main">
                 <ul class="nav navbar-nav">
                     <li>
-                        <a href=".../personalities.html">十六种人格简介</a>
+                        <a href="../personalities.html">十六种人格简介</a>
                     </li>
                 </ul>
             </div>
diff --git a/personalities/ISFJ.html b/personalities/ISFJ.html
index 5c7e52e..6c16cac 100644
--- a/personalities/ISFJ.html
+++ b/personalities/ISFJ.html
@@ -32,7 +32,7 @@
             <div class="navbar-collapse collapse" id="navbar-main">
                 <ul class="nav navbar-nav">
                     <li>
-                        <a href=".../personalities.html">十六种人格简介</a>
+                        <a href="../personalities.html">十六种人格简介</a>
                     </li>
                 </ul>
             </div>
diff --git a/personalities/ISFP.html b/personalities/ISFP.html
index 525932e..35c3cf5 100644
--- a/personalities/ISFP.html
+++ b/personalities/ISFP.html
@@ -32,7 +32,7 @@
             <div class="navbar-collapse collapse" id="navbar-main">
                 <ul class="nav navbar-nav">
                     <li>
-                        <a href=".../personalities.html">十六种人格简介</a>
+                        <a href="../personalities.html">十六种人格简介</a>
                     </li>
                 </ul>
             </div>
diff --git a/personalities/ISTJ.html b/personalities/ISTJ.html
index 1e29046..53a0069 100644
--- a/personalities/ISTJ.html
+++ b/personalities/ISTJ.html
@@ -32,7 +32,7 @@
             <div class="navbar-collapse collapse" id="navbar-main">
                 <ul class="nav navbar-nav">
                     <li>
-                        <a href=".../personalities.html">十六种人格简介</a>
+                        <a href="../personalities.html">十六种人格简介</a>
                     </li>
                 </ul>
             </div>
diff --git a/personalities/ISTP.html b/personalities/ISTP.html
index 1cbf955..dcfdc86 100644
--- a/personalities/ISTP.html
+++ b/personalities/ISTP.html
@@ -32,7 +32,7 @@
             <div class="navbar-collapse collapse" id="navbar-main">
                 <ul class="nav navbar-nav">
                     <li>
-                        <a href=".../personalities.html">十六种人格简介</a>
+                        <a href="../personalities.html">十六种人格简介</a>
                     </li>
                 </ul>
             </div>
diff --git a/static/css/app.css b/static/css/app.css
index 1f632f7..e9b49eb 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -4,10 +4,12 @@ body {
 	-moz-background-size: cover;
 	background-size: cover;
 }
-footer{
-    margin-top: 90px;
+
+footer {
+	margin-top: 90px;
 }
-.flashes{
-    margin-top: 90px;
-    text-align: center;
+
+.flashes {
+	margin-top: 90px;
+	text-align: center;
 }
\ No newline at end of file
diff --git a/static/css/article.css b/static/css/article.css
index 63c0daf..af57b1b 100644
--- a/static/css/article.css
+++ b/static/css/article.css
@@ -1,7 +1,14 @@
-html, body, .article, .header {
+html,
+body,
+.article,
+.header {
 	height: 100%;
 }
 
+p {
+	font-size: 14px
+}
+
 /* Header */
 .header {
 	position: relative;
@@ -134,37 +141,37 @@ button.trigger span::before {
 	transition-property: color, opacity, transform;
 }
 
-.intro-effect-jam3:not(.notrans) .content > div {
+.intro-effect-jam3:not(.notrans) .content>div {
 	-webkit-transition-property: opacity, -webkit-transform;
 	transition-property: opacity, transform;
 }
 
 .intro-effect-jam3:not(.notrans) .header h1,
-.intro-effect-jam3:not(.notrans) .content > div {
+.intro-effect-jam3:not(.notrans) .content>div {
 	-webkit-transition-duration: 0.5s;
 	transition-duration: 0.5s;
-	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
+	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
 
 .intro-effect-jam3:not(.notrans) .header p,
 .intro-effect-jam3:not(.notrans) .header p.subline,
-.intro-effect-jam3:not(.notrans) .content > div {
+.intro-effect-jam3:not(.notrans) .content>div {
 	-webkit-transition-duration: 0.2s;
 	transition-duration: 0.2s;
 }
 
 .intro-effect-jam3.modify:not(.notrans) .header p,
 .intro-effect-jam3.modify:not(.notrans) .header p.subline,
-.intro-effect-jam3.modify:not(.notrans) .content > div {
+.intro-effect-jam3.modify:not(.notrans) .content>div {
 	-webkit-transition-duration: 0.5s;
 	transition-duration: 0.5s;
 }
 
 .intro-effect-jam3.article {
 	padding-top: 120px;
-    font-size: 16px;
-    color: #000;
+	font-size: 16px;
+	color: #000;
 }
 
 
@@ -190,13 +197,13 @@ button.trigger span::before {
 }
 
 
-.intro-effect-jam3 .content > div {
+.intro-effect-jam3 .content>div {
 	opacity: 0;
 	-webkit-transform: translateY(150px);
 	transform: translateY(150px);
 }
 
-.intro-effect-jam3.modify .content > div {
+.intro-effect-jam3.modify .content>div {
 	opacity: 1;
 	-webkit-transform: translateY(0);
 	transform: translateY(0);
@@ -214,14 +221,16 @@ button.trigger span::before {
 	transition-delay: 0.15s;
 }
 
-.intro-effect-jam3.modify:not(.notrans) .content > div {
+.intro-effect-jam3.modify:not(.notrans) .content>div {
 	-webkit-transition-delay: 0.2s;
 	transition-delay: 0.2s;
 }
 
 /* Media Queries */
 @media screen and (max-width: 47em) {
-	.title, .content {
+
+	.title,
+	.content {
 		font-size: 70%;
 	}
 }
@@ -231,11 +240,12 @@ button.trigger span::before {
 		padding: 0 2em 5em;
 	}
 
-	.title, .content {
+	.title,
+	.content {
 		font-size: 50%;
 	}
 
 	button.trigger::before {
 		display: none;
 	}
-}
+}
\ No newline at end of file
diff --git a/static/css/title.css b/static/css/title.css
index 88c0c3d..6efe643 100644
--- a/static/css/title.css
+++ b/static/css/title.css
@@ -1,4 +1,15 @@
 /* test style */
+@media screen and (max-width: 27em) {
+  p {
+    font-size: 11px;
+  }
+}
+
+
+body {
+  height: 100%;
+}
+
 .text {
   fill: none;
   stroke-width: 6;
@@ -111,13 +122,15 @@
 
 
 div.content {
-  font: 800 10.5em/1 'Open Sans', Impact;
-  height: 240px;
+  font: 800 14em/1 'Open Sans', Impact;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  padding-top: 5%;
-  margin-bottom: 10%;
+
+}
+
+.page-header {
+  padding-top: 50px;
 }
 
 svg {
diff --git a/static/css/welcome.css b/static/css/welcome.css
index 914852a..daba789 100644
--- a/static/css/welcome.css
+++ b/static/css/welcome.css
@@ -5,126 +5,125 @@ body {
     background-size: cover;
 }
 
-a{
+a {
     text-decoration: none;
 }
 
 /*ub open*/
 .cs-text {
-	width: 645px;
-	margin: 120px auto 30px;
-	cursor: pointer;
+    width: 645px;
+    margin: 120px auto 30px;
+    cursor: pointer;
 }
 
-.cs-text > span {
-	display: block;
-	-webkit-backface-visibility: hidden;
+.cs-text>span {
+    display: block;
+    -webkit-backface-visibility: hidden;
 }
 
 .cs-text-cut {
-	width: 100%;
-	height: 90px;
-	overflow: hidden;
-	-webkit-transition: all 0.4s ease-in-out;
-	-moz-transition: all 0.4s ease-in-out;
-	-o-transition: all 0.4s ease-in-out;
-	-ms-transition: all 0.4s ease-in-out;
-	transition: all 0.4s ease-in-out;
+    width: 100%;
+    height: 90px;
+    overflow: hidden;
+    -webkit-transition: all 0.4s ease-in-out;
+    -moz-transition: all 0.4s ease-in-out;
+    -o-transition: all 0.4s ease-in-out;
+    -ms-transition: all 0.4s ease-in-out;
+    transition: all 0.4s ease-in-out;
 }
 
 .cs-text-cut:first-child {
-	border-top: 1px solid rgba(255,255,255,0.5);
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .cs-text-cut:last-child {
-	border-bottom: 1px solid rgba(255,255,255,0.5);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .cs-text-cut span {
-	display: block;
-	line-height: 180px;
-	color: rgba(255,255,255,1);
-	font-size: 100px;
-	font-weight: 400;
-	text-transform: uppercase;
-	text-align: center;
-	margin-top: 6px;
-	font-family: 'Sancreek', cursive;
-	text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
+    display: block;
+    line-height: 180px;
+    color: rgba(255, 255, 255, 1);
+    font-size: 100px;
+    font-weight: 400;
+    text-transform: uppercase;
+    text-align: center;
+    margin-top: 6px;
+    font-family: 'Sancreek', cursive;
+    text-shadow: 7px 2px 0 rgba(255, 255, 255, 0.3);
 }
 
 .cs-text-cut:last-child span {
-	margin-top: -84px;
+    margin-top: -84px;
 }
 
 .cs-text-mid {
-	font-weight: 100;
-	text-transform: uppercase;
-	font-size: 50px;
-	letter-spacing: 10px;
-	line-height: 50px;
-	text-indent: 160px;
-	position: absolute;
-	top: 50%;
-	margin-top: -25px;
-	color: rgba(255,255,255,0.3);
-	text-shadow: 0 0 0 rgba(255,255,255,0.9);
-	opacity: 0;
-	-webkit-transform: scale(0.5);
-	-moz-transform: scale(0.5);
-	-o-transform: scale(0.5);
-	-ms-transform: scale(0.5);
-	transform: scale(0.5);
-	-webkit-transition: all 0.4s ease-in-out 0s;
-	-moz-transition: all 0.4s ease-in-out 0s;
-	-o-transition: all 0.4s ease-in-out 0s;
-	-ms-transition: all 0.4s ease-in-out 0s;
-	transition: all 0.4s ease-in-out 0s;
+    font-weight: 100;
+    text-transform: uppercase;
+    font-size: 50px;
+    letter-spacing: 10px;
+    line-height: 50px;
+    text-indent: 160px;
+    position: absolute;
+    top: 50%;
+    margin-top: -25px;
+    color: rgba(255, 255, 255, 0.3);
+    text-shadow: 0 0 0 rgba(255, 255, 255, 0.9);
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+    -moz-transform: scale(0.5);
+    -o-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    transform: scale(0.5);
+    -webkit-transition: all 0.4s ease-in-out 0s;
+    -moz-transition: all 0.4s ease-in-out 0s;
+    -o-transition: all 0.4s ease-in-out 0s;
+    -ms-transition: all 0.4s ease-in-out 0s;
+    transition: all 0.4s ease-in-out 0s;
 }
 
 .cs-text:hover .cs-text-cut:first-child {
-	-webkit-transform: translateY(-25px);
-	-moz-transform: translateY(-25px);
-	-o-transform: translateY(-25px);
-	-ms-transform: translateY(-25px);
-	transform: translateY(-25px);
-	opacity: 0.5;
+    -webkit-transform: translateY(-25px);
+    -moz-transform: translateY(-25px);
+    -o-transform: translateY(-25px);
+    -ms-transform: translateY(-25px);
+    transform: translateY(-25px);
+    opacity: 0.5;
 }
 
 .cs-text:hover .cs-text-cut:last-child {
-	-webkit-transform: translateY(25px);
-	-moz-transform: translateY(25px);
-	-o-transform: translateY(25px);
-	-ms-transform: translateY(25px);
-	transform: translateY(25px);
-	opacity: 0.5;
+    -webkit-transform: translateY(25px);
+    -moz-transform: translateY(25px);
+    -o-transform: translateY(25px);
+    -ms-transform: translateY(25px);
+    transform: translateY(25px);
+    opacity: 0.5;
 }
 
 .cs-text:hover .cs-text-mid {
-	-webkit-transition-delay: 0.3s;
-	-moz-transition-delay: 0.3s;
-	-o-transition-delay: 0.3s;
-	-ms-transition-delay: 0.3s;
-	transition-delay: 0.3s;
-	opacity: 1;
-	-webkit-transform: scale(1);
-	-moz-transform: scale(1);
-	-o-transform: scale(1);
-	-ms-transform: scale(1);
-	transform: scale(1);
+    -webkit-transition-delay: 0.3s;
+    -moz-transition-delay: 0.3s;
+    -o-transition-delay: 0.3s;
+    -ms-transition-delay: 0.3s;
+    transition-delay: 0.3s;
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -o-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
 }
 
 
-.container{
-    hidden:100vh;
-	width: 100%;
-	position: relative;
+.container {
+    width: 100%;
+    position: relative;
 }
 
-.main{
-	width: 90%;
-	margin: 0 auto;
-	position: relative;
+.main {
+    width: 90%;
+    margin: 0 auto;
+    position: relative;
 }
 
 
@@ -186,21 +185,53 @@ a{
 
 /* Colors */
 
-.ot-letter-left span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
-.ot-letter-left span:after { color: #fff; }
-.ot-letter-left:hover span:after { color: #e8e8e8; }
+.ot-letter-left span {
+    text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
+}
 
-.ot-letter-right span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
-.ot-letter-right span:after { color: #fff; }
-.ot-letter-right:hover span:after { color: #e8e8e8; }
+.ot-letter-left span:after {
+    color: #fff;
+}
 
-.ot-letter-top span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
-.ot-letter-top span:after { color: #fff; }
-.ot-letter-top:hover span:after { color: #e8e8e8; }
+.ot-letter-left:hover span:after {
+    color: #e8e8e8;
+}
 
-.ot-letter-bottom span { text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff; }
-.ot-letter-bottom span:after { color: #fff; }
-.ot-letter-bottom:hover span:after { color: #e8e8e8; }
+.ot-letter-right span {
+    text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
+}
+
+.ot-letter-right span:after {
+    color: #fff;
+}
+
+.ot-letter-right:hover span:after {
+    color: #e8e8e8;
+}
+
+.ot-letter-top span {
+    text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
+}
+
+.ot-letter-top span:after {
+    color: #fff;
+}
+
+.ot-letter-top:hover span:after {
+    color: #e8e8e8;
+}
+
+.ot-letter-bottom span {
+    text-shadow: 1px 4px 6px #fff, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #fff;
+}
+
+.ot-letter-bottom span:after {
+    color: #fff;
+}
+
+.ot-letter-bottom:hover span:after {
+    color: #e8e8e8;
+}
 
 .ot-letter-left span:before,
 .ot-letter-left span:after {
@@ -210,9 +241,9 @@ a{
 }
 
 .ot-letter-left span:before {
-    -webkit-transform: scale(1.08,1) skew(0deg,1deg);
-    -ms-transform: scale(1.08,1) skew(0deg,1deg);
-    transform: scale(1.08,1) skew(0deg,1deg);
+    -webkit-transform: scale(1.08, 1) skew(0deg, 1deg);
+    -ms-transform: scale(1.08, 1) skew(0deg, 1deg);
+    transform: scale(1.08, 1) skew(0deg, 1deg);
 }
 
 .ot-letter-left span:after {
@@ -223,9 +254,9 @@ a{
 }
 
 .ot-letter-left:hover span:before {
-    -webkit-transform: scale(0.85,1) skew(0deg,20deg);
-    -ms-transform: scale(0.85,1) skew(0deg,20deg);
-    transform: scale(0.85,1) skew(0deg,20deg);
+    -webkit-transform: scale(0.85, 1) skew(0deg, 20deg);
+    -ms-transform: scale(0.85, 1) skew(0deg, 20deg);
+    transform: scale(0.85, 1) skew(0deg, 20deg);
 }
 
 .ot-letter-left:hover span:after {
@@ -242,9 +273,9 @@ a{
 }
 
 .ot-letter-right span:before {
-    -webkit-transform: scale(0.85,1) skew(0deg,1deg);
-    -ms-transform: scale(0.85,1) skew(0deg,1deg);
-    transform: scale(0.85,1) skew(0deg,1deg);
+    -webkit-transform: scale(0.85, 1) skew(0deg, 1deg);
+    -ms-transform: scale(0.85, 1) skew(0deg, 1deg);
+    transform: scale(0.85, 1) skew(0deg, 1deg);
 }
 
 .ot-letter-right span:after {
@@ -255,9 +286,9 @@ a{
 }
 
 .ot-letter-right:hover span:before {
-    -webkit-transform: scale(0.85,1) skew(0deg,-20deg);
-    -ms-transform: scale(0.85,1) skew(0deg,-20deg);
-    transform: scale(0.85,1) skew(0deg,-20deg);
+    -webkit-transform: scale(0.85, 1) skew(0deg, -20deg);
+    -ms-transform: scale(0.85, 1) skew(0deg, -20deg);
+    transform: scale(0.85, 1) skew(0deg, -20deg);
 }
 
 .ot-letter-right:hover span:after {
@@ -274,9 +305,9 @@ a{
 }
 
 .ot-letter-top span:before {
-    -webkit-transform: scale(1,0.95) skew(-4deg,0deg);
-    -ms-transform: scale(1,0.95) skew(-4deg,0deg);
-    transform: scale(1,0.95) skew(-4deg,0deg);
+    -webkit-transform: scale(1, 0.95) skew(-4deg, 0deg);
+    -ms-transform: scale(1, 0.95) skew(-4deg, 0deg);
+    transform: scale(1, 0.95) skew(-4deg, 0deg);
 }
 
 .ot-letter-top span:after {
@@ -287,9 +318,9 @@ a{
 }
 
 .ot-letter-top:hover span:before {
-    -webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
-    -ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
-    transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
+    -webkit-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
+    -ms-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
+    transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
 }
 
 .ot-letter-top:hover span:after {
@@ -306,9 +337,9 @@ a{
 }
 
 .ot-letter-bottom span:before {
-    -webkit-transform: scale(1,1.05) skew(4deg,0deg);
-    -ms-transform: scale(1,1.05) skew(4deg,0deg);
-    transform: scale(1,1.05) skew(4deg,0deg);
+    -webkit-transform: scale(1, 1.05) skew(4deg, 0deg);
+    -ms-transform: scale(1, 1.05) skew(4deg, 0deg);
+    transform: scale(1, 1.05) skew(4deg, 0deg);
 }
 
 .ot-letter-bottom span:after {
@@ -319,9 +350,9 @@ a{
 }
 
 .ot-letter-bottom:hover span:before {
-    -webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
-    -ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
-    transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
+    -webkit-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
+    -ms-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
+    transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
 }
 
 .ot-letter-bottom:hover span:after {
@@ -370,4 +401,4 @@ a{
     .grid li {
         width: 100%;
     }
-}
+}
\ No newline at end of file
