diff --git a/style.css b/style.css
index c673c78..a4c6543 100644
--- a/style.css
+++ b/style.css
@@ -1,407 +1,410 @@
 :root {
-    --base-color: rgb(250, 194, 145, .8);
-    --main-color: rgb(250, 235, 215, .7);
-    --about-page: rgba(255, 77, 77, .9);
-    --recommendation-page: rgb(86, 124, 167);
+  --base-color: rgb(250, 194, 145, 0.8);
+  --main-color: rgb(250, 235, 215, 0.7);
+  --about-page: rgba(255, 77, 77, 0.9);
+  --recommendation-page: rgb(86, 124, 167);
 }
 
 @font-face {
-    font-family: MichromaRegular;
-    src: url('fonts/Michroma-Regular.ttf') format('truetype');
+  font-family: MichromaRegular;
+  src: url("fonts/Michroma-Regular.ttf") format("truetype");
 }
 
 @font-face {
-    font-family: Chakra;
-    src: url('fonts/ChakraPetch-Regular.ttf') format('truetype');
+  font-family: Chakra;
+  src: url("fonts/ChakraPetch-Regular.ttf") format("truetype");
 }
 
 @viewport {
-    width: device-width;
+  width: device-width;
 }
 
 ::selection {
-    background: var(--base-color)
+  background: var(--base-color);
 }
 
 * {
-    font-family: Chakra, Verdana, Geneva, Tahoma, sans-serif;
+  font-family: Chakra, Verdana, Geneva, Tahoma, sans-serif;
 }
 
 html {
-    background-color: black;
-    background-repeat: no-repeat;
-    background-size: cover;
+  background-color: black;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
-body { 
-    margin: 0;
-    min-height: 100vh;
+body {
+  margin: 0;
+  min-height: 100vh;
 }
 
-html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
-p { 
-    text-align: justify;
-    font-size: 1.3em;
+p {
+  text-align: justify;
+  font-size: 1.3em;
 }
 
-a { 
-    color: orangered;
+a {
+  color: orangered;
 }
 
-b { 
-    font-style: italic;
+b {
+  font-style: italic;
 }
 
-img { 
-    max-width: 100%;
+img {
+  max-width: 100%;
 }
 
 header > h1 {
-    font-size: 60px;
-    font-family: MichromaRegular, Verdana, Geneva, Tahoma, sans-serif;
-    font-weight: bold;
-    text-align: center;
-    color: antiquewhite;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-
+  font-size: 60px;
+  font-family: MichromaRegular, Verdana, Geneva, Tahoma, sans-serif;
+  font-weight: bold;
+  text-align: center;
+  color: antiquewhite;
+  margin: 0;
+  width: 100%;
+  height: 100%;
 }
 
 header {
-    padding-bottom: 1em;
-    display: block;
-    position: relative;
+  padding-bottom: 1em;
+  display: block;
+  position: relative;
 }
 
 nav {
-    gap: 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 nav > a {
-    color: antiquewhite;
-    font-weight: bold;
-    text-decoration: none;
-    font-family: MichromaRegular, Verdana, Geneva, Tahoma, sans-serif;
-    font-size: 1.3rem;
+  color: antiquewhite;
+  font-weight: bold;
+  text-decoration: none;
+  font-family: MichromaRegular, Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 1.3rem;
 }
 
 section > h2 {
-    display: block;
-    text-align: center;
-    font-size: 2rem;
-    margin: auto;
+  display: block;
+  text-align: center;
+  font-size: 2rem;
+  margin: auto;
 }
 
-.about-main p + p { 
-    margin-top: 1rem;
+.about-main p + p {
+  margin-top: 1rem;
 }
 
 li {
-    font-size: 1.3rem;
+  font-size: 1.3rem;
 }
 
 .home-main section {
-    padding: 1em;
-    margin: 1em;
-    background-color: var(--main-color);
-    border-radius: 6px;
+  padding: 1em;
+  margin: 1em;
+  background-color: white;
+  border-radius: 6px;
 }
 
 .contact {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
-figure { 
-    margin-left: 0;
+figure {
+  margin-left: 0;
 }
 
-.about-photo { 
-    background-color: white;
-    font-size: 1.3em;
-    text-align: center;
+.about-photo {
+  background-color: white;
+  font-size: 1.3em;
+  text-align: center;
 }
 
 caption {
-    font-weight: bold;
-    font-style: italic;
-    border: 1px dotted black;
+  font-weight: bold;
+  font-style: italic;
+  border: 1px dotted black;
 }
 
-.about-main section { 
-    background-color: white;
-    border-left: 5px dashed black;
-    margin-top: 1rem;
-    margin-bottom: 5rem;
-    padding: 1rem;
+.about-main section {
+  background-color: white;
+  border-left: 5px dashed black;
+  margin-top: 1rem;
+  margin-bottom: 5rem;
+  padding: 1rem;
 }
 
-.about-main section h2 { 
-    text-align: center; 
-    color: black;
+.about-main section h2 {
+  text-align: center;
+  color: black;
 }
 
 .about-main p {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 1%;
-    padding-right: 1%;
-    font-size: 1.3em;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 1%;
+  padding-right: 1%;
+  font-size: 1.3em;
 }
 
 .about-main h3 {
-    margin: 0.7em;
-    font-size: 1.5em;
-    border-bottom: 1px solid black;
+  margin: 0.7em;
+  font-size: 1.5em;
+  border-bottom: 1px solid black;
 }
 
-.languages ul { 
-    text-align: center;
-    padding-inline-start: 0;
+.languages ul {
+  text-align: center;
+  padding-inline-start: 0;
 }
 
-.languages li { 
-    font-size: 2rem;
-    list-style: none;
-    display: block;
-    padding: 0;
-    border-top: 3px solid black;
+.languages li {
+  font-size: 2rem;
+  list-style: none;
+  display: block;
+  padding: 0;
+  border-top: 3px solid black;
 }
 
-.recommendation-main { 
-    background-color: var(--main-color);
-    padding: 2rem;
+.recommendation-main {
+  background-color: var(--main-color);
+  padding: 2rem;
 }
 
-.recommendation-main nav ul { 
-    display: flex;
-    list-style: none;
-    flex-direction: column;
-    gap: 2.5em;
+.recommendation-main nav ul {
+  display: flex;
+  list-style: none;
+  flex-direction: column;
+  gap: 2.5em;
 }
 
-.recommendation-main nav ul li { 
-    border: 2px solid black;
-    padding: 0.5em;
-    margin: 0.5em;
+.recommendation-main nav ul li {
+  border: 2px solid black;
+  padding: 0.5em;
+  margin: 0.5em;
 }
 
-.recommendation-main nav ul li a { 
-    color: black;
-    text-decoration: none;
-    font-size: 1.2em;
+.recommendation-main nav ul li a {
+  color: black;
+  text-decoration: none;
+  font-size: 1.2em;
 }
 
-.artist-descriptions h2 { 
-    margin-top: 2rem;
-    font-size: 2rem;
+.artist-descriptions h2 {
+  margin-top: 2rem;
+  font-size: 2rem;
 }
 
-.artist-descriptions h3 { 
-    font-size: 2rem;
-    display: block;
-    text-align: center;
-    font-size: 2rem;
-    margin: auto;
+.artist-descriptions h3 {
+  font-size: 2rem;
+  display: block;
+  text-align: center;
+  font-size: 2rem;
+  margin: auto;
 }
 
-aside h4 { 
-    font-size: 1.4em;
+aside h4 {
+  font-size: 1.4em;
 }
 
-table, td, th{ 
-    border: 1px solid black;
-    background-color: white;
+table,
+td,
+th {
+  border: 1px solid black;
+  background-color: white;
 }
 
-th { 
-    background-color: lightgrey;
+th {
+  background-color: lightgrey;
 }
 
-#Artist-1, #Artist-2, #Artist-3 { 
-    padding: 0.5em;
-    margin: 0.5rem;
-    border: 2px solid var(--recommendation-page);
+#Artist-1,
+#Artist-2,
+#Artist-3 {
+  padding: 0.5em;
+  margin: 0.5rem;
+  border: 2px solid var(--recommendation-page);
 }
 
 .in-page-nav a {
-    border-bottom: 3px solid transparent;
-    transition: border-color 0.3s ease-in-out;
+  border-bottom: 3px solid transparent;
+  transition: border-color 0.3s ease-in-out;
 }
 
 /* hover  */
 @media (hover: hover) {
-    .in-page-nav a:hover {
-        border-color:  var(--base-color);
-    }    
+  .in-page-nav a:hover {
+    border-color: var(--base-color);
+  }
 
-    .contact a:hover { 
-        opacity: 0.5;
-        transition: 0.3s ease-in-out;
-    }
+  .contact a:hover {
+    opacity: 0.5;
+    transition: 0.3s ease-in-out;
+  }
 
-    main nav ul li:hover { 
-        background-color: var(--recommendation-page);
-        text-decoration: none;
-        transition: 0.5s ease-out;
-    }
+  main nav ul li:hover {
+    background-color: var(--recommendation-page);
+    text-decoration: none;
+    transition: 0.5s ease-out;
+  }
 }
 
 /*responsive */
 
 @media screen and (min-width: 526px) {
-    .home-main {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-areas: "welcome welcome"
-            "tldr tldr"
-            "contact contact"
-    }           
-    .welcome {
-        grid-area: welcome;
-    }
-
-    .tldr {
-        grid-area: tldr;
-    }
-
-    .contact {
-        grid-area: contact;
-    }
-
-    nav {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-    }
-    
-}
-
-@media screen and (min-width: 930px) { 
-    .home-main { 
-      gap: 1rem;
+  .home-main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "welcome welcome"
+      "tldr tldr"
+      "contact contact";
+  }
+  .welcome {
+    grid-area: welcome;
+  }
+
+  .tldr {
+    grid-area: tldr;
+  }
+
+  .contact {
+    grid-area: contact;
   }
 
-  .home-main section { 
-      padding: 2em;
+  nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
-  
-  .home-main .contact { 
-      padding: 0.4em;
+}
+
+@media screen and (min-width: 930px) {
+  .home-main {
+    gap: 1rem;
   }
-  
-  .artist-guide { 
+
+  .home-main section {
+    padding: 2em;
+  }
+
+  .home-main .contact {
+    padding: 0.4em;
+  }
+
+  .artist-guide {
     display: grid;
     grid-template-columns: 0.3fr 0.6fr;
-    grid-template-areas: 
-        "header header"
-        "left right"
-    ;
-    }
-
-    .guide-title { 
-        grid-area: header;
-    }
-
-    .recommendation-nav { 
-        grid-area: left;
-    }
-
-    .artist-key-points { 
-        grid-area: right;
-    }
-
-  #Artist-1, #Artist-2, #Artist-3 { 
-      display: flex;
-      flex-wrap: wrap;
-      padding: 1em;
-      margin: 1rem;
+    grid-template-areas:
+      "header header"
+      "left right";
+  }
+
+  .guide-title {
+    grid-area: header;
   }
 
+  .recommendation-nav {
+    grid-area: left;
+  }
+
+  .artist-key-points {
+    grid-area: right;
+  }
+
+  #Artist-1,
+  #Artist-2,
+  #Artist-3 {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 1em;
+    margin: 1rem;
+  }
 }
 
 @media screen and (min-width: 1026px) {
-    .languages ul { 
-        margin: 0;
-        list-style-type: none;
-        display: flex;
-        justify-content: space-evenly; 
-    } 
+  .languages ul {
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    justify-content: space-evenly;
+  }
 
-    .languages li { 
-        font-size: 2rem;
-        border: 2px solid orangered;
-        border-radius: 10px;
-        padding: 0.5em;
-        margin: 0.5em;
-    }
+  .languages li {
+    font-size: 2rem;
+    border: 2px solid orangered;
+    border-radius: 10px;
+    padding: 0.5em;
+    margin: 0.5em;
+  }
 }
 
-@media screen and (min-width: 1500px) { 
-    .home-main { 
-        gap: 1.6rem;
-    }
-
-    .home-main section { 
-        padding: 2.4em;
-    }
+@media screen and (min-width: 1500px) {
+  .home-main {
+    gap: 1.6rem;
+  }
 
+  .home-main section {
+    padding: 2.4em;
+  }
 }
 
 @media screen and (min-width: 2600px) and (min-height: 950px) {
-    .home-main {
-        display: flex;
-        flex-direction: column;
-        gap: 7em;
-    }
-
-    header > h1 {
-        font-size: 6em;
-    }
-
-    .home-main h2 { 
-        font-size: 3em;
-        font-weight: bold;
-    }
-    .in-page-nav a {
-        font-size: 1.7em;
-    }
-
-    .welcome p, ul li{
-        text-align: center;
-        font-size: 2.5em;
-        list-style-type: none;
-    }
-
-    .about-main p {
-        font-size: 2em;
-    }
-
-    .about-main section h2 {
-        font-size: 3em;
-    }
-
-    .about-main h3 {
-        font-size: 3em;
-    }
-
-    .languages ul li {
-        font-size: 3em;
-    }
-
-    figcaption {
-        font-size: 1.3em;
-    }
-
-}
\ No newline at end of file
+  .home-main {
+    display: flex;
+    flex-direction: column;
+    gap: 7em;
+  }
+
+  header > h1 {
+    font-size: 6em;
+  }
+
+  .home-main h2 {
+    font-size: 3em;
+    font-weight: bold;
+  }
+  .in-page-nav a {
+    font-size: 1.7em;
+  }
+
+  .welcome p,
+  ul li {
+    text-align: center;
+    font-size: 2.5em;
+    list-style-type: none;
+  }
+
+  .about-main p {
+    font-size: 2em;
+  }
+
+  .about-main section h2 {
+    font-size: 3em;
+  }
+
+  .about-main h3 {
+    font-size: 3em;
+  }
+
+  .languages ul li {
+    font-size: 3em;
+  }
+
+  figcaption {
+    font-size: 1.3em;
+  }
+}