From 26f4c64c050de594cf757af75bf302c8d90c6a8c Mon Sep 17 00:00:00 2001
From: STEVEN_CHAO_LI_CHEN <chaolic6505@gmail.com>
Date: Mon, 28 Oct 2019 15:11:33 -0700
Subject: [PATCH] fixed background color

---
 styles.css | 429 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 229 insertions(+), 200 deletions(-)

diff --git a/styles.css b/styles.css
index 815e49f..243b507 100644
--- a/styles.css
+++ b/styles.css
@@ -1,9 +1,10 @@
 *,
 *::after,
 *::before {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
+
 /* Colors:
    dark grey-#3c4245
    light grey-#5f6769
@@ -12,321 +13,349 @@
    yellow-#ffff00
    black-#000000
 */
+
+
 /******* Header *******/
+
 html {
-  background-color: white;
-  background: url(https://scontent.fagc2-1.fna.fbcdn.net/v/t1.0-9/10403132_243915702469379_2686811446205749708_n.jpg?_nc_cat=105&_nc_oc=AQkNSCLYO_yHk3xMsvqg3gs6FXCto7jSiLNV8ifq9vN1BUXjRcbZhYHdjynUmzjgqwU&_nc_ht=scontent.fagc2-1.fna&oh=ea8244e15e228a8fa37e1639fb4fa059&oe=5E31FC44) no-repeat center center fixed;
-  background-size: cover;
+    background-color: white;
+    background: url(https://scontent.fagc2-1.fna.fbcdn.net/v/t1.0-9/10403132_243915702469379_2686811446205749708_n.jpg?_nc_cat=105&_nc_oc=AQkNSCLYO_yHk3xMsvqg3gs6FXCto7jSiLNV8ifq9vN1BUXjRcbZhYHdjynUmzjgqwU&_nc_ht=scontent.fagc2-1.fna&oh=ea8244e15e228a8fa37e1639fb4fa059&oe=5E31FC44) no-repeat center center fixed;
+    background-size: cover;
 }
 
 body {
-  margin: 20px;
+    margin: 20px;
+    background-color: #719292;
 }
 
 header {
-  color: white;
-  background: #000000;
-  border: 1px solid blue;
-  font-family: 'Raleway', sans-serif;
+    color: white;
+    background: #000000;
+    border: 1px solid blue;
+    font-family: 'Raleway', sans-serif;
 }
 
 h1 {
-  color: blue;
-  display: flex;
-  justify-content: center;
-  font-size: 60px;
-  text-shadow: 2px 2px #719192;
+    color: blue;
+    display: flex;
+    justify-content: center;
+    font-size: 60px;
+    text-shadow: 2px 2px #719192;
 }
 
 nav {
-  display: flex;
-  justify-content: space-around;
-  font-size: 20px;
+    display: flex;
+    justify-content: space-around;
+    font-size: 20px;
 }
 
 nav a {
-  color: green;
-  padding-bottom: 10px;
-  text-decoration: none;
-  font-family: 'Open Sans', sans-serif;
+    color: green;
+    padding-bottom: 10px;
+    text-decoration: none;
+    font-family: 'Open Sans', sans-serif;
 }
 
 nav a:hover {
-  color: lightgreen;
-  font-family: 'cursive';
+    color: lightgreen;
+    font-family: 'cursive';
 }
 
+
 /******* Quote *******/
+
 .quote h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .quote p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: auto;
-  margin-bottom: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
-  max-width: 500px;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: auto;
+    margin-bottom: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
+    max-width: 500px;
 }
 
+
 /******* About Me *******/
+
 .about h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .about p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: auto;
-  margin-bottom: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
-  max-width: 1000px;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: auto;
+    margin-bottom: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
+    max-width: 1000px;
 }
 
 .about div {
-  display: flex;
-  text-align: center;
-  margin: auto;
-  margin-bottom: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
-  max-width: 921px;
+    display: flex;
+    text-align: center;
+    margin: auto;
+    margin-bottom: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
+    max-width: 921px;
 }
 
 .about img {
-  display: flex;
-  margin: auto;
-  border-radius: 4em;
-  border: 2px solid blue;
-  justify-content: center;
-  width: 200px;
+    display: flex;
+    margin: auto;
+    border-radius: 4em;
+    border: 2px solid blue;
+    justify-content: center;
+    width: 200px;
 }
 
+
 /******* Fun Facts *******/
+
 .random {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 20px;
-  margin: auto;
-  background: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
-  max-width: 921px;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+    margin: auto;
+    background: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
+    max-width: 921px;
 }
 
 .random h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .random li {
-  font-size: 20px;
-  height: 100%;
-  padding: 5px;
-  color: lightgreen;
-  font-family: 'Open Sans', sans-serif;
-  list-style: circle;
-  justify-content: center;
+    font-size: 20px;
+    height: 100%;
+    padding: 5px;
+    color: lightgreen;
+    font-family: 'Open Sans', sans-serif;
+    list-style: circle;
+    justify-content: center;
 }
 
+
 /******* Hobbies *******/
+
 .gaming h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .gaming p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
+
 /******* Hobbies: collections *******/
+
 .collections h2 {
-  Color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    Color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .collections p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
+
 /******* Hobbies: bowling *******/
+
 .bowling h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .bowling p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
 .bowling div {
-  display: flex;
-  margin: auto;
-  margin-bottom: 50px;
-  background-color: #000000;
-  padding: 15px;
-  border-radius: 4em;
-  border: 2px solid blue;
-  max-width: 921px;
+    display: flex;
+    margin: auto;
+    margin-bottom: 50px;
+    background-color: #000000;
+    padding: 15px;
+    border-radius: 4em;
+    border: 2px solid blue;
+    max-width: 921px;
 }
 
 .bowling img {
-  display: flex;
-  margin: auto;
-  border-radius: 4em;
-  border: 2px solid blue;
-  width: 200px;
+    display: flex;
+    margin: auto;
+    border-radius: 4em;
+    border: 2px solid blue;
+    width: 200px;
 }
 
 .lancaster img {
-  display: flex;
-  margin: auto;
-  margin-bottom: 50px;
-  width: 400px;
+    display: flex;
+    margin: auto;
+    margin-bottom: 50px;
+    width: 400px;
 }
 
+
 /******* Experience *******/
+
 .education h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .education p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
 .education img {
-  display: flex;
-  background-color: #000000;
-  border-radius: 4em;
-  border: 2px solid blue;
-  margin: auto;
-  width: 300px;
+    display: flex;
+    background-color: #000000;
+    border-radius: 4em;
+    border: 2px solid blue;
+    margin: auto;
+    width: 300px;
 }
 
+
 /******* Projects *******/
+
 .github h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .github p {
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: 50px;
-  background-color: #000000;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: 50px;
+    background-color: #000000;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
+
 /******* GitHub link *******/
+
 .myprojects div {
-  margin: 50px;
-  padding: 25px;
+    margin: 50px;
+    padding: 25px;
 }
 
 .myprojects img {
-  display: flex;
-  background-color: #000080;
-  margin: auto;
+    display: flex;
+    background-color: #000080;
+    margin: auto;
 }
 
+
 /******* Resume *******/
+
 .resume h2 {
-  color: #ffff00;
-  display: flex;
-  justify-content: center;
-  font-size: 30px;
+    color: #ffff00;
+    display: flex;
+    justify-content: center;
+    font-size: 30px;
 }
 
 .resume a {
-  color: lightgreen;
-  background-color: #000000;
-  display: flex;
-  font-size: 50px;
-  margin: auto;
-  margin-top: 200px;
-  margin-bottom: 300px;
-  justify-content: center;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    color: lightgreen;
+    background-color: #000000;
+    display: flex;
+    font-size: 50px;
+    margin: auto;
+    margin-top: 200px;
+    margin-bottom: 300px;
+    justify-content: center;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
+
 /******* Footer *******/
+
 footer {
-  position: sticky;
-  color: lightgreen;
-  font-family: 'Raleway', 'cursive', monospace;
-  text-align: center;
-  margin: 50px;
-  background-color: #719192;
-  padding: 25px;
-  border-radius: 4em;
-  border: 2px solid blue;
+    position: sticky;
+    color: lightgreen;
+    font-family: 'Raleway', 'cursive', monospace;
+    text-align: center;
+    margin: 50px;
+    background-color: #719192;
+    padding: 25px;
+    border-radius: 4em;
+    border: 2px solid blue;
 }
 
+
 /******* links *******/
+
 .contact img {
-  width: 50px;
-}
+    width: 50px;
+}
\ No newline at end of file