12 files changed, 1435 insertions, 0 deletions
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..699c2d7
--- /dev/null
+++ b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
new file mode 100644
index 0000000..a82378d
--- /dev/null
+++ b/assets/.DS_Store
diff --git a/assets/bio-photos/.DS_Store b/assets/bio-photos/.DS_Store
new file mode 100755
index 0000000..1f352fc
--- /dev/null
+++ b/assets/bio-photos/.DS_Store
diff --git a/assets/bio-photos/joseph.jpg b/assets/bio-photos/joseph.jpg
new file mode 100644
index 0000000..bda19ac
--- /dev/null
+++ b/assets/bio-photos/joseph.jpg
diff --git a/assets/bio-photos/michael.jpg b/assets/bio-photos/michael.jpg
new file mode 100755
index 0000000..0f78b57
--- /dev/null
+++ b/assets/bio-photos/michael.jpg
diff --git a/assets/chicken_ordinance_final1.pdf b/assets/chicken_ordinance_final1.pdf
new file mode 100755
index 0000000..3f65258
--- /dev/null
+++ b/assets/chicken_ordinance_final1.pdf
diff --git a/assets/favicon.png b/assets/favicon.png
new file mode 100644
index 0000000..812644e
--- /dev/null
+++ b/assets/favicon.png
diff --git a/assets/fonts/popsky.ttf b/assets/fonts/popsky.ttf
new file mode 100644
index 0000000..2402a0d
--- /dev/null
+++ b/assets/fonts/popsky.ttf
diff --git a/assets/fonts/utopia.ttf b/assets/fonts/utopia.ttf
new file mode 100644
index 0000000..b051a29
--- /dev/null
+++ b/assets/fonts/utopia.ttf
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..2103709
--- /dev/null
+++ b/index.html
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="description" content="Sensible Scholars Tutoring LLC - beyond the classroom: deeper learning, lasting success.">
+    <link rel="stylesheet" href="styles.css">
+
+    <title>Sensible Scholars Tutoring</title>
+    <link rel="icon" href="assets/favicon.png"/>
+
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <nav id="hamburger-box" class="flex-row" tabindex="-1">
+        <button id="hamburger-btn" class="openbtn" onclick="openNav()">☰</button>
+        <h3 style="color: white; position: fixed; top: 8px; right: 5px; padding-right: 10px;">
+            <img class="logo-img logo-nav" src="assets/favicon.png" alt="Sensible Scholars Logo"/>
+        </h3>
+    </nav>
+    <nav id="sidepanel" class="sidepanel" aria-label="drawer-navigation">
+        <div class="sidepanel-menu">
+            <img class="logo-img" src="assets/favicon.png" alt="Sensible Scholars Logo" />
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" tabindex="-1">×</a>
+            <a href="#about" class="link" tabindex="-1">about</a>
+            <a href="#services" class="link" tabindex="-1">services</a>
+            <a href="#people" class="link" tabindex="-1">people</a>
+            <a href="#contact" class="link" tabindex="-1">contact</a>
+        </div>
+    </nav>
+    <header>
+        <nav class="nav-flex" aria-label="primary-navigation">
+            <img class="logo-img" src="assets/favicon.png" alt="Sensible Scholars Logo" tabindex="-1" />
+            <div class="flex-row">
+                <a class="link" href="#about">about</a>
+                <a class="link" href="#services">services</a>
+                <a class="link" href="#people">people</a>
+                <a class="link" href="#contact">contact</a>
+            </div>
+        </nav>
+        <section class="title-flex" id="#top">
+            <article class="title-info-flex">
+                <!-- <figure class="video-title-wrapper">
+                    <video src="assets/uiux-logo-blue.mp4" id="video-title" autoplay muted></video>
+                    <div class="hide-border"></div>
+                </figure> -->
+
+                <article class="course-title-wrapper">
+                    <h3 class="course-name">Welcome to</h3>
+                    <h1>Sensible Scholars</h1>
+                    <h2>Beyond the Classroom: Deeper Learning, Lasting Success.</h2>
+                </article>
+            </article>
+            <!-- <figure class="pastries-wrapper">
+                <iframe tabindex="-1" id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/'></iframe>
+            </figure> -->
+        </section>
+
+    </header>
+
+    <main>
+<!--            <section id="weekly_specials">-->
+<!--                <div class="conic-border">-->
+<!--                    <h2>-->
+<!--                        Weekly Specials Here-->
+<!--                    </h2>-->
+<!--                </div>-->
+<!--            </section>-->
+
+        <!-- <section id="important_links">
+            <h2 class="title">important links</h2>
+
+            <div id="helpful-links-box" class="flex-column">
+
+                <div class="flex-column">
+                    <h3 class="subtitles">websites</h3>
+                    <a href="https://edstem.org/us/courses/26929/discussion/" target="_blank" class="button helpful-link glow-on-hover">
+                        <img src="./assets/edstem.png" class="small-icon" alt="EdStem Logo">
+                        <h3>edstem →</h3>
+                    </a>
+                    <a href="https://canvas.brown.edu/courses/1089551" target="_blank" class="button helpful-link glow-on-hover">
+                        <img src="./assets/canvas.png" class="small-icon" alt="Canvas Logo">
+                        <h3>canvas →</h3>
+                    </a>
+                    <a href="https://script.google.com/a/macros/brown.edu/s/AKfycbxqAcEtc8CDcIBZ16quZ6Sqsprz_QTZUkpLWkNhSkSltuVgktNqblDQABOSCQCdAKwL1g/exec" target="_blank" class="button helpful-link glow-on-hover">
+                        <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m5.5.5h6v5h-6z"></path><path d="m10.5 11.5h6v5h-6z"></path><path d="m.5 11.5h6v5h-6z"></path><path d="m3.498 11.5v-3h10v3"></path><path d="m8.5 8.5v-3"></path></g></svg>
+                        <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m5.5.5h6v5h-6z"></path><path d="m10.5 11.5h6v5h-6z"></path><path d="m.5 11.5h6v5h-6z"></path><path d="m3.498 11.5v-3h10v3"></path><path d="m8.5 8.5v-3"></path></g></svg>
+                        <h3>ux factor →</h3>
+                    </a>
+                </div>
+
+                <div class="flex-column">
+                    <h3 class="subtitles">course docs</h3>
+                    <a href="https://docs.google.com/document/d/1zx6C_jwRaMo2GwsZMk3DtwxufRsIEBC_njWF8kkxCbs/edit?usp=sharing" target="_blank" class="no-border-helpful-link link">
+                        <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 3)"><path d="m12.5 12.5v-7l-5-5h-5c-1.1045695 0-2 .8954305-2 2v10c0 1.1045695.8954305 2 2 2h8c1.1045695 0 2-.8954305 2-2z"></path><path d="m7.5.5v3c0 1.1045695.8954305 2 2 2h3"></path></g></svg>
+                        <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 3)"><path d="m12.5 12.5v-7l-5-5h-5c-1.1045695 0-2 .8954305-2 2v10c0 1.1045695.8954305 2 2 2h8c1.1045695 0 2-.8954305 2-2z"></path><path d="m7.5.5v3c0 1.1045695.8954305 2 2 2h3"></path></g></svg>
+                        <h3>syllabus</h3>
+                    </a>
+                    <a href="https://drive.google.com/file/d/1Q6-dWIEStkAzwipkxexBSP4EInUAvYel/view?usp=sharing" target="_blank" class="no-border-helpful-link link">
+                        <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m2.5.48528137h11c.5522847 0 1 .44771525 1 1v8.01471863h-13v-8.01471863c0-.55228475.44771525-1 1-1z"></path><path d="m1.11803399 9.5h13.76393201c.5522848 0 1 .44771525 1 1 0 .1552451-.0361451.3083582-.1055728.4472136l-1.2763932 2.5527864h-13l-1.2763932-2.5527864c-.24698925-.4939785-.0467649-1.09465154.44721359-1.34164079.13885544-.06942772.2919685-.10557281.4472136-.10557281z" transform="matrix(1 0 0 -1 0 23)"></path></g></svg>
+                        <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m2.5.48528137h11c.5522847 0 1 .44771525 1 1v8.01471863h-13v-8.01471863c0-.55228475.44771525-1 1-1z"></path><path d="m1.11803399 9.5h13.76393201c.5522848 0 1 .44771525 1 1 0 .1552451-.0361451.3083582-.1055728.4472136l-1.2763932 2.5527864h-13l-1.2763932-2.5527864c-.24698925-.4939785-.0467649-1.09465154.44721359-1.34164079.13885544-.06942772.2919685-.10557281.4472136-.10557281z" transform="matrix(1 0 0 -1 0 23)"></path></g></svg>
+                        <h3>software guide</h3>
+                    </a>
+                    <a href="https://docs.google.com/document/d/11K3CIrPwzHYrqrcMbNx3_UPys9OL9ao2eNIuTuzU9oE/edit?usp=sharing" target="_blank" class="no-border-helpful-link link">
+                        <svg class="svg-show" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)"><line x1="10.5" x2="6.5" y1=".5" y2="14.5"></line><polyline points="7.328 2.672 7.328 8.328 1.672 8.328" transform="rotate(135 4.5 5.5)"></polyline><polyline points="15.328 6.672 15.328 12.328 9.672 12.328" transform="scale(1 -1) rotate(-45 -10.435 0)"></polyline></g></svg>
+                        <svg class="svg-hover" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)"><line x1="10.5" x2="6.5" y1=".5" y2="14.5"></line><polyline points="7.328 2.672 7.328 8.328 1.672 8.328" transform="rotate(135 4.5 5.5)"></polyline><polyline points="15.328 6.672 15.328 12.328 9.672 12.328" transform="scale(1 -1) rotate(-45 -10.435 0)"></polyline></g></svg>
+                        <h3>deployment guide</h3>
+                    </a>
+                    <a href="https://docs.google.com/document/d/1j_cQl3CWlFYx9ZtopXBJfgz8cyxkZWyjumSXQgFZLwQ/edit?usp=sharing" target="_blank" class="no-border-helpful-link link">
+                      <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m13.5 0 3 4-8 10-8-10 3.009-4z"/><path d="m.5 4h16"/><path d="m5.5 4 3 10"/><path d="m11.5 4-3 10"/><path d="m3.509 0 1.991 4 3-4 3 4 2-4"/></g></svg>
+                      <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m13.5 0 3 4-8 10-8-10 3.009-4z"/><path d="m.5 4h16"/><path d="m5.5 4 3 10"/><path d="m11.5 4-3 10"/><path d="m3.509 0 1.991 4 3-4 3 4 2-4"/></g></svg>
+                      <h3>ui camp info</h3>
+                    </a>
+                   <a href="https://drive.google.com/file/d/1t65-GnOYfzcRswOflgegF5e930FuekwH/view?usp=sharing" target="_blank" class="no-border-helpful-link link">
+                      <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m2.5.48528137h11c.5522847 0 1 .44771525 1 1v8.01471863h-13v-8.01471863c0-.55228475.44771525-1 1-1z"></path><path d="m1.11803399 9.5h13.76393201c.5522848 0 1 .44771525 1 1 0 .1552451-.0361451.3083582-.1055728.4472136l-1.2763932 2.5527864h-13l-1.2763932-2.5527864c-.24698925-.4939785-.0467649-1.09465154.44721359-1.34164079.13885544-.06942772.2919685-.10557281.4472136-.10557281z" transform="matrix(1 0 0 -1 0 23)"></path></g></svg>
+                      <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m2.5.48528137h11c.5522847 0 1 .44771525 1 1v8.01471863h-13v-8.01471863c0-.55228475.44771525-1 1-1z"></path><path d="m1.11803399 9.5h13.76393201c.5522848 0 1 .44771525 1 1 0 .1552451-.0361451.3083582-.1055728.4472136l-1.2763932 2.5527864h-13l-1.2763932-2.5527864c-.24698925-.4939785-.0467649-1.09465154.44721359-1.34164079.13885544-.06942772.2919685-.10557281.4472136-.10557281z" transform="matrix(1 0 0 -1 0 23)"></path></g></svg>
+                      <h3>html cheat sheet</h3>
+                  </a>
+                </div>
+
+                <div class="flex-column">
+                    <h3 class="subtitles">forms</h3>
+                        <a href="https://forms.gle/jpaWjoDhp7LBfVk27" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2.5 1.5)"><path d="m10 3h2.3406038c.4000282 0 .7615663.23839685.9191451.6060807l2.7402511 6.3939193v4c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-4l2.74025113-6.3939193c.15757879-.36768385.51911692-.6060807.91914503-.6060807h2.34060384"></path><path d="m10.121 3.964-.06 4.182-4.182.061" transform="matrix(.70710678 .70710678 -.70710678 .70710678 6.646598 -3.874306)"></path><path d="m8 0v9"></path><path d="m0 10h4c.55228475 0 1 .4477153 1 1v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1v-1c0-.5522847.4477153-1 1-1h4"></path></g></svg>
+                            <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2.5 1.5)"><path d="m10 3h2.3406038c.4000282 0 .7615663.23839685.9191451.6060807l2.7402511 6.3939193v4c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-4l2.74025113-6.3939193c.15757879-.36768385.51911692-.6060807.91914503-.6060807h2.34060384"></path><path d="m10.121 3.964-.06 4.182-4.182.061" transform="matrix(.70710678 .70710678 -.70710678 .70710678 6.646598 -3.874306)"></path><path d="m8 0v9"></path><path d="m0 10h4c.55228475 0 1 .4477153 1 1v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1v-1c0-.5522847.4477153-1 1-1h4"></path></g></svg>
+                          <h3>waitlist form</h3>
+                        </a>
+                        <a href="https://forms.gle/g6XehaWqFnMy512E9" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2.5 1.5)"><path d="m10 3h2.3406038c.4000282 0 .7615663.23839685.9191451.6060807l2.7402511 6.3939193v4c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-4l2.74025113-6.3939193c.15757879-.36768385.51911692-.6060807.91914503-.6060807h2.34060384"></path><path d="m10.121 3.964-.06 4.182-4.182.061" transform="matrix(.70710678 .70710678 -.70710678 .70710678 6.646598 -3.874306)"></path><path d="m8 0v9"></path><path d="m0 10h4c.55228475 0 1 .4477153 1 1v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1v-1c0-.5522847.4477153-1 1-1h4"></path></g></svg>
+                            <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2.5 1.5)"><path d="m10 3h2.3406038c.4000282 0 .7615663.23839685.9191451.6060807l2.7402511 6.3939193v4c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-4l2.74025113-6.3939193c.15757879-.36768385.51911692-.6060807.91914503-.6060807h2.34060384"></path><path d="m10.121 3.964-.06 4.182-4.182.061" transform="matrix(.70710678 .70710678 -.70710678 .70710678 6.646598 -3.874306)"></path><path d="m8 0v9"></path><path d="m0 10h4c.55228475 0 1 .4477153 1 1v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1v-1c0-.5522847.4477153-1 1-1h4"></path></g></svg>
+                            <h3>assignment handin form</h3>
+                        </a>
+                        <a href="https://forms.gle/znN9WvgQn6oDfkHVA" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="25" viewBox="0 0 48 48" width="25" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(-5 2)">
+                                <path d="M23.1 29.2q.4.4.925.4t.975-.4l4.7-4.7q.2-.2.2-.45t-.2-.4q-.1-.1-.35-.1-.25 0-.45.1l-4.35 4.25v-9.5q0-.2-.175-.35-.175-.15-.375-.15-.25 0-.4.15-.15.15-.15.35v9.5l-4.3-4.2q-.2-.15-.425-.15-.225 0-.375.1-.15.15-.15.4t.2.4Zm-11.8 9.1h25.4q.6 0 1.1-.5.5-.5.5-1.1V11.3q0-.6-.5-1.1-.5-.5-1.1-.5H11.3q-.6 0-1.1.5-.5.5-.5 1.1v25.4q0 .6.5 1.1.5.5 1.1.5ZM9.7 9.7v28.6V9.7Zm1.6 29.7q-1.1 0-1.9-.8-.8-.8-.8-1.9V11.3q0-1.1.8-1.9.8-.8 1.9-.8h10.25q-.65-1.4.15-2.7.8-1.3 2.3-1.3 1.55 0 2.35 1.3t.1 2.7H36.7q1.1 0 1.9.8.8.8.8 1.9v25.4q0 1.1-.8 1.9-.8.8-1.9.8ZM24 8.9q.65 0 1.125-.45T25.6 7.3q0-.65-.475-1.1-.475-.45-1.125-.45t-1.1.45q-.45.45-.45 1.1 0 .7.45 1.15.45.45 1.1.45Z"/>
+                            </g></svg>
+                            <svg class="svg-hover" height="25" viewBox="0 0 48 48" width="25" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(-5 2)">
+                                <path d="M23.1 29.2q.4.4.925.4t.975-.4l4.7-4.7q.2-.2.2-.45t-.2-.4q-.1-.1-.35-.1-.25 0-.45.1l-4.35 4.25v-9.5q0-.2-.175-.35-.175-.15-.375-.15-.25 0-.4.15-.15.15-.15.35v9.5l-4.3-4.2q-.2-.15-.425-.15-.225 0-.375.1-.15.15-.15.4t.2.4Zm-11.8 9.1h25.4q.6 0 1.1-.5.5-.5.5-1.1V11.3q0-.6-.5-1.1-.5-.5-1.1-.5H11.3q-.6 0-1.1.5-.5.5-.5 1.1v25.4q0 .6.5 1.1.5.5 1.1.5ZM9.7 9.7v28.6V9.7Zm1.6 29.7q-1.1 0-1.9-.8-.8-.8-.8-1.9V11.3q0-1.1.8-1.9.8-.8 1.9-.8h10.25q-.65-1.4.15-2.7.8-1.3 2.3-1.3 1.55 0 2.35 1.3t.1 2.7H36.7q1.1 0 1.9.8.8.8.8 1.9v25.4q0 1.1-.8 1.9-.8.8-1.9.8ZM24 8.9q.65 0 1.125-.45T25.6 7.3q0-.65-.475-1.1-.475-.45-1.125-.45t-1.1.45q-.45.45-.45 1.1 0 .7.45 1.15.45.45 1.1.45Z"/>
+                            </g></svg>
+                            <h3 style="margin-left: 0;">studio handin form</h3>
+                        </a>
+                        <a href="https://forms.gle/ALpqhXMTWKdjzbJs6" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-1 0 0 1 20 2)"><path d="m8.5 2.56534572h2c3.3137085 0 6 2.6862915 6 6v1.93465428c0 3.3137085-2.6862915 6-6 6h-2c-3.3137085 0-6-2.6862915-6-6v-1.93465428c0-3.3137085 2.6862915-6 6-6z"></path><path d="m3.94265851-.12029102c-1.05323083.28505997-1.86575682 1.17688618-1.86575682 2.30840383 0 1.16606183.73081563 2.21070886 1.78973019 2.50733508" transform="matrix(.62932039 .77714596 -.77714596 .62932039 2.893856 -1.491094)"></path><path d="m16.9295345-.10708618c-1.0898445.26224883-1.9419712 1.17003523-1.9419712 2.3284815 0 1.16644061.7312905 2.21138754 1.7907622 2.50762392" transform="matrix(-.62932039 .77714596 .77714596 .62932039 24.205765 -11.545558)"></path><path d="m9.5 5.5v4h-3.5"></path><path d="m15 15 2 2"></path><path d="m2 15 2 2" transform="matrix(-1 0 0 1 6 0)"></path></g></svg>
+                            <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-1 0 0 1 20 2)"><path d="m8.5 2.56534572h2c3.3137085 0 6 2.6862915 6 6v1.93465428c0 3.3137085-2.6862915 6-6 6h-2c-3.3137085 0-6-2.6862915-6-6v-1.93465428c0-3.3137085 2.6862915-6 6-6z"></path><path d="m3.94265851-.12029102c-1.05323083.28505997-1.86575682 1.17688618-1.86575682 2.30840383 0 1.16606183.73081563 2.21070886 1.78973019 2.50733508" transform="matrix(.62932039 .77714596 -.77714596 .62932039 2.893856 -1.491094)"></path><path d="m16.9295345-.10708618c-1.0898445.26224883-1.9419712 1.17003523-1.9419712 2.3284815 0 1.16644061.7312905 2.21138754 1.7907622 2.50762392" transform="matrix(-.62932039 .77714596 .77714596 .62932039 24.205765 -11.545558)"></path><path d="m9.5 5.5v4h-3.5"></path><path d="m15 15 2 2"></path><path d="m2 15 2 2" transform="matrix(-1 0 0 1 6 0)"></path></g></svg>
+                            <h3>late pass form</h3>
+                        </a>
+                        <a href="https://forms.gle/X2NND6K3oETECyzR8" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><g transform="matrix(0 -1 1 0 .5 16.5)"><path d="m16.25.75v5h-5.5" transform="matrix(0 1 1 0 10.25 -10.25)"></path><path d="m16 6c-2.8366699-3.33333333-5.6700033-5-8.5-5-2.82999674 0-5.32999674 1-7.5 3"></path></g><g transform="matrix(0 1 -1 0 16 0)"><path d="m16.75.25v5h-5.5" transform="matrix(0 1 1 0 11.25 -11.25)"></path><path d="m16.5 5.5c-2.8366699-3.33333333-5.6700033-5-8.5-5-2.82999674 0-5.32999674 1-7.5 3"></path></g></g></svg>
+                            <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><g transform="matrix(0 -1 1 0 .5 16.5)"><path d="m16.25.75v5h-5.5" transform="matrix(0 1 1 0 10.25 -10.25)"></path><path d="m16 6c-2.8366699-3.33333333-5.6700033-5-8.5-5-2.82999674 0-5.32999674 1-7.5 3"></path></g><g transform="matrix(0 1 -1 0 16 0)"><path d="m16.75.25v5h-5.5" transform="matrix(0 1 1 0 11.25 -11.25)"></path><path d="m16.5 5.5c-2.8366699-3.33333333-5.6700033-5-8.5-5-2.82999674 0-5.32999674 1-7.5 3"></path></g></g></svg>
+                            <h3>regrade request form</h3>
+                        </a>
+                        <a href="https://forms.gle/1hsJewDWJaR83C6q7" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 4 19)"><path d="m15.328 5.672v5.656h-5.656" transform="matrix(-.70710678 .70710678 .70710678 .70710678 15.328661 -6.349339)"></path><path d="m12.5.5v12"></path><path d="m7.328 1.672h-5.656v5.656" transform="matrix(-.70710678 .70710678 .70710678 .70710678 4.500028 -1.863972)"></path><path d="m4.5.5v12"></path></g></svg>
+                            <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 -1 1 0 4 19)"><path d="m15.328 5.672v5.656h-5.656" transform="matrix(-.70710678 .70710678 .70710678 .70710678 15.328661 -6.349339)"></path><path d="m12.5.5v12"></path><path d="m7.328 1.672h-5.656v5.656" transform="matrix(-.70710678 .70710678 .70710678 .70710678 4.500028 -1.863972)"></path><path d="m4.5.5v12"></path></g></svg>
+                            <h3>studio swap form</h3>
+                        </a>
+                        <a href="https://forms.gle/92SruXBpB2Z8hqZB8" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m8.24920737-.79402796c1.17157287 0 2.12132033.94974747 2.12132033 2.12132034v13.43502882l-2.12132033 3.5355339-2.08147546-3.495689-.03442539-13.47488064c-.00298547-1.16857977.94191541-2.11832105 2.11049518-2.12130651.00180188-.00000461.00360378-.00000691.00540567-.00000691z" transform="matrix(.70710678 .70710678 -.70710678 .70710678 8.605553 -3.271644)"></path><path d="m7.5 15.5h8"></path><path d="m13.5 4.5 1 1"></path></g></svg>
+                            <svg class="svg-hover" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m8.24920737-.79402796c1.17157287 0 2.12132033.94974747 2.12132033 2.12132034v13.43502882l-2.12132033 3.5355339-2.08147546-3.495689-.03442539-13.47488064c-.00298547-1.16857977.94191541-2.11832105 2.11049518-2.12130651.00180188-.00000461.00360378-.00000691.00540567-.00000691z" transform="matrix(.70710678 .70710678 -.70710678 .70710678 8.605553 -3.271644)"></path><path d="m7.5 15.5h8"></path><path d="m13.5 4.5 1 1"></path></g></svg>
+                            <h3>feedback form</h3>
+                        </a>
+                        <a href="https://forms.gle/nkF1nxH2z9LVKpkw7" target="_blank" class="no-border-helpful-link link">
+                            <svg class="svg-show" height="25" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="none" fill-rule="evenodd" stroke="#222E50" stroke-linecap="round" stroke-linejoin="round" transform="translate(-2 2)">
+                                <path d="M21.85 39.2H11.3q-1.1 0-1.9-.8-.8-.8-.8-1.9V11.35q0-1.1.775-1.9.775-.8 1.675-.8H21.1q.15-1 .85-1.7t1.8-.7q1.05 0 1.75.7t.9 1.7h10.05q1.1 0 1.9.8.8.8.8 1.9v8.45h-1.1v-8.45q0-.6-.5-1.1-.5-.5-1.1-.5h-5.4v1.45q0 1.1-.8 1.9-.8.8-1.9.8H19.4q-1.1 0-1.9-.8-.8-.8-.8-1.9V9.75h-5.4q-.6 0-1.1.5-.5.5-.5 1.1V36.5q0 .6.5 1.1.5.5 1.1.5h10.55ZM31 36.45 42.25 25.2q.1-.1.35-.125.25-.025.45.125.15.2.15.45t-.15.35l-11.1 11.1q-.4.4-.95.4-.55 0-.95-.4l-5.2-5.25q-.1-.1-.125-.35-.025-.25.175-.45.15-.15.375-.15t.375.15ZM24 10.3q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q24.65 7.3 24.05 7.3q-.7 0-1.125.425-.425.425-.425 1.025 0 .7.425 1.125.425.425 1.075.425Z"/>
+                            </g></svg>
+                            <svg class="svg-hover" height="25" viewBox="0 0 48 48" width="25" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#DA627D" stroke-linecap="round" stroke-linejoin="round" transform="translate(-2 2)">
+                                <path d="M21.85 39.2H11.3q-1.1 0-1.9-.8-.8-.8-.8-1.9V11.35q0-1.1.775-1.9.775-.8 1.675-.8H21.1q.15-1 .85-1.7t1.8-.7q1.05 0 1.75.7t.9 1.7h10.05q1.1 0 1.9.8.8.8.8 1.9v8.45h-1.1v-8.45q0-.6-.5-1.1-.5-.5-1.1-.5h-5.4v1.45q0 1.1-.8 1.9-.8.8-1.9.8H19.4q-1.1 0-1.9-.8-.8-.8-.8-1.9V9.75h-5.4q-.6 0-1.1.5-.5.5-.5 1.1V36.5q0 .6.5 1.1.5.5 1.1.5h10.55ZM31 36.45 42.25 25.2q.1-.1.35-.125.25-.025.45.125.15.2.15.45t-.15.35l-11.1 11.1q-.4.4-.95.4-.55 0-.95-.4l-5.2-5.25q-.1-.1-.125-.35-.025-.25.175-.45.15-.15.375-.15t.375.15ZM24 10.3q.65 0 1.075-.425.425-.425.425-1.075 0-.65-.425-1.075Q24.65 7.3 24.05 7.3q-.7 0-1.125.425-.425.425-.425 1.025 0 .7.425 1.125.425.425 1.075.425Z"/>
+                            </g></svg>
+                            <h3 style="margin-left: 1px;">dean's / doctor's note</h3>
+                        </a>
+                    </div>
+            </div>
+        </section> -->
+
+        <section id="about">
+            <h2 class="title">About Us</h2>
+            <div class="edges important-note">
+                <p>
+                    At Sensible Scholars, we believe tutoring should go beyond homework help — it should inspire curiosity, build confidence, and foster true understanding. Our team is made up of successful students and experienced teaching assistants with years of tutoring under their belts, all united by a passion for helping the next generation excel and reach their academic goals.
+                </p>
+                <p>
+                    After working with a large national tutoring provider, I saw firsthand what works — and what could be better. Sensible Scholars was created to make the changes I always knew were necessary but never had the authority to implement. Here, sessions are fully personalized to meet the needs of each student and their family, with an approach designed to promote critical thinking and a deeper grasp of the material that can sometimes be difficult to achieve in a traditional classroom setting.
+                </p>
+                <p>
+                    We're not just preparing students to pass tests — we're equipping them to think, adapt, and thrive, drawing on personal tips and proven strategies honed through years of academic success.
+                </p>
+            </div>
+        </section>
+
+        <section id="services">
+            <h2 class="title">Services</h2>
+            <article class="faq-content edges">
+                <h3>One-on-One Tutoring</h3>
+                <p>Tailored sessions that meet each student's unique needs and learning style. Perfect for improving grades, mastering new material, or preparing for exams.</p>
+
+                <div class="services-options-list">
+                    <h4>Single Session - $85/hour</h4>
+                    <p>Perfect for targeted help with a specific concept or assignment.</p>
+
+                    <h4>Academic Boost Package - $320 (4 hours, $80/hour)</h4>
+                    <p>Short-term support for upcoming tests or projects.</p>
+
+                    <h4>Semester Success Package - $900 (12 hours, $75/hour)</h4>
+                    <p>Ongoing guidance over several months to build mastery and confidence.</p>
+                </div>
+
+                <h3>Small Group Tutoring (2-4 students)</h3>
+                <p>Learn collaboratively with peers at a reduced rate per student. Ideal for friends or classmates tackling the same topics.</p>
+                <div class="services-options-list">
+                    <h4>Single session - $60/hour per student</h4>
+                    <h4>Academic Boost Package - $220 for 4 hours ($55/hour per student)</h4>
+                </div>
+
+                <h3>Why Choose Us?</h3>
+                <p>Personalized, results-driven instruction.</p>
+                <p>Slightly discounted rates for package commitments.</p>
+                <p>Flexible locations: campus, home, or online.</p>
+                <p>Custom arrangements available upon request.</p>
+            </article>
+        </section>
+
+        <section id="people">
+            <h2 class="title">People</h2>
+
+            <!-- <div id="emails" class="flex-row email-container edges">
+                <div class="email">
+                    <h3 class="subtitles"><a class="link" href="mailto:uiuxtas@lists.cs.brown.edu" target="_blank">uiuxtas@lists.cs.brown.edu</a></h3>
+                    <h4>(email all TAs)</h4>
+                </div>
+                <div class="email">
+                    <h3 class="subtitles"><a class="link" href="mailto:uiuxhtas@lists.cs.brown.edu" target="_blank">uiuxhtas@lists.cs.brown.edu</a></h3>
+                    <h4>(HTAs, Grad TA, &amp; Jeff)</h4>
+                </div>
+                <div class="email">
+                    <h3 class="subtitles"><a class="link" href="mailto:jeff@cs.brown.edu" target="_blank">jeff@cs.brown.edu</a></h3>
+                    <h4>(sensitive issues)</h4>
+                </div>
+            </div> -->
+            <article class="flex-column">
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-box-single ta-wrapper">
+                        <div class="img-box">
+                            <img src="assets/bio-photos/joseph.jpg" class="ta-pastry" alt="Bio photo for Joseph" />
+                        </div>
+                        <div class="bio-text">
+                            <h3>[founder & tutor] Joseph</h3>
+                            <h4>B.S. in Chem E, OSU</h4>
+                            <p>
+                                Joseph is a dedicated educator with a passion for teaching and a strong background in chemical engineering. He believes in fostering a collaborative learning environment where students can thrive.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex-row ta-box-single ta-wrapper">
+                        <div class="img-box">
+                            <img src="assets/bio-photos/michael.jpg" class="ta-pastry" alt="Bio photo for Michael" />
+                        </div>
+                        <div class="bio-text">
+                            <h3>[cto & tutor] Michael</h3>
+                            <h4>M.S. in CS & B.S. in Physics, Brown University</h4>
+                            <p>
+                                Michael is a passionate educator with a strong background in both computer science and physics. 
+                                He enjoys integrating concepts from both fields to create a rich learning experience for his students.
+                            </p>
+                        </div>
+                    </div>
+
+                </div>
+            </article>
+        </section>
+
+        <section id="contact">
+            <h2 class="title">Contact</h2>
+            <article class="faq-content edges">
+                <h3>Free 20 minute consultation</h3>
+                <p>If you're interested in our services, we offer a free 20 minute consultation to discuss your needs.</p>
+                <p>Please email <a class="link" href="mailto:sensiblescholars@gmail.com" target="_blank">sensiblescholars@gmail.com</a> or click the button below:</p>
+                <a class="glow-on-hover button" href="https://forms.gle/V1VQ2zMWAKWzEXEs8" target="_blank">Schedule Consultation →</a>
+            </article>
+
+            <footer>
+                <p>made with <a tabindex="-1" class="glow-on-hover rainbow" style="color: #FF1493; text-decoration: none; cursor: default;" target="_blank" href="./assets/chicken_ordinance_final1.pdf">&hearts;</a> in Chesterland, OH</p>
+            </footer>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100755
index 0000000..95ad419
--- /dev/null
+++ b/script.js
@@ -0,0 +1,42 @@
+// const THRESHOLD_FIDELITY = 150;
+
+// accessibility tab index
+const sectionsAndHeaders = document.querySelectorAll('section, header');
+sectionsAndHeaders.forEach(ele => ele.tabIndex = "0");
+
+// mutation observer for the video element
+// const videoTitle = document.querySelector('#video-title');
+
+// // const pastryIframe = document.querySelector('#connie-pastries')
+
+// const observer = new IntersectionObserver(entries => {
+//     // note - if the boundingClientRect.y is negative, then they are scrolling down
+//     // note - since using id, only 1 entry
+//     const {intersectionRatio} = entries[0];
+//     if (intersectionRatio !== 1) {
+//         videoTitle.currentTime = 5 - 3 * intersectionRatio;
+//     } else {
+//         videoTitle.currentTime = 2;
+//     }
+// }, {
+//     threshold: [...Array(THRESHOLD_FIDELITY).keys()].map(num => num/THRESHOLD_FIDELITY),
+//     rootMargin: '-100px 0px 0px 0px'
+// });
+
+// after two seconds pause the video
+// setTimeout(() => {
+//     videoTitle.pause();
+//     videoTitle.currentTime = 2;
+//     observer.observe(videoTitle);
+// }, 2500)
+
+// borrowed from https://www.w3schools.com/howto/howto_js_collapse_sidepanel.asp
+/* Set the width of the sidebar to 250px (show it) */
+openNav = () => {
+    document.querySelector('#sidepanel').style.width = "250px";
+}
+
+/* Set the width of the sidebar to 0 (hide it) */
+closeNav = () => {
+    document.querySelector('#sidepanel').style.width = "0";
+}
+\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100755
index 0000000..371863f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,1105 @@
+/*
+vars, color, and fonts
+ */
+ :root {
+    /* define the color pallet */
+    /*--primary-color: #D1F7FF;*/
+    --primary-color: #ffffff;
+    --secondary-color: #f5f5f5;
+    --accent-color: #B22222;
+    --second-accent-color: #1a237e;
+}
+
+@font-face {
+    font-family: utopia;
+    src: url('assets/fonts/utopia.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: popsky;
+    src: url('assets/fonts/popsky.ttf') format('truetype');
+}
+
+/* minimalist reset */
+* {
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+    line-height: 1.5;
+    background-color: rgb(30, 30, 30);
+    color: #303030;
+    font-weight: 300;
+}
+
+p {
+    line-height: 1.2;
+}
+/*
+body and main container
+ */
+
+/* media should not be inline, but be blocks */
+/* media shouldn't break out of their container */
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
+.main-container {
+    background-color: transparent;
+    width: 100%;
+    display: block;
+    margin: 0 auto;
+}
+
+/*
+section format + colors
+ */
+
+section, header {
+    padding: 4rem 2rem 4rem 2rem;
+}
+
+section:nth-child(even) {
+    background-color: var(--primary-color);
+}
+
+
+section:nth-child(odd) {
+    background-color: var(--secondary-color);
+}
+
+.title, .title-info-flex, .edges{
+    text-align: left;
+    padding: 0 5rem;
+}
+
+.title {
+    color: var(--accent-color);
+}
+
+h2 {
+    font-size: 2.5rem;
+}
+
+strong {
+    color: var(--accent-color);
+    font-weight: 800;
+}
+
+
+/*
+header color will be that blue
+ */
+
+header {
+    background-color: var(--primary-color);
+    position: relative;
+    overflow: hidden;
+    padding-top: 2rem;
+}
+
+/*
+nav bar (logo and anchors)
+ */
+
+nav {
+    margin: 0 20px 15px 20px;
+    padding: 0;
+}
+
+.nav-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5vw;
+}
+
+.nav-flex > .flex-row > a {
+    margin-bottom: 30px;
+    display: block;
+    margin-left: 5vw;
+}
+
+.nav-flex > .flex-row {
+    justify-content: space-between;
+    width: fit-content;
+}
+
+.logo-img {
+    width: 80px;
+    height: 80px;
+    padding: 0;
+    border-radius: 20px;
+}
+
+.logo-nav {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+}
+
+.button:hover, .button:focus {
+    /* goal - make it look clickable */
+    transition-duration: .2s;
+    font-size: 107%;
+}
+
+/* Adapted from https://www.w3schools.com/howto/howto_js_collapse_sidepanel.asp */
+
+/* The sidepanel menu */
+.sidepanel {
+    height: 100vh;
+    width: 0;
+    position: fixed;
+    z-index: 101;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    transition: 0.4s;
+    margin: 0;
+    background-color: #222E50ee;
+}
+
+.sidepanel-menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+}
+
+.sidepanel a {
+    text-decoration: none;
+    font-size: 25px;
+    color: white;
+    display: block;
+    transition: 0.3s;
+    margin-bottom: 10px;
+}
+
+.sidepanel .logo-img {
+    margin-bottom: 20px;
+}
+
+.sidepanel .link::before{
+    background-color: var(--secondary-color);
+}
+
+
+/* When you mouse over the navigation links, change their color */
+.sidepanel a:hover {
+    color: #2BB673;
+}
+
+/* Position and style the close button (top right corner) */
+.sidepanel .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+
+#hamburger-box {
+    padding: 10px;
+    position: fixed;
+    height: fit-content;
+    top: 0;
+    width: 100%;
+    justify-content: space-between;
+    background-color: rgb(43,42,45,0.6);
+    margin: 0;
+    display: none;
+    z-index: 100;
+}
+
+/* Style the button that is used to open the sidepanel */
+.openbtn {
+    font-size: 30px;
+    cursor: pointer;
+    background-color: rgb(0,0,0,0);
+    color: white;
+    border: none;
+    padding: 0;
+}
+
+
+.openbtn:hover {
+    background-color: #444;
+}
+
+/* Link Styling - https://codepen.io/team/css-tricks/pen/xxPORam */
+.link {
+    text-decoration: none;
+    position: relative;
+    color: var(--accent-color);
+    font-weight: 700;
+}
+
+.link::before {
+    content: "";
+    background-color: #0000ff77;
+    position: absolute;
+    left: 0;
+    bottom: -0.125rem;
+    width: 100%;
+    height: 2px;
+    z-index: 5;
+    transition: all 0.2s ease-out;
+}
+
+.link:hover::before {
+    bottom: 0;
+    height: 100%;
+    background-color: #0000ff22;
+    border-radius: 5%;
+    transform: scale(1.1);
+}
+
+/*
+title area (animated text and connie's 3d model)
+ */
+.title-flex {
+    display: flex;
+    justify-content: left;
+    padding: 0;
+    z-index: 1;
+    tab-index: -1;
+}
+
+.title-info-flex {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    max-width: 60vw;
+    align-items: start;
+    tab-index: -1;
+}
+
+.video-title-wrapper {
+    position: relative;
+    z-index: 1;
+    width: clamp(25rem, 35vw, 500px);
+    margin-bottom: 1rem;
+    left: -15px;
+    user-select: none;
+}
+
+#video-title {
+    border-radius: 30px;
+    position: relative;
+    user-select: none;
+}
+
+.hide-border {
+    position: relative;
+    border: solid 4px var(--primary-color);
+    width: calc(100% - 4px);
+    height: 100%;
+    top: -100%;
+    left: -2px;
+    margin: 0;
+    padding: 0;
+    tab-index: -1;
+}
+
+
+.course-title-wrapper {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.course-title-wrapper > h2 {
+    font-family: popsky;
+    font-size: 2rem;
+    margin-top: 1rem;
+    margin-left: .5rem;
+    line-height: 100%;
+}
+
+
+h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    color: var(--accent-color);
+    line-height: .8;
+    z-index: 5;
+}
+
+.course-name {
+    font-size: 2rem;
+    line-height: 1;
+    margin: 10px 0 1rem 0;
+    z-index: 5;
+    font-weight: 500;
+}
+
+
+.pastries-wrapper {
+    /* 16:9 aspect ratio */
+    overflow: hidden;
+    position: absolute;
+    margin: 0;
+    z-index: 2;
+    height: max(450px, 100%);
+    width: 200vw;
+    pointer-events: none;
+    touch-action: none;
+    user-select: none;
+}
+
+#connie-pastries {
+    border: 0;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    pointer-events: none;
+    touch-action: none;
+    user-select: none;
+    left: -35vw;
+    top: -60px;
+    z-index: -1000;
+}
+
+.pastries-business-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+}
+
+.business-hours {
+    z-index: 5;
+    background-color: black;
+    padding: 10px 20px;
+    border-radius: 15px;
+    color: rgb(212, 212, 212);
+    margin-left: 10px;
+}
+
+.business-hours > * {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+
+/*
+weekly specials area
+ */
+
+#weekly_specials {
+    padding: 30px;
+    border: 10px solid var(--primary-color);
+    background-color: transparent;
+}
+
+#weekly_specials * {
+    background-color: var(--primary-color);
+}
+
+#weekly_specials > * {
+    padding: 10px;
+}
+
+/*
+course info section
+ */
+
+.button {
+    /* goal - make it look clickable */
+    display: block;
+    padding: 5px 10px;
+    text-align: center;
+    border-radius: 10px;
+    color: black;
+    font-weight: bold;
+    line-height: 25px;
+    text-decoration: none;
+
+    border: 3px solid #0000ff66;
+    background-color: white;
+
+    width: fit-content;
+
+    margin-top: 1rem;
+}
+
+/*
+full menu & ta_calendar
+ */
+
+.iframe-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 2rem 12rem;
+}
+
+.important-note > p {
+    margin-bottom: .5rem;
+    color: black;
+}
+
+.important-note > a {
+    margin-top: 1rem;
+}
+
+.embedded-iframe {
+    width: 100%;
+    height: max(60vh, 600px);
+    display: block;
+}
+
+#calendar p {
+    margin-bottom: 0.5rem;
+}
+
+/*
+services area
+*/
+#services h3 {
+    padding-top: 1rem;
+    padding-bottom: 0.25rem;
+    line-height: 1.2;
+    color: var(--accent-color);
+}
+
+#services p {
+    color: black;
+}
+
+#services {
+    align-items: center;
+}
+
+.services-options-list {
+    margin-top: .1rem;
+    margin-left: .2rem;
+}
+
+.services-options-list h4 {
+    color: var(--second-accent-color);
+}
+
+.services-options-list p {
+    margin-bottom: .25rem;
+    line-height: 1;
+}
+
+
+/*
+convenience for helpful links
+ */
+
+.subtitles {
+    color: var(--accent-color);
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.email-container {
+    display: flex;
+    justify-content: left;
+    margin-bottom: 50px;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.flex-right {
+    align-items: flex-end;
+}
+
+.flex-space-between {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.small-icon {
+    height: 25px;
+    width: auto;
+    margin-right: 10px;
+}
+
+#helpful-links-box {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: space-between;
+    margin: 1rem auto 0 auto;
+    padding: 0 12rem;
+}
+
+.helpful-link {
+    text-decoration: none;
+    color: var(--second-accent-color);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 150px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: 3px solid #0000ff66;
+    margin: 10px 0;
+    background-color: white;
+}
+
+.helpful-link h3 {
+    color: var(--second-accent-color);
+    margin-left: 5px;
+}
+
+.helpful-link:hover h3 {
+    /*color: #706881;*/
+    /*font-size: 107%;*/
+}
+
+.helpful-link:hover {
+    background-color: white;
+    color: black;
+}
+
+.helpful-link .svg-hover {
+    display: none;
+}
+.helpful-link:hover .svg-show {
+    display: none;
+}
+.helpful-link:hover .svg-hover {
+    display: inline;
+}
+
+.no-border-helpful-link .svg-hover {
+    display: none;
+}
+.no-border-helpful-link:hover .svg-show {
+    display: none;
+}
+.no-border-helpful-link:hover .svg-hover {
+    display: inline;
+}
+
+.no-border-helpful-link {
+    color: var(--second-accent-color);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: fit-content;
+    margin: 10px 0;
+    text-decoration: none;
+}
+
+.no-border-helpful-link h3 {
+    color: var(--second-accent-color);
+    margin-left: 5px;
+}
+.no-border-helpful-link:hover h3 {
+    color: #DA627D;
+}
+
+.no-border-helpful-link:hover {
+    color: #DA627D;
+}
+
+
+/*
+people area
+ */
+.email {
+    border-left: 3px solid var(--accent-color);
+    padding-left: 10px;
+    margin-right: 30px;
+}
+
+.shelf {
+    align-items: left;
+}
+
+.ta-box-left, .ta-box-right {
+    margin: 0 10px;
+}
+
+.ta-box-left .img-box, .ta-box-single .img-box {
+    margin-right: 10px;
+}
+
+.ta-box-right .img-box {
+    margin-left: 10px;
+}
+
+.ta-pastry {
+    width: 120px;
+    max-width: 175px;
+    height: auto;
+    text-shadow: 0 0 25px brown;
+    z-index: 1;
+    align-self: flex-end;
+    opacity: 1;
+    transition: .5s ease;
+    border-radius: 30px;
+}
+
+.bio-text {
+    justify-content: center;
+    font-size: 120%;
+    padding: 5px;
+    color: black;
+}
+
+.bio-text h3 {
+    color: var(--accent-color);
+    margin: 0;
+}
+
+.bio-text p {
+    font-size: 12px;
+    letter-spacing: normal;
+    text-transform: none;
+    max-width: 250px;
+    line-height: 1.25;
+    font-weight: normal;
+    color: rgb(30, 30, 30);
+}
+
+.bio-text h4 {
+    font-size: 14px;
+    letter-spacing: normal;
+    text-transform: none;
+    max-width: 400px;
+    line-height: 1.25;
+    color: var(--second-accent-color);
+}
+
+.shelf-png {
+    width: 900px;
+    height: auto;
+    margin-top: -30px;
+}
+.img-box {
+    display: flex;
+    cursor: default;
+    position: relative;
+    height: 100%;
+    margin-bottom: 3px;
+}
+.ta-img {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    top: calc(50% - 5px);
+    left: 50%;
+    height: 120px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+}
+/* .img-box:hover .ta-pastry{
+    opacity: 0;
+} */
+
+.img-box:hover .ta-img {
+    opacity: 1;
+}
+
+.shelf .flex-row {
+    align-items: flex-end;
+    justify-content: left;
+    padding: 0 5rem;
+}
+
+.ta-wrapper:not(:last-child) {
+  margin-bottom: 35px;
+}
+
+
+/*
+contact area
+ */
+#contact h3{
+    padding-top: 1rem;
+    line-height: 1.2;
+    color: var(--accent-color);
+}
+
+#contact h2 {
+    margin-top: 0;
+    line-height: 1.2;
+    color: var(--accent-color);
+}
+
+#contact {
+    padding-bottom: 1rem;
+    align-items: center;
+}
+
+.faq-content {
+    max-width: 60%;
+}
+
+footer {
+    padding-top: 1.5rem;
+    text-align: right;
+}
+
+img {
+    height: 100px;
+    width: auto;
+}
+
+/* nav bar drawer */
+#nav-links {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#nav-links > * {
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+}
+
+#nav {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    align-self: flex-start; /* makes flex element only as vertically large as needed for sticky */
+    flex-direction: column;
+    width: 12rem;
+    text-align: center;
+    z-index: 999;
+    background-color: #a6b198;
+    margin: 0;
+    padding: 1rem;
+    height: 100vh;
+}
+
+
+
+@media only screen and (max-width: 1100px) {
+    .title-info-flex, .title, .edges {
+        padding: 0 5%;
+    }
+    .shelf .flex-row {
+        justify-content: left;
+        padding: 0 5%;
+    }
+    .embedded-iframe {
+        width: 90vw;
+    }
+    #helpful-links-box {
+        padding: 0 6rem;
+    }
+}
+
+
+@media only screen and (max-width: 845px) {
+    #emails {
+        width: 90%;
+    }
+    #helpful-links-box {
+        padding: 0 5%;
+    }
+    .no-border-helpful-link {
+        width: 85%;
+    }
+    .faq-content {
+        max-width: 80%;
+    }
+}
+
+@media only screen and (max-width: 720px) {
+    .no-border-helpful-link {
+        width: fit-content;
+    }
+    header {
+        padding: 0 2rem;
+    }
+    section {
+        padding: 2rem 2rem;
+    }
+    #emails {
+        flex-wrap: wrap;
+    }
+    .email {
+        margin-bottom: 1rem;
+        word-break: break-all;
+        font-size: 90%;
+    }
+    .faq-content {
+        max-width: 95%;
+    }
+    .shelf-png {
+        width: 100%;
+    }
+    .ta-box-left, .ta-box-right {
+        max-width: 50%;
+    }
+    .ta-box-left {
+        flex-direction: column-reverse !important;
+        margin: 0 5px;
+    }
+    .ta-box-right {
+        flex-direction: column !important;
+        margin: 0 5px;
+    }
+    .ta-pastry {
+        width: 95%;
+     }
+     .ta-img {
+        height: 150px;
+     }
+     .ta-box-single .ta-img {
+        top: calc(60%);
+        height: 100%;
+     }
+     .ta-box-right .img-box, .ta-box-left .img-box {
+         justify-content: center;
+         margin: 0;
+     }
+    .img-box:hover {
+        margin-top: 25px;
+    }
+    .ta-wrapper {
+        align-items: flex-end !important;
+    }
+    .shelf .flex-row {
+        justify-content: left;
+        padding: 0 5%;
+    }
+    .bio-text {
+        width: 90%;
+    }
+    .ta-box-single .bio-text p {
+        width: 175px;
+    }
+    .iframe-wrapper {
+        margin: 2rem 10rem;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .nav-flex {
+        display: none;
+    }
+    .title-info-flex {
+        margin-top: 40px;
+        margin-bottom: 70px;
+    }
+    .title-flex {
+        justify-content: flex-start;
+    }
+    .business-hours {
+        margin-left: 5px;
+    }
+    .course-title-wrapper {
+        margin-top: 50px;
+    }
+    .video-title-wrapper {
+        padding-left: 0;
+        margin: 0;
+        max-width: 85vw;
+    }
+    .title-info-flex, .title {
+        max-width: 90vw;
+    }
+    #connie-pastries {
+        left: -50vw;
+        top: 80px;
+    }
+    #helpful-links-box {
+        flex-direction: column;
+        padding: 0 5%;
+    }
+    #helpful-links-box .flex-column, #helpful-links-box .button {
+        width: 80%;
+    }
+    #helpful-links-box .subtitles {
+        font-size: 150%;
+    }
+    #helpful-links-box > .flex-column:not(:first-child) {
+        margin-top: 2rem;
+    }
+    #hamburger-box {
+        display: block;
+    }
+    .business-hours {
+        margin-top: 2rem;
+    }
+    section {
+        padding: 3rem 1rem;
+    }
+}
+
+@media only screen and (max-width: 425px) {
+    .pastries-wrapper {
+        display: none;
+    }
+}
+
+/*
+animation for a button to appear and glow on hover
+ */
+.glow-on-hover {
+    outline: none;
+    color: black;
+    cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 10px;
+}
+
+.glow-on-hover:before {
+    content: '';
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--secondary-color), var(--primary-color));
+    position: absolute;
+    top: -2px;
+    left:-2px;
+    background-size: 400%;
+    z-index: -1;
+    filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing 20s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+}
+
+.glow-on-hover.rainbow:before {
+    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+}
+
+.glow-on-hover:active {
+    color: #000;
+}
+
+.glow-on-hover:active:after {
+    background: transparent;
+}
+
+.glow-on-hover:hover:before, .glow-on-hover:focus:before {
+    opacity: 1;
+}
+
+.glow-on-hover:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border-radius: 7px;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
+
+/*
+weekly specials conic border
+ */
+/*.conic-border {*/
+/*    --startDeg: 0deg;*/
+
+/*    border: 7px solid;*/
+/*    border-image-slice: 1;*/
+
+/*    border-image-source: conic-gradient(*/
+/*            from var(--startDeg, 0deg),*/
+/*            #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000*/
+/*    );*/
+
+/*    display: grid;*/
+/*    place-content: center;*/
+/*    box-sizing: border-box;*/
+/*}*/
+
+#guest-reviewers {
+    height: 100%;
+}
+
+.guest-name {
+    color: var(--accent-color);
+}
+
+.guest-role {
+    color: var(--second-accent-color);
+}
+
+.guest-email {
+    
+    color: #857ce1;
+}
+
+.flex-grid-2 {
+    display: flex;
+    justify-content: space-between;
+    vertical-align: top;
+}
+.flex-grid-2 .guest {
+    width: 80%;
+    vertical-align: top;
+}
+
+@media (max-width: 800px) {
+    .flex-grid-2 {
+        display: block;
+   }
+    .flex-grid-2 .guest {
+        width: 100%;
+   }
+}
+
+.guest {
+    margin: 2rem 0 auto 0;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.guest-info {
+    display: flex;
+    vertical-align: top;
+    width: 100%;
+    margin-right: 6%;
+    margin-bottom: 2rem;
+}
+
+.guest-photo {
+    margin-right: 1rem;
+    width: 100px;
+    min-height: 100px;
+    max-height: auto;
+    margin-top: 35px;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+\ No newline at end of file