Merge branch 'feature/kitagataCreaturePage'

css/kitagata_creature_encyclopedia.css

@@ -3,22 +3,116 @@
 }
 
 .overview {
-    margin-bottom: 20px;
+    margin-bottom: 28px;
     width: 100%;
 }
 
-.seasonalCreatures_title {
-    margin-bottom: 16px;
+.overview p {
+    font-size: 1.1rem;
+}
+
+.springCreaturesTitleBar {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color:	#AEAEAE;
+    position: absolute;
+    top: 154px;
+}
+
+.springCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: 	#AEAEAE;
+    position: absolute;
+    top: -8px;
+    right: -4px;
+}
+
+.summerCreaturesTitleBar {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color: #00AE9D;
+    position: absolute;
+    top: 1400px;
+}
+
+.summerCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #00AE9D;
+    position: absolute;
+    top: -8px;
+    right: -4px;
+}
+
+.autumnCreaturesTitleBar {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color: #AE0011;
+    position: absolute;
+    top: 2650px;
+}
+
+.autumnCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #AE0011;
+    position: absolute;
+    top: -8px;
+    right: -4px;
 }
 
-.seasonalCreatures_title::before {
+.winterCreaturesTitleBar {
     content: '';
     width: 94%;
     height: 4px;
     display: inline-block;
-    background-color: gray;
+    background-color: #0068AE;
     position: absolute;
-    top: 148px;
+    top: 3930px;
+}
+
+.winterCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #0068AE;
+    position: absolute;
+    top: -8px;
+    right: -4px;
+}
+
+.springCreatures_block {
+    margin-bottom: 20px;
+}
+
+.summerCreatures_block {
+    margin-bottom: 20px;
+}
+
+.autumnCreatures_block {
+    margin-bottom: 20px;
+}
+
+.seasonalCreatures_title {
+    margin-bottom: 20px;
 }
 
 .seasonalCreatures_titleText {
@@ -41,9 +135,13 @@
 }
 
 .creatureImage_block {
-    width: 50%;
+    width: 30%;
 }
 
 .creatureImage {
     width: 100%;
 }
+
+.creatureName {
+    width: 50%;
+}