1 files changed, 164 insertions, 0 deletions
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..649ae09
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,164 @@
+/* These main CSS elements were made between 1/27/2025 and 1/28/2025 by Peter Nguyen for peten.ca */
+
+/* MAIN */
+
+body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  background-color: #f9f9f9;
+}
+
+/* FONTS */
+
+.font-ubuntu {
+  font-family: "Ubuntu Sans", serif;
+  font-optical-sizing: auto;
+  font-weight: bold;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+}
+
+.font-montserrat {
+  font-family: "Montserrat", serif;
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
+}
+
+.container-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: left;
+  gap: 30px;
+  flex-direction: row;
+  height: 100vh;
+}
+
+.fade-in {
+  opacity: 1;
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 0.5s;
+}
+
+@keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.image {
+  width: 175px;
+  /* Adjust size as needed */
+  height: auto;
+  padding-bottom: 15px;
+}
+
+/* TEXT */
+
+h1 {
+  font-size: 5rem !important;
+  font-weight: bold;
+  margin: 0;
+}
+
+h2 {
+  font-size: 1.1rem !important;
+}
+
+p {
+  font-size: 0.9rem;
+  font-weight: 400;
+}
+
+.element {
+  font-size: 1.5rem;
+  font-weight: 300;
+}
+
+.typed-cursor {
+  font-size: 1.5rem;
+}
+
+/* NAV */
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px;
+}
+
+.nav-link {
+  font-size: 1.5rem !important;
+}
+
+/* BOTTOM OF PAGE */
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 0.75rem;
+  padding: 10px;
+}
+
+/* MOBILE CSS ADAPTATIONS */
+
+@media (max-width: 768px) {
+  body {
+    position: absolute;
+  }
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  p {
+    font-size: 1.2rem;
+  }
+
+  .container-content {
+    width: 100%;
+    padding: 20px;
+    padding-bottom: 80px;
+    text-align: center;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .image {
+    position: absolute;
+    bottom: 35px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 150px;
+    height: auto;
+  }
+
+  .nav-link {
+    font-size: 2rem !important;
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 0.75rem;
+    padding: 10px;
+  }
+}