Archive page

styles/Archive.module.scss

@@ -1,3 +1,77 @@
 .archivePage {
   margin-bottom: 4rem;
 }
+
+.year {
+  font-size: 3rem;
+  margin-bottom: 1em;
+}
+
+.performerContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 90%;
+
+  p {
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: 0.2rem solid #d5caf29d;
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: 100%;
+  }
+}
+
+.performerTextContainer {
+  width: 80%;
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+
+.performerTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  width: 100%;
+
+  h2 {
+    margin-left: 1rem;
+  }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+.performerImage {
+  height: 100px;
+  border-radius: 100%;
+  margin-bottom: 2rem;
+}
+
+.performerButton:hover {
+  svg {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .performerContainer {
+    flex-direction: column;
+    align-items: center;
+
+    hr {
+      margin-top: 0;
+    }
+  }
+  .performerTextContainer {
+    margin-left: -0.5rem;
+  }
+}