diff --git a/style.css b/style.css
index aae0417..dcd7549 100644
--- a/style.css
+++ b/style.css
@@ -1,215 +1,234 @@
 /* Root variables for color values */
 :root {
-    --light-red: hsl(0, 100%, 67%);
-    --orangey-yellow: hsl(39, 100%, 56%);
-    --green-teal: hsl(166, 100%, 37%);
-    --cobalt-blue: hsl(234, 85%, 45%);
-  
-    --light-slate-blue: hsl(252, 100%, 67%);
-    --light-royal-blue: hsl(241, 81%, 54%);
-  
-    --violet-blue: hsla(256, 72%, 46%, 1);
-    --persian-blue: hsla(241, 72%, 46%, 0);
-  
-    --white: hsl(0, 0%, 100%);
-    --pale-blue: hsl(221, 100%, 96%);
-    --light-lavender: hsl(241, 100%, 89%);
-    --dark-gray-blue: hsl(224, 30%, 27%);
-  }
-  
-  /* Importing a Google Font */
-  @import url('https://fonts.google.com/specimen/Hanken+Grotesk');
-  
-  /* Resetting default styles */
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-  
-  /* Body styling */
-  body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    width: 100vw;
-    background-color: var(--white);
-    font-family: 'Hanken Grotesk', sans-serif;
-  }
-  
-  /* Main container styling */
-  main {
-    display: flex;
-    flex-direction: row;
-    width: 600px;
-    max-width: 100%;
-    min-width: 450px;
-    height: 480px;
-    border-radius: 1.5rem;
-    background-color: var(--white);
-    box-shadow: 5px 5px 20px 0px var(--light-lavender);
-    margin: 0;
-  }
-  
-  /* Styling for Section 1 - Your Result */
-  .part1 {
-    width: 50%;
-    box-sizing: border-box;
-    background-color: var(--cobalt-blue);
-    background-image: linear-gradient(to bottom, var(--light-slate-blue), var(--light-royal-blue));
-    border-radius: 1.5rem;
-    padding: 2rem;
-    color: var(--light-lavender);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    margin: 0;
-  }
-  
-  /* Styling for h1 within Section 1 */
-  .part1 > h1 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-  }
-  
-  /* Styling for the circle within Section 1 */
-  .part1 > .circle {
-    height: 12.4rem;
-    width: 12rem;
-    border-radius: 50%;
-    background-color: var(--cobalt-blue);
-    background-image: linear-gradient(to top, var(--violet-blue), var(--persian-blue));
-    margin: auto;
-    margin-top: 2rem;
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
-  }
-  
-  /* Styling for span and p within the circle */
-  .part1 > .circle > span {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 4rem;
-    font-size: 3.9rem;
-    font-weight: bold;
-    color: var(--white);
-  }
-  
-  .part1 > .circle > p {
-    padding-left: 2rem;
-  }
-  
-  /* Styling for h2 within Section 1 */
-  .part1 > h2 {
-    display: flex;
-    align-items: center;
-    margin-top: 1rem;
-    font-size: 1.2rem;
-    justify-content: center;
-    font-size: 1.6rem;
-    color: var(--white);
-    margin-bottom: 1rem;
-  }
-  
-  /* Styling for p within Section 1 */
-  .part1 > p {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  /* Styling for Section 2 - Summary */
-  .part2 {
-    width: 50%;
-    border-radius: 1.5rem;
-    padding: 1.5rem;
-    display: flex;
-    color: hsl(224, 30%, 27%);
-    font-weight: bold;
-    flex-direction: column;
-  }
-  
-  /* Styling for the container within Section 2 */
-  .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
-    margin-top: 25px;
-    margin-bottom: 25px;
-  }
-  
-  /* Styling for individual sections within the container */
-  .first, .sec, .third, .fourth {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 10px;
-    width: 100%;
-    height: 3.5rem;
-    border-radius: 8px;
-    justify-content: space-between;
-  }
-  
-  /* Styling for the name section */
-  .name {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
-  /* Styling for the image within the name section */
-  .name > img {
-    padding-top: 2px;
-    margin-right: 10px;
-  }
-  
-  /* Individual background and text color for each section */
-  .first {
-    background-color: hsla(0, 86%, 51%, 0.062);
-  }
-  
-  .sec {
-    background-color: hsla(39, 100%, 56%, 0.096);
-  }
-  
-  .third {
-    background-color: hsla(166, 100%, 37%, 0.062);
-  }
-  
-  .fourth {
-    background-color: hsla(234, 85%, 45%, 0.075);
-  }
-  
-  /* Styling for the score section */
-  .score {
-    float: right;
-    > span {
-      color: gray;
-    }
-  }
-  
-  /* Styling for the Continue button */
-  .submit {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.2rem;
-    width: 100%;
-    height: 3rem;
-    background-color: hsl(224, 30%, 27%);
-    color: white;
-    border-radius: 2rem;
-    margin-top: 1rem;
-  }
-  
+  --light-red: hsl(0, 100%, 67%);
+  --orangey-yellow: hsl(39, 100%, 56%);
+  --green-teal: hsl(166, 100%, 37%);
+  --cobalt-blue: hsl(234, 85%, 45%);
+
+  --light-slate-blue: hsl(252, 100%, 67%);
+  --light-royal-blue: hsl(241, 81%, 54%);
+
+  --violet-blue: hsla(256, 72%, 46%, 1);
+  --persian-blue: hsla(241, 72%, 46%, 0);
+
+  --white: hsl(0, 0%, 100%);
+  --pale-blue: hsl(221, 100%, 96%);
+  --light-lavender: hsl(241, 100%, 89%);
+  --dark-gray-blue: hsl(224, 30%, 27%);
+}
+
+/* Importing a Google Font */
+@import url('https://fonts.google.com/specimen/Hanken+Grotesk');
+
+/* Resetting default styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Body styling */
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: var(--white);
+  font-family: 'Hanken Grotesk', sans-serif;
+}
+
+/* Main container styling */
+main {
+  display: flex;
+  flex-direction: row;
+  width: 650px;
+  max-width: 100%;
+  min-width: 450px;
+  height: 500px;
+  border-radius: 1.5rem;
+  background-color: var(--white);
+  box-shadow: 5px 5px 20px 0px var(--light-lavender);
+  margin: 0;
+}
+
+/* Styling for Section 1 - Your Result */
+.part1 {
+  width: 50%;
+  box-sizing: border-box;
+  background-color: var(--cobalt-blue);
+  background-image: linear-gradient(to bottom, var(--light-slate-blue), var(--light-royal-blue));
+  border-radius: 1.5rem;
+  padding: 2rem;
+  color: var(--light-lavender);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: 0;
+}
+
+/* Styling for h1 within Section 1 */
+.part1>h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+
+/* Styling for the circle within Section 1 */
+.part1>.circle {
+  height: 12.4rem;
+  width: 12rem;
+  border-radius: 50%;
+  background-color: var(--cobalt-blue);
+  background-image: linear-gradient(to top, var(--violet-blue), var(--persian-blue));
+  margin: auto;
+  margin-top: 2rem;
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+/* Styling for span and p within the circle */
+.part1>.circle>span {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 4rem;
+  font-size: 3.9rem;
+  font-weight: bold;
+  color: var(--white);
+}
+
+.part1>.circle>p {
+  padding-left: 2rem;
+}
+
+/* Styling for h2 within Section 1 */
+.part1>h2 {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+  font-size: 1.2rem;
+  justify-content: center;
+  font-size: 1.6rem;
+  color: var(--white);
+  margin-bottom: 1rem;
+}
+
+/* Styling for p within Section 1 */
+.part1>p {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Styling for Section 2 - Summary */
+.part2 {
+  width: 50%;
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  display: flex;
+  color: hsl(224, 30%, 27%);
+  font-weight: bold;
+  flex-direction: column;
+}
+
+/* Styling for the container within Section 2 */
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+/* Styling for individual sections within the container */
+.first,
+.sec,
+.third,
+.fourth {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px;
+  width: 100%;
+  height: 3.5rem;
+  border-radius: 8px;
+  justify-content: space-between;
+}
+
+/* Styling for the name section */
+.name {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Styling for the image within the name section */
+.name>img {
+  padding-top: 2px;
+  margin-right: 10px;
+}
+
+.first>.name {
+  color: var(--light-red);
+}
+
+.sec>.name {
+  color: var(--orangey-yellow);
+}
+
+.third>.name {
+  color: var(--green-teal);
+}
+
+.fourth>.name {
+  color: var(--cobalt-blue);
+}
+
+/* Individual background and text color for each section */
+.first {
+  background-color: hsla(0, 86%, 51%, 0.062);
+}
+
+.sec {
+  background-color: hsla(39, 100%, 56%, 0.096);
+}
+
+.third {
+  background-color: hsla(166, 100%, 37%, 0.062);
+}
+
+.fourth {
+  background-color: hsla(234, 85%, 45%, 0.075);
+}
+
+/* Styling for the score section */
+.score {
+  float: right;
+
+  >span {
+    color: gray;
+  }
+}
+
+/* Styling for the Continue button */
+.submit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  width: 100%;
+  height: 3rem;
+  background-color: hsl(224, 30%, 27%);
+  color: white;
+  border-radius: 2rem;
+  margin-top: 1rem;
+}