Initial commit

input.css

@@ -0,0 +1,98 @@
+:root {
+  --base: rgb(30, 30, 46);
+  --text: rgb(205, 214, 244);
+  --mauve: rgb(203, 166, 247);
+}
+
+* {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--base);
+  color: var(--text);
+}
+
+.page-wrapper {
+  display: grid;
+  place-content: center;
+  height: 100vh;
+}
+
+.avatar {
+  border-radius: 50%;
+  object-fit: cover;
+  border-style: solid;
+  border-color: var(--mauve);
+  height: 30rem;
+  width: 30rem;
+  object-position: 0 -4.5rem;
+  border-width: 0.75rem;
+}
+
+.avatar-wrapper {
+  display: grid;
+  place-content: center;
+}
+
+.title-wrapper {
+  display: grid;
+  place-content: center;
+  font-weight: bold;
+  font-size: 4.5rem;
+  margin-top: 3rem;
+}
+
+.subtitle-wrapper {
+  display: grid;
+  place-content: center;
+  font-size: 3.75rem;
+}
+
+.icons-wrapper {
+  display: flex;
+  place-content: center;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 3rem;
+}
+
+.icon-wrapper {
+  margin-right: 1.25rem;
+}
+
+.icon-wrapper:last-child {
+  margin-right: 0;
+}
+
+.icon {
+  height: 9rem;
+  width: 9rem;
+}
+
+@media (min-width:1024px) {
+  .avatar {
+    height: 10rem;
+    width: 10rem;
+    object-position: 0 -1.5rem;
+    border-width: 0.25rem;
+  }
+
+  .title-wrapper {
+    font-size: 1.5rem;
+    margin-top: 1rem;
+  }
+
+  .subtitle-wrapper {
+    font-size: 1.25rem;
+  }
+
+  .icon-wrapper {
+    margin-right: 1rem;
+  }
+
+  .icons-wrapper {
+    margin-top: 1rem;
+  }
+
+  .icon {
+    height: 3rem;
+    width: 3rem;
+  }
+}