diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e235d38
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,284 @@
+@font-face {
+/* 
+  Note: The font files are not included in this repository due to legal restrictions.
+  For more information, please refer to the README.md file located in the 'fonts' directory.
+*/
+    font-family: 'Departure Mono';
+    src: url('../fonts/DepartureMono-Regular.woff2') format('woff2'),
+        url('../fonts/DepartureMono-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Departure Mono';
+    font-size: 18px;
+    line-height: 1.75;
+    background-color: #05130f;
+    color: #e8f0f2;
+    overflow-x: hidden;
+    text-align: center;
+}
+
+.hero {
+    position: relative;
+    width: 100%;
+    height: 60vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url('/img/circle.jpg') no-repeat center center;
+    background-size: cover;
+    margin-bottom: 40px;
+}
+
+.hero img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: brightness(0.8);
+    transition: filter 0.5s;
+}
+
+.hero-text {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 30px;
+    border-radius: 15px;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+    color: #e8f0f2;
+    max-width: 80%;
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+}
+
+main {
+    padding: 40px 20px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.form-section {
+    background-color: #102f2a;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    margin-bottom: 40px;
+}
+
+.input-group, .radio-group, button {
+    width: 100%;
+    margin: 15px auto;
+    display: block;
+}
+
+input[type="text"] {
+    font-family: 'Departure Mono';
+    width: calc(100% - 20px);
+    padding: 10px;
+    border: 2px solid #1bec99;
+    border-radius: 5px;
+    background-color: #0d2f25;
+    color: #e8f0f2;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+input[type="text"]:focus {
+    border-color: #159262;
+}
+
+.radio-group {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+.radio-group input[type="radio"] {
+    display: none;
+}
+
+.radio-group label {
+    width: calc(25% - 10px);
+    margin: 5px;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+    background-color: #05130f;
+    border-radius: 5px;
+    border: 2px solid transparent;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    color: #e8f0f2;
+}
+
+.radio-group input[type="radio"]:checked + label {
+    background-color: #159262;
+    border-color: #1bec99;
+    color: #fff;
+}
+
+button {
+    font-family: 'Departure Mono';
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: #05130f;
+    color: #e8f0f2;
+    font-size: 1rem;
+    cursor: pointer;
+    border: 2px solid transparent;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #159262;
+    border-color: #1bec99;
+    color: #fff;
+    transform: translateY(-3px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+.canvas-container {
+    margin: 20px auto;
+    max-width: 100%;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+#canvas {
+    width: 100%;
+    height: auto;
+}
+
+#outInfo {
+    font-style: italic;
+    color: red;
+    margin: 20px 0;
+    display: block;
+}
+
+.output-section {
+    margin-top: 40px;
+}
+
+#outDiv {
+    display: none;
+    margin-top: 30px;
+    text-align: center;
+}
+
+.faq-section, .credits-section {
+    background-color: #0d2f25;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    color: #e8f0f2;
+    margin-top: 40px;
+    text-align: left;
+}
+
+.faq-section hr {
+    border: none;
+    height: 2px;
+    background: linear-gradient(to right, #159262, #1bec99);
+    margin: 20px 0;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.credits-section h3 {
+    text-align: left;
+}
+
+#usersDiv {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    gap: 20px;
+}
+
+.userSubDiv {
+    flex: 1 1 calc(33.333% - 40px);
+    margin: 10px;
+    padding: 20px;
+    border: none;
+    border-radius: 15px;
+    background-color: #0d2f25;
+    color: #e8f0f2;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.userSubDiv:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+}
+
+.userItem {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    margin-bottom: 10px;
+    color: #1bec99;
+    transition: color 0.3s, text-decoration 0.3s;
+}
+
+.userItem:hover {
+    text-decoration-style: solid;
+    color: #86e0b6;
+}
+
+.userHost {
+    opacity: 0.75;
+    font-style: italic;
+}
+
+.userImg {
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    vertical-align: middle;
+    user-select: none;
+    margin-right: 0.5em;
+}
+
+#footer {
+    padding: 20px;
+    color: #fff;
+    margin-top: 20px;
+    text-align: center;
+}
+
+.footer-note {
+    margin-top: 10px;
+    font-size: 0.9rem;
+}
+
+a {
+    color: #1bec99;
+    transition: color 0.3s;
+}
+
+a:hover {
+    text-decoration: none;
+    color: #159262;
+}
\ No newline at end of file