Add sass

app/globals.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

app/globals.scss

@@ -0,0 +1,389 @@
+@import "bootstrap/scss/bootstrap";
+
+:root {
+    --bs-border-radius: 0.25rem;
+}
+
+.btn-primary {
+    --bs-btn-bg: #89b7cd;
+    --bs-btn-hover-bg: #5B91AB;
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+@mixin fade-in {
+    opacity: 0; /* make things invisible upon start */
+    animation-name: fadein;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+    animation-timing-function: ease;
+}
+
+.fade-in {
+    @include fade-in;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    color: #ffffff;
+    background-color: #211018;
+}
+
+::-moz-selection,
+::selection {
+    text-shadow: none;
+    background: #fcfcfc;
+    background: rgba(255, 255, 255, 0.2);
+}
+img::selection,
+img::-moz-selection {
+    background: transparent;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 1em 0;
+    font-family: 'Muli', sans-serif;
+}
+
+a {
+    color: #bad9e8;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
+.hidden {
+    display: none !important;
+}
+
+.list-group {
+    line-height: 1.5em;
+    li {
+        margin-left: 1em;
+    }
+}
+
+#about {
+    background:
+        url('/images/bgtr.svg') top right no-repeat,
+        url('/images/bgbl.svg') bottom left no-repeat,
+        url('/images/bgbl.svg') bottom left no-repeat,
+        url('/images/overlay.png'),
+        linear-gradient(45deg, #85505f, #384955, #655361);
+    p {
+        opacity: 0.9;
+        line-height: 1.3em;
+    }
+}
+
+.light {
+    font-weight: 400;
+}
+
+.navbar {
+    font-family: 'Muli', sans-serif;
+    margin-bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    font-size: 95%;
+    font-weight: normal;
+
+    .navbar-collapse {
+        justify-content: space-between;
+    }
+    a {
+        color: white;
+    }
+}
+
+.navbar-brand {
+    display: none;
+    transition: opacity 0.3s ease-in-out;
+    padding-left: 1em;
+    &:focus {
+        outline: none;
+    }
+}
+
+.navbar-custom {
+    a {
+        color: #ffffff;
+    }
+}
+
+.navbar-custom .nav li a {
+    -webkit-transition: background 0.3s ease-in-out;
+    -moz-transition: background 0.3s ease-in-out;
+    transition: background 0.3s ease-in-out;
+}
+.navbar-custom .nav li a:hover,
+.navbar-custom .nav li a:focus,
+.navbar-custom .nav li.active {
+    outline: none;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+.navbar-toggle {
+    padding: 4px 6px;
+    font-size: 16px;
+    color: #ffffff;
+}
+.navbar-toggle:focus,
+.navbar-toggle:active {
+    outline: none;
+}
+@media (min-width: 767px) {
+    .navbar {
+        border-bottom: none;
+        letter-spacing: 1px;
+        background-color: rgba(0, 0, 0, 0.5);
+        -webkit-transition:
+            background 0.5s ease-in-out,
+            padding 0.5s ease-in-out;
+        -moz-transition:
+            background 0.5s ease-in-out,
+            padding 0.5s ease-in-out;
+        transition:
+            background 0.5s ease-in-out,
+            padding 0.5s ease-in-out;
+    }
+    .top-nav-collapse {
+        padding-top: 0;
+        padding-bottom: 0;
+        background-color: #211018;
+    }
+    .navbar-custom.top-nav-collapse {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    }
+}
+@media (max-width: 480px) {
+    .navbar {
+        display: none;
+    }
+}
+
+.intro {
+    margin-top: -4em;
+    height: calc(100vh + 4em);
+    background: url(/images/header.jpg) no-repeat bottom center scroll;
+    background-color: #211018;
+    background-size: cover;
+    overflow-x: hidden;
+}
+.features-section {
+    background:
+        url('/images/bgtr.svg') top right no-repeat,
+        url('/images/bgbl.svg') bottom left no-repeat,
+        url('/images/bgbl.svg') bottom left no-repeat,
+        url('/images/overlay.png'),
+        linear-gradient(45deg, #85505f, #384955, #655361);
+}
+.features-section a {
+    color: #82b397;
+}
+.outro {
+    background:
+        url('/images/bgtr.svg') top right no-repeat,
+        url('/images/bgbl.svg') bottom left no-repeat,
+        url('/images/overlay.png'),
+        linear-gradient(45deg, #384955, #655361, #85505f);
+}
+
+section {
+    h2 {
+        color: #e7a151;
+    }
+    h3 {
+        color: #89b7cd;
+    }
+    h4 {
+        color: #5cbc86;
+        font-size: 1.5em;
+    }
+}
+
+.brand-heading {
+    display: inline-flex;
+    align-items: center;
+    font-family: 'Baumans', cursive;
+    font-size: 6em;
+    margin-top: 1.5em;
+    margin-bottom: 0;
+    color: white;
+
+    .byline {
+        font-family: 'Muli', sans-serif;
+        font-size: 20px;
+        opacity: 0.5;
+        margin-bottom: 2em;
+        margin-inline-start: -75px;
+    }
+
+    .subdued {
+        opacity: 0.15;
+        font-size: 95%;
+        word-spacing: 50px;
+    }
+
+    .converse-svg-logo {
+        height: 1.2em;
+        margin-inline-end: 0.25em;
+        margin-bottom: 0.1em;
+        .cls-1 {
+            isolation: isolate;
+        }
+        .cls-2 {
+            opacity: 0.5;
+            mix-blend-mode: multiply;
+        }
+        .cls-3 {
+            fill: white;
+        }
+        .cls-4 {
+            fill: white;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .chatroom-name {
+        font-size: 16px;
+    }
+
+    .brand-heading {
+        flex-direction: column;
+        font-size: 4em;
+        margin-top: 1em;
+
+        .byline {
+            margin: auto;
+        }
+    }
+}
+
+.brand-heading__text {
+    font-size: 0.9em;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.brand-heading-embedded {
+    margin-top: 1.5em;
+}
+@media (min-width: 767px) {
+    .intro {
+        padding: 0;
+    }
+}
+
+.intro-text {
+    font-size: 1.1em;
+    opacity: 0.8;
+    margin-bottom: 0;
+    padding-bottom: 0.2em;
+}
+
+.carousel {
+    opacity: 0.9;
+    overflow: hidden;
+
+    .carousel-inner {
+        padding: 1em;
+    }
+
+    .carousel-indicators button {
+        width: 10px;
+        height: 10px;
+        border-radius: 100%;
+    }
+
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .carousel {
+        max-width: 95% !important;
+    }
+}
+
+.nav-item {
+    a {
+        &:hover,
+        &:focus {
+            text-decoration: none;
+        }
+    }
+    &.active {
+        a {
+            color: #e7a151 !important;
+        }
+    }
+}
+
+.content-section {
+    padding-top: 5em;
+    min-height: 100vh;
+    &#about {
+        padding-top: 2em;
+    }
+}
+
+.donate-section {
+    width: 100%;
+    padding: 50px 0;
+    color: #ffffff;
+    background-color: #211018;
+}
+
+@media (min-width: 767px) {
+    .content-section {
+        padding-bottom: 50px;
+    }
+    .donate-section {
+        padding: 100px 0;
+    }
+}
+
+.btn {
+    font-family: 'Muli', sans-serif;
+    font-weight: 400;
+    transition: all 0.3s ease-in-out;
+}
+
+.mastodon {
+    width: 3.6em;
+    height: 3.6em;
+    margin-top: 0.6em;
+}
+
+.sponsors {
+    clear: both;
+    font-size: 1.4em;
+    padding: 0 0 2em 0;
+    ul {
+        columns: 2;
+        padding: 0;
+    }
+}
+.sponsors h2 {
+    text-align: center;
+}

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "./globals.scss";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",