chore: Rename nationtec-io folder to sreez

sreez/.gitignore

@@ -0,0 +1,13 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+pkg
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# node e2e test tools and outputs
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/

sreez/Cargo.toml

@@ -0,0 +1,93 @@
+[package]
+name = "nationtech-io"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+actix-files = { version = "0.6", optional = true }
+actix-web = { version = "4", optional = true, features = ["macros"] }
+console_error_panic_hook = "0.1"
+http = { version = "0.2", optional = true }
+leptos = { version = "0.6", features = ["nightly"] }
+leptos_meta = { version = "0.6", features = ["nightly"] }
+leptos_actix = { version = "0.6", optional = true }
+leptos_router = { version = "0.6", features = ["nightly"] }
+wasm-bindgen = "=0.2.89"
+
+[features]
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
+hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+ssr = [
+  "dep:actix-files",
+  "dep:actix-web",
+  "dep:leptos_actix",
+  "leptos/ssr",
+  "leptos_meta/ssr",
+  "leptos_router/ssr",
+]
+
+# Defines a size-optimized profile for the WASM bundle in release mode
+[profile.wasm-release]
+inherits = "release"
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"
+
+[package.metadata.leptos]
+# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
+output-name = "nationtech-io"
+# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
+site-root = "target/site"
+# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
+# Defaults to pkg	
+site-pkg-dir = "pkg"
+# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
+style-file = "style/main.scss"
+# Assets source dir. All files found here will be copied and synchronized to site-root.
+# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
+#
+# Optional. Env: LEPTOS_ASSETS_DIR.
+assets-dir = "assets"
+# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
+site-addr = "127.0.0.1:3000"
+# The port to use for automatic reload monitoring
+reload-port = 3001
+# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
+#   [Windows] for non-WSL use "npx.cmd playwright test"
+#   This binary name can be checked in Powershell with Get-Command npx
+end2end-cmd = "npx playwright test"
+end2end-dir = "end2end"
+#  The browserlist query used for optimizing the CSS.
+browserquery = "defaults"
+# Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
+watch = false
+# The environment Leptos will run in, usually either "DEV" or "PROD"
+env = "DEV"
+# The features to use when compiling the bin target
+#
+# Optional. Can be over-ridden with the command line parameter --bin-features
+bin-features = ["ssr"]
+
+# If the --no-default-features flag should be used when compiling the bin target
+#
+# Optional. Defaults to false.
+bin-default-features = false
+
+# The features to use when compiling the lib target
+#
+# Optional. Can be over-ridden with the command line parameter --lib-features
+lib-features = ["hydrate"]
+
+# If the --no-default-features flag should be used when compiling the lib target
+#
+# Optional. Defaults to false.
+lib-default-features = false
+
+# The profile to use for the lib target when compiling for release
+#
+# Optional. Defaults to "release".
+lib-profile-release = "wasm-release"

sreez/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 henrik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

sreez/README.md

@@ -0,0 +1,10 @@
+# Run the project
+```bash
+rustup update
+rustup default nightly
+cargo install cargo-leptos
+cargo leptos watch
+
+# To be accessible on LAN 
+LEPTOS_SITE_ADDR=0.0.0.0:3000 cargo leptos watch
+```

sreez/end2end/package-lock.json

@@ -0,0 +1,74 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "end2end",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.28.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "node_modules/playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true,
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    }
+  },
+  "dependencies": {
+    "@playwright/test": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
+      }
+    },
+    "@types/node": {
+      "version": "18.11.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
+      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
+      "dev": true
+    },
+    "playwright-core": {
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "dev": true
+    }
+  }
+}

sreez/end2end/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "end2end",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.28.0"
+  }
+}

sreez/end2end/playwright.config.ts

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

sreez/end2end/tests/example.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage has title and links to intro page", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+
+  await expect(page).toHaveTitle("Welcome to Leptos");
+
+  await expect(page.locator("h1")).toHaveText("Welcome to Leptos!");
+});

sreez/rust-toolchain.toml

@@ -0,0 +1,3 @@
+[toolchain]
+channel = "nightly"
+targets = ["wasm32-unknown-unknown"]

sreez/src/app.rs

@@ -0,0 +1,53 @@
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+use crate::pages::HomePage;
+
+#[component]
+pub fn App() -> impl IntoView {
+    // Provides context that manages stylesheets, titles, meta tags, etc.
+    provide_meta_context();
+
+    view! {
+        // injects a stylesheet into the document <head>
+        // id=leptos means cargo-leptos will hot-reload this stylesheet
+        <Stylesheet id="leptos" href="/pkg/nationtech-io.css"/>
+
+        // sets the document title
+        <Title text="SREEZ - Site Reliability Engineering for Everyone, eZ"/>
+
+        // content for this welcome page
+        <Router>
+            <main>
+                <Routes>
+                    <Route path="" view=HomePage/>
+                    <Route path="/*any" view=NotFound/>
+                </Routes>
+            </main>
+        </Router>
+    }
+}
+
+
+/// 404 - Not Found
+#[component]
+fn NotFound() -> impl IntoView {
+    // set an HTTP status code 404
+    // this is feature gated because it can only be done during
+    // initial server-side rendering
+    // if you navigate to the 404 page subsequently, the status
+    // code will not be set because there is not a new HTTP request
+    // to the server
+    #[cfg(feature = "ssr")]
+    {
+        // this can be done inline because it's synchronous
+        // if it were async, we'd use a server function
+        let resp = expect_context::<leptos_actix::ResponseOptions>();
+        resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
+    }
+
+    view! {
+        <h1>"Not Found"</h1>
+    }
+}

sreez/src/lib.rs

@@ -0,0 +1,13 @@
+pub mod app;
+mod pages;
+
+#[cfg(feature = "hydrate")]
+#[wasm_bindgen::prelude::wasm_bindgen]
+pub fn hydrate() {
+    use app::*;
+    use leptos::*;
+
+    console_error_panic_hook::set_once();
+
+    mount_to_body(App);
+}

sreez/src/main.rs

@@ -0,0 +1,68 @@
+#[cfg(feature = "ssr")]
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    use actix_files::Files;
+    use actix_web::*;
+    use leptos::*;
+    use leptos_actix::{generate_route_list, LeptosRoutes};
+    use nationtech_io::app::*;
+
+    let conf = get_configuration(None).await.unwrap();
+    let addr = conf.leptos_options.site_addr;
+    // Generate the list of routes in your Leptos App
+    let routes = generate_route_list(App);
+    println!("listening on http://{}", &addr);
+
+    HttpServer::new(move || {
+        let leptos_options = &conf.leptos_options;
+        let site_root = &leptos_options.site_root;
+
+        App::new()
+            // serve JS/WASM/CSS from `pkg`
+            .service(Files::new("/pkg", format!("{site_root}/pkg")))
+            // serve other assets from the `assets` directory
+            .service(Files::new("/assets", site_root))
+            // serve the favicon from /favicon.ico
+            .service(favicon)
+            .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
+            .app_data(web::Data::new(leptos_options.to_owned()))
+        //.wrap(middleware::Compress::default())
+    })
+    .bind(&addr)?
+    .run()
+    .await
+}
+
+#[cfg(feature = "ssr")]
+#[actix_web::get("favicon.ico")]
+async fn favicon(
+    leptos_options: actix_web::web::Data<leptos::LeptosOptions>,
+) -> actix_web::Result<actix_files::NamedFile> {
+    let leptos_options = leptos_options.into_inner();
+    let site_root = &leptos_options.site_root;
+    Ok(actix_files::NamedFile::open(format!(
+        "{site_root}/favicon.ico"
+    ))?)
+}
+
+#[cfg(not(any(feature = "ssr", feature = "csr")))]
+pub fn main() {
+    // no client-side main function
+    // unless we want this to work with e.g., Trunk for pure client-side testing
+    // see lib.rs for hydration function instead
+    // see optional feature `csr` instead
+}
+
+#[cfg(all(not(feature = "ssr"), feature = "csr"))]
+pub fn main() {
+    // a client-side main function is required for using `trunk serve`
+    // prefer using `cargo leptos serve` instead
+    // to run: `trunk serve --open --features csr`
+    use leptos::*;
+    use nationtech_io::app::*;
+    use wasm_bindgen::prelude::wasm_bindgen;
+
+    console_error_panic_hook::set_once();
+
+    leptos::mount_to_body(App);
+}

sreez/src/pages/home_page.rs

@@ -0,0 +1,118 @@
+use leptos::*;
+/// Renders the home page of your application.
+#[component]
+pub fn HomePage() -> impl IntoView {
+    // Creates a reactive value to update the button
+    view! {
+        <div class="row margin-y-4 justify-center">
+            <img src="assets/sreez_transparent_bg.png"  alt="SREEZ mascot. Yes it is text-to-image generated by GPT4/DALL·E" class="max-width-400 margin-x-3"/>
+            <div class="margin-x-3 text-left column justify-center">
+                <h1>"SREEZ"
+                    <br/>
+                    <span class="font-size-xl color-gray">"Site Reliability Engineering for Everyone, eZ"</span>
+                </h1>
+                <h2 class="font-size-3xl">
+                    <span>"Stay focused"</span><br/>
+                    <span>"on your features,"</span><br/>
+                    <span>"we take care"</span><br/>
+                    <span>"of the infrastructure."</span>
+                </h2>
+            </div>
+        </div>
+        <div class="row card-list">
+            <div class="card">
+                <h3>"24/7 support"</h3>
+                <ul>
+                    <li>"We make sure your infrastructure is running, all the time"</li>
+                    <li>"We won't wake you up unless there is a bug in your code"</li>
+                    <li>"Full post-mortem and reactive measures taken so it won't happen again"</li>
+                </ul>
+            </div>
+            <div class="card">
+                <h3>"Batteries included"</h3>
+                <ul>
+                    <li>"Managed Orchestrator : RedHat OpenShift Community (OKD) cluster"</li>
+                    <li>"Marketplace : Easily install hundreds of apps, databases, productivity tools at no additional cost"</li>
+                    <li>"CI/CD Pipeline : Source Control, Continuous Integration, Test Automation, Static Analysis, Continuous Delivery"</li>
+                    <li>"AI Tools : Open source LLMs, Model Management and Deployment, Jupyter Notebooks, NVidia GPUs"</li>
+                </ul>
+            </div>
+            <div class="card">
+                <h3>"Free as a byte"</h3>
+                <ul>
+                    <li>"No vendor lock-in, only open source tools"</li>
+                    <li>"Install any software based on your specific needs only"</li>
+                    <li>"Run anywhere : NationTech Network, Bare Metal, Virtual Machines, Public Cloud, Private Cloud"</li>
+                </ul>
+            </div>
+        </div>
+        <p>"And much more, just "<a href="mailto:sreez@nationtech.io">"ask us!"</a></p>
+        <h2>"How it works"</h2>
+        <div class="md-container text-left">
+        <ol class="huge-list-markers">
+            <li><h3 class="text-3x">"Fork a template repo"</h3></li>
+            <li><h3 class="text-3x">"Create an account"</h3></li>
+            <li><h3 class="text-3x">"Push a modification"</h3></li>
+            <li><h3 class="text-3x">"Enjoy life in production"</h3></li>
+        </ol>
+        </div>
+        <div class="row card-list">
+            <div class="card">
+                <h3 class="border-bottom-4">"Base package - Self Managed"</h3>
+                <ul class="text-left">
+                    <li>"1 Kubernetes namespace - Auto-Healing, Auto-Scaling, Fully Managed"</li>
+                    <li>"Kubeapps dashboard - install hundreds of applications and databases in 1 click"</li>
+                    <li>"Argo-CD"</li>
+                    <li>"Gitea"</li>
+                    <li>"Jenkins"</li>
+                    <li>"Prometheus"</li>
+                    <li>"Grafana"</li>
+                    <li>"64 GB RAM"</li>
+                    <li>"32 CPU Cores"</li>
+                    <li>"2 TB General Purpose Distributed Storage"</li>
+                </ul>
+                <div class="spacer"></div>
+                <p class="font-bold text-center text-4">"1 055 CAD / Month"</p>
+                <p class="font-bold text-center text-4">"10 555 CAD / Year"</p>
+            </div>
+            <div class="card">
+                <h3 class="border-bottom-4">"Startup Package - SRE as a Service"</h3>
+                <ul class="text-left">
+                    <li>"Everything in lower package, plus"</li>
+                    <li>"Unlimited Kubernetes namespaces - Auto-Healing, Auto-Scaling, Fully Managed"</li>
+                    <li>"Kubeflow"</li>
+                    <li>"OpenLLM - LLaMa, Mistral, StarCoder and more open source models to tune and run privately"</li>
+                    <li>"1 AI GPU with 24GB+ VRAM"</li>
+                    <li>"256 GB RAM"</li>
+                    <li>"96 CPU Cores"</li>
+                    <li>"10 TB General Purpose Distributed Storage"</li>
+                    <li>"2 hours per month complimentary consulting with our SRE team"</li>
+                    <li>"Access to direct messaging with 4 hour SLA 24/7"</li>
+                </ul>
+                <div class="spacer"></div>
+                <p class="margin-x-1">"For those who have modest needs but want to benefit from the best SRE tools and teams in the industry"</p>
+                <p class="font-bold text-center text-4">"5 555 CAD / Month"</p>
+                <p class="font-bold text-center text-4">"55 555 CAD / Year"</p>
+            </div>
+            <div class="card">
+                <h3 class="border-bottom-4">"Top Package - Dedicated Cluster"</h3>
+                <ul class="text-left">
+                    <li>"Everything in lower package, plus"</li>
+                    <li>"2 Dedicated OKD (OpenShift Community) Clusters"</li>
+                    <li>"Distributed in two geographical sites of your choice"</li>
+                    <li>"4 days per month SRE development and improvement on your stack"</li>
+                    <li>"4 AI GPUs with 24GB+ VRAM"</li>
+                    <li>"4 000 GB RAM"</li>
+                    <li>"500 CPU Cores"</li>
+                    <li>"1 200 TB General Purpose Distributed Storage"</li>
+                </ul>
+                <div class="spacer"></div>
+                <p class="margin-x-1">"We can customize our offering around this base package. Let us know what you need."</p>
+                <p class="margin-x-1">"We can deliver, fast : 2 clusters available within 3 days."</p>
+                <p class="margin-x-1">"1 month lead time for more clusters."</p>
+                <p class="font-bold text-center text-4">"55 555 CAD / Month"</p>
+                <p class="font-bold text-center text-4">"555 555 CAD / Year"</p>
+            </div>
+        </div>
+    }
+}

sreez/src/pages/mod.rs

@@ -0,0 +1,2 @@
+mod home_page;
+pub use home_page::*;

sreez/style/main.scss

@@ -0,0 +1,124 @@
+body {
+	font-family: sans-serif;
+	text-align: center;
+  font-size: 1.25rem;
+}
+
+
+.font-size-4xl {
+  font-size: 3rem;
+}
+
+.font-size-xl {
+  font-size: 1.5rem;
+}
+
+.color-gray {
+  color: gray
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.margin-x-1 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.margin-y-4 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.margin-x-3 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.card-list {
+  text-align: left;
+  justify-content: center;
+  .card {
+    max-width: 400px;
+    border: solid 3px black;
+    border-radius: 20px;
+    margin: 30px;
+    display: flex;
+    flex-direction: column;
+
+    .spacer {
+      flex-grow: 1;
+    }
+
+    h3 {
+      text-align: center;
+      margin-bottom: 30px;
+      margin-top: 30px;
+    }
+
+    ul {
+      list-style-type: disc;
+      padding-right: 15px;
+      li {
+        padding-bottom: 10px;
+      }
+    }
+  }
+}
+
+.md-container {
+  max-width: 800px;
+  margin: auto;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+ol.huge-list-markers li{
+  margin-bottom: 5rem;
+  &::marker {
+    font-size: 4rem;
+    font-weight: 800;
+    margin: 2rem;
+  }
+}
+
+.text-3x {
+  font-size: 3rem;
+}
+
+.text-4x {
+  font-size: 4rem;
+}
+
+.font-bold {
+  font-weight: 800;
+}
+
+.max-width-400 {
+  max-width: 400px;
+}