done except for the drawer

author: Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu> 2022-09-06 07:43:01 -0400
committer: Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu> 2022-09-06 07:43:01 -0400
commit: 2d21c6efd18b8a393b61012a0d805fccc51759c8 (patch)
tree: 631f29aa1696f981d4a2a544da62d3e940e2b297
parent: 5f8787568dbdaa25b2af55e55c04144d459282de (diff)
44 files changed, 1133 insertions, 646 deletions
diff --git a/.DS_Store b/.DS_Store
index 917fe75..58638f6 100644
--- a/.DS_Store
+++ b/.DS_Store
diff --git a/CS 1300.html b/CS 1300.html
index 19f6db4..bfe9083 100644
--- a/CS 1300.html
+++ b/CS 1300.html
@@ -122,7 +122,7 @@
       <img src="./CS 1300_files/succulents-05.png" class="succulent-png">
     </div>
 
-    <div id="helpful-links-box" class="flex-column">
+    <div id="helpful-links-box">
 
       <div class="flex-column" style="margin: 0px 10px;">
         <h2>important</h2>
@@ -132,7 +132,7 @@
             <h3>piazza</h3>
           </a>
           <a style="margin: 10px;" href="https://canvas.brown.edu/" target="_blank" class="helpful-link">
-            <img src="./CS 1300_files/canvas.png" class="small-icon">
+            <img src="assets/canvas.png" class="small-icon">
             <h3>canvas</h3>
           </a>
         </div>
@@ -227,8 +227,6 @@
       <svg class="svg-show" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="#A29BBA" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 6)"><polyline points="12.329 7.328 12.328 1.67 6.671 1.669" transform="scale(1 -1) rotate(45 20.36 0)"></polyline><line x1="13.5" x2=".5" y1="4.5" y2="4.5"></line></g></svg>
       <svg class="svg-hover" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="white" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 6)"><polyline points="12.329 7.328 12.328 1.67 6.671 1.669" transform="scale(1 -1) rotate(45 20.36 0)"></polyline><line x1="13.5" x2=".5" y1="4.5" y2="4.5"></line></g></svg>
     </a>
-
-    <iframe id="schedule-iframe" src="./CS 1300_files/pubhtml.html"></iframe>
   </div>
 
 
@@ -246,7 +244,7 @@
     <iframe id="calendar-iframe" src="./CS 1300_files/embed.html" style="border:solid 1px #777" width="800" height="600" frameborder="0" scrolling="no"></iframe>
   </div>
 
-  <div id="staff" class="flex-column section" style="background-color: #706881;">
+  <div id="staff" class="flex-column" style="background-color: #706881;">
     <div class="header flex-row">
       <img src="./CS 1300_files/succulents-06.png" class="succulent-png">
       <h1 style="color: #2BB673">STAFF</h1>
@@ -272,7 +270,7 @@
       <div class="ta-box-left flex-row">
         <div class="img-box">
           <img src="./CS 1300_files/succulents-jeff.png" class="ta-cactus">
-          <img src="./CS 1300_files/jeff.jpg" class="ta-img">
+          <img src="assets/bio-photos/jeff.jpg" class="ta-img">
         </div>
 
         <div class="flex-column bio-text">
@@ -280,7 +278,7 @@
           <h4>jeff has been teaching cs 1300 for 8 years ever since its inception. he’s studying cs and is an amateur farmer👨‍🌾, plays keyboard in a local band, and holds the world record for tech internships!</h4>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
 
@@ -308,7 +306,7 @@
           </div>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
     <div class="shelf flex-column">
@@ -322,7 +320,7 @@
           <h4>Hello I'm Talie. I'm a PhD student working with Jeff on building systems to improve mental health. You are welcome and encouraged to come ask me for weird bird facts at any time.</h4>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png" style="margin-top: -35px;">
+      <img src="assets/shelf.png" class="shelf-png" style="margin-top: -35px;">
     </div>
 
     <div class="shelf flex-column">
@@ -349,7 +347,7 @@
           </div>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
     <div class="shelf flex-column">
@@ -376,7 +374,7 @@
           </div>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
     <div class="shelf flex-column">
@@ -404,7 +402,7 @@
         </div>
 
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
     <div class="shelf flex-column">
@@ -431,7 +429,7 @@
           </div>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
     <div class="shelf flex-column">
@@ -458,7 +456,7 @@
           </div>
         </div>
       </div>
-      <img src="./CS 1300_files/shelf.png" class="shelf-png">
+      <img src="assets/shelf.png" class="shelf-png">
     </div>
 
 
diff --git a/CS 1300_files/style.css b/CS 1300_files/style.css
index 5e84dee..80a524e 100644
--- a/CS 1300_files/style.css
+++ b/CS 1300_files/style.css
@@ -455,27 +455,28 @@ html {
 	}
 }
 
+
 @media only screen and (max-width: 575px) {
-    #calendar-iframe {
-        max-height: 50vh;
-    }
+	#calendar-iframe {
+		max-height: 50vh;
+	}
 
 	#helpful-links-box .flex-row {
 		flex-direction: column;
 	}
 
-    #emails {
-        flex-direction: column;
-        text-align: center;
-    }
+	#emails {
+		flex-direction: column;
+		text-align: center;
+	}
 
-    #emails .email {
-        border: 0;
-        padding: 0;
-    }
+	#emails .email {
+		border: 0;
+		padding: 0;
+	}
 
-    #cs1300 {
-	    font-size: 50px;
-        margin: 5px 0px;
-    }
+	#cs1300 {
+		font-size: 50px;
+		margin: 5px 0;
+	}
 }
diff --git a/assets/.DS_Store b/assets/.DS_Store
new file mode 100644
index 0000000..4119108
--- /dev/null
+++ b/assets/.DS_Store
diff --git a/assets/bio-photos/.DS_Store b/assets/bio-photos/.DS_Store
new file mode 100644
index 0000000..5008ddf
--- /dev/null
+++ b/assets/bio-photos/.DS_Store
diff --git a/assets/bio-photos/anika.jpg b/assets/bio-photos/anika.jpg
new file mode 100644
index 0000000..7069a4a
--- /dev/null
+++ b/assets/bio-photos/anika.jpg
diff --git a/assets/bio-photos/aubrey.jpg b/assets/bio-photos/aubrey.jpg
new file mode 100644
index 0000000..43ab0c3
--- /dev/null
+++ b/assets/bio-photos/aubrey.jpg
diff --git a/assets/bio-photos/connie.jpg b/assets/bio-photos/connie.jpg
new file mode 100644
index 0000000..6fe04b8
--- /dev/null
+++ b/assets/bio-photos/connie.jpg
diff --git a/assets/bio-photos/dylan.png b/assets/bio-photos/dylan.png
new file mode 100644
index 0000000..b964380
--- /dev/null
+++ b/assets/bio-photos/dylan.png
diff --git a/assets/bio-photos/isaac.jpg b/assets/bio-photos/isaac.jpg
new file mode 100644
index 0000000..ac41a80
--- /dev/null
+++ b/assets/bio-photos/isaac.jpg
diff --git a/CS 1300_files/jeff.jpg b/assets/bio-photos/jeff.jpg
index e219e4c..e219e4c 100644
--- a/CS 1300_files/jeff.jpg
+++ b/assets/bio-photos/jeff.jpg
diff --git a/assets/bio-photos/jenny.jpeg b/assets/bio-photos/jenny.jpeg
new file mode 100644
index 0000000..78f4679
--- /dev/null
+++ b/assets/bio-photos/jenny.jpeg
diff --git a/assets/bio-photos/jessica.jpg b/assets/bio-photos/jessica.jpg
new file mode 100644
index 0000000..fc6c6c2
--- /dev/null
+++ b/assets/bio-photos/jessica.jpg
diff --git a/assets/bio-photos/kelly.png b/assets/bio-photos/kelly.png
new file mode 100644
index 0000000..1b314d5
--- /dev/null
+++ b/assets/bio-photos/kelly.png
diff --git a/assets/bio-photos/lauren.jpeg b/assets/bio-photos/lauren.jpeg
new file mode 100644
index 0000000..aa0018d
--- /dev/null
+++ b/assets/bio-photos/lauren.jpeg
diff --git a/assets/bio-photos/melissa.jpg b/assets/bio-photos/melissa.jpg
new file mode 100644
index 0000000..dd98907
--- /dev/null
+++ b/assets/bio-photos/melissa.jpg
diff --git a/assets/bio-photos/michael.png b/assets/bio-photos/michael.png
new file mode 100644
index 0000000..97de5f3
--- /dev/null
+++ b/assets/bio-photos/michael.png
diff --git a/assets/bio-photos/miku.png b/assets/bio-photos/miku.png
new file mode 100644
index 0000000..f7b9270
--- /dev/null
+++ b/assets/bio-photos/miku.png
diff --git a/assets/bio-photos/nick.png b/assets/bio-photos/nick.png
new file mode 100644
index 0000000..a3090f3
--- /dev/null
+++ b/assets/bio-photos/nick.png
diff --git a/assets/bio-photos/sunny.jpg b/assets/bio-photos/sunny.jpg
new file mode 100644
index 0000000..536f25c
--- /dev/null
+++ b/assets/bio-photos/sunny.jpg
diff --git a/assets/bio-photos/tongyu.png b/assets/bio-photos/tongyu.png
new file mode 100644
index 0000000..e2d1795
--- /dev/null
+++ b/assets/bio-photos/tongyu.png
diff --git a/CS 1300_files/canvas.png b/assets/canvas.png
index 29f28cc..29f28cc 100644
--- a/CS 1300_files/canvas.png
+++ b/assets/canvas.png
diff --git a/assets/edstem.png b/assets/edstem.png
new file mode 100644
index 0000000..fe962b5
--- /dev/null
+++ b/assets/edstem.png
diff --git a/assets/pastry-photos/anika.png b/assets/pastry-photos/anika.png
new file mode 100644
index 0000000..c48f4ca
--- /dev/null
+++ b/assets/pastry-photos/anika.png
diff --git a/assets/pastry-photos/aubrey.png b/assets/pastry-photos/aubrey.png
new file mode 100644
index 0000000..b4c6f66
--- /dev/null
+++ b/assets/pastry-photos/aubrey.png
diff --git a/assets/pastry-photos/connie.png b/assets/pastry-photos/connie.png
new file mode 100644
index 0000000..ae38af3
--- /dev/null
+++ b/assets/pastry-photos/connie.png
diff --git a/assets/pastry-photos/dylan.png b/assets/pastry-photos/dylan.png
new file mode 100644
index 0000000..2619f56
--- /dev/null
+++ b/assets/pastry-photos/dylan.png
diff --git a/assets/pastry-photos/isaac.png b/assets/pastry-photos/isaac.png
new file mode 100644
index 0000000..108db5b
--- /dev/null
+++ b/assets/pastry-photos/isaac.png
diff --git a/assets/pastry-photos/jenny.png b/assets/pastry-photos/jenny.png
new file mode 100644
index 0000000..329c880
--- /dev/null
+++ b/assets/pastry-photos/jenny.png
diff --git a/assets/pastry-photos/jessie.png b/assets/pastry-photos/jessie.png
new file mode 100644
index 0000000..22495b6
--- /dev/null
+++ b/assets/pastry-photos/jessie.png
diff --git a/assets/pastry-photos/kelly.png b/assets/pastry-photos/kelly.png
new file mode 100644
index 0000000..4d76c68
--- /dev/null
+++ b/assets/pastry-photos/kelly.png
diff --git a/assets/pastry-photos/lauren.png b/assets/pastry-photos/lauren.png
new file mode 100644
index 0000000..abb4299
--- /dev/null
+++ b/assets/pastry-photos/lauren.png
diff --git a/assets/pastry-photos/melissa.png b/assets/pastry-photos/melissa.png
new file mode 100644
index 0000000..1d0e4a6
--- /dev/null
+++ b/assets/pastry-photos/melissa.png
diff --git a/assets/pastry-photos/michael.png b/assets/pastry-photos/michael.png
new file mode 100644
index 0000000..fc5b4ee
--- /dev/null
+++ b/assets/pastry-photos/michael.png
diff --git a/assets/pastry-photos/miku.png b/assets/pastry-photos/miku.png
new file mode 100644
index 0000000..7817903
--- /dev/null
+++ b/assets/pastry-photos/miku.png
diff --git a/assets/pastry-photos/nick.png b/assets/pastry-photos/nick.png
new file mode 100644
index 0000000..2bdb7c3
--- /dev/null
+++ b/assets/pastry-photos/nick.png
diff --git a/assets/pastry-photos/sunny.png b/assets/pastry-photos/sunny.png
new file mode 100644
index 0000000..d47a176
--- /dev/null
+++ b/assets/pastry-photos/sunny.png
diff --git a/assets/pastry-photos/tongyu.png b/assets/pastry-photos/tongyu.png
new file mode 100644
index 0000000..8f6f12f
--- /dev/null
+++ b/assets/pastry-photos/tongyu.png
diff --git a/CS 1300_files/shelf.png b/assets/shelf.png
index 4a1d700..4a1d700 100644
--- a/CS 1300_files/shelf.png
+++ b/assets/shelf.png
diff --git a/css/style.css b/css/style.css
index 3328d87..7ee02b7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -19,12 +19,12 @@ body {
 
 #nav {
   display: flex;
-  position: sticky;
+  position: absolute;
   top: 0;
+  left: 0;
   align-self: flex-start; /* makes flex element only as vertically large as needed for sticky */
   flex-direction: column;
   width: 12rem;
-  padding: 1rem;
   text-align: center;
 }
 
@@ -206,4 +206,4 @@ hr {
   .hide-desktop {
     display: none;
   }
-}
+}
+\ No newline at end of file
diff --git a/index.html b/index.html
index 765e2e2..39fbc6c 100644
--- a/index.html
+++ b/index.html
@@ -199,7 +199,7 @@
                 target="_blank"
                 class="helpful-link"
               >
-                <img src="./CS 1300_files/canvas.png" class="small-icon" />
+                <img src="assets/canvas.png" class="small-icon" />
                 <h3>canvas</h3>
               </a>
             </div>
@@ -1005,7 +1005,7 @@
                 src="./CS 1300_files/succulents-jeff.png"
                 class="ta-cactus"
               />
-              <img src="./CS 1300_files/jeff.jpg" class="ta-img" />
+              <img src="assets/bio-photos/jeff.jpg" class="ta-img" />
             </div>
 
             <div class="flex-column bio-text">
@@ -1018,7 +1018,7 @@
               </h4>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
 
         <div class="shelf flex-column">
@@ -1065,7 +1065,7 @@
               </div>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
 
         <div class="shelf flex-column">
@@ -1088,7 +1088,7 @@
             </div>
           </div>
           <img
-            src="./CS 1300_files/shelf.png"
+            src="assets/shelf.png"
             class="shelf-png"
             style="margin-top: -35px"
           />
@@ -1137,7 +1137,7 @@
               </div>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
 
         <div class="shelf flex-column">
@@ -1180,7 +1180,7 @@
               </div>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
 
         <div class="shelf flex-column">
@@ -1225,7 +1225,7 @@
               </div>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
 
         <div class="shelf flex-column">
@@ -1271,7 +1271,7 @@
               </div>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
 
         <div class="shelf flex-column">
@@ -1310,7 +1310,7 @@
               </div>
             </div>
           </div>
-          <img src="./CS 1300_files/shelf.png" class="shelf-png" />
+          <img src="assets/shelf.png" class="shelf-png" />
         </div>
       </div>
 
diff --git a/index.js b/index.js
index 57e378e..07115b5 100644
--- a/index.js
+++ b/index.js
@@ -13,12 +13,13 @@ const observer = new IntersectionObserver(entries => {
     // note - since using id, only 1 entry
     const {intersectionRatio, boundingClientRect} = entries[0];
     if (intersectionRatio !== 1 && boundingClientRect.y <= 0) {
-        videoTitle.currentTime = 5 - 2 * intersectionRatio;
+        videoTitle.currentTime = 5 - 3 * intersectionRatio;
     } else {
         videoTitle.currentTime = 2;
     }
 }, {
-    threshold: [...Array(THRESHOLD_FIDELITY).keys()].map(num => num/THRESHOLD_FIDELITY)
+    threshold: [...Array(THRESHOLD_FIDELITY).keys()].map(num => num/THRESHOLD_FIDELITY),
+    rootMargin: '-50px',
 });
 
 // after two seconds pause the video
@@ -29,14 +30,24 @@ setTimeout(() => {
     observer.observe(videoTitle);
 }, 2500)
 
-// math for interactive conic border on weekly specials
-const conicElement = document.querySelector('.conic-border');
-window.addEventListener('mousemove', ({ clientX, clientY }) => {
-    const { x, y, width, height } = conicElement.getBoundingClientRect();
-    const dx = clientX - (x + 0.5 * width);
-    const dy = clientY - (y + 0.5 * height);
-    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
-
-    conicElement.style.setProperty('--startDeg', `${angle + 90}deg`);
-}, false);
-
+// // math for interactive conic border on weekly specials
+// const conicElement = document.querySelector('.conic-border');
+// window.addEventListener('mousemove', ({ clientX, clientY }) => {
+//     const { x, y, width, height } = conicElement.getBoundingClientRect();
+//     const dx = clientX - (x + 0.5 * width);
+//     const dy = clientY - (y + 0.5 * height);
+//     const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+//
+//     conicElement.style.setProperty('--startDeg', `${angle + 90}deg`);
+// }, false);
+
+// 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/index2.html b/index2.html
index 1f05bf3..973dc6c 100644
--- a/index2.html
+++ b/index2.html
@@ -4,585 +4,637 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="/css/reset.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="animations.css">
 
     <title>CS 1300 - UI/UX 2022</title>
     <link rel="icon" href="./images/favicon.png" />
 
-    <link rel="stylesheet" type="text/css" href="./CS 1300_files/style.css" />
-    <link
-            rel="stylesheet"
-            type="text/css"
-            href="./CS 1300_files/convenience.css"
-    />
-    <link rel="stylesheet" type="text/css" href="./CS 1300_files/guest.css" />
-    <link
-            rel="shortcut icon"
-            type="image/png"
-            href="./CS 1300_files/succulents-02.png"
-    />
-    <!--fonts -->
-    <link href="./CS 1300_files/css2" rel="stylesheet" />
-
     <script src="index.js" defer></script>
-    <script src="./CS 1300_files/jquery.min.js" defer></script>
 </head>
-<body class="text-scale">
-    <div class="main-container">
-        <header>
-            <nav class="nav-flex" aria-label="primary-navigation">
-                <img class="logo-img" src="./images/favicon.png" alt="Our logo image that directs to top of page"/>
-                <a class="link" href="#weekly_specials">Weekly Specials</a>
-                <a class="link" href="#course_info">Course Info</a>
-                <a class="link" href="#full_menu">Full Menu</a>
-                <a class="link" href="#calendar">Calendar</a>
-                <a class="link" href="#staff">Kitchen Staff</a>
-                <a class="link" href="#faq">FAQ</a>
-            </nav>
-
-            <div class="title-flex">
-                <div class="video-title-wrapper">
+<body>
+    <nav id="sidepanel" class="sidepanel" aria-label="drawer-navigation">
+        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"></a>
+        <a href="#full_menu">menu</a>
+        <a href="#calendar">calendar</a>
+        <a href="#staff">kitchen staff</a>
+        <a href="#faq">faqs</a>
+    </nav>
+    <nav id="hamburger-box" class="flex-row">
+        <button id="hamburger-btn" class="openbtn" onclick="openNav()">☰</button>
+        <h3 style="color: white; position: fixed; top: 20px; right: 5px; padding-right: 10px;">csci 1300</h3>
+    </nav>
+    <header>
+        <nav class="nav-flex" aria-label="primary-navigation">
+            <img class="logo-img" src="./images/favicon.png" alt="Our logo image that directs to top of page"/>
+<!--                <a class="link" href="#weekly_specials">Weekly Specials</a>-->
+<!--            <a class="link" href="#course_info">Course Info</a>-->
+<!--            <a class="button" href="#xxx">Weekly Specials</a>-->
+            <a class="link" href="#full_menu">menu</a>
+            <a class="link" href="#calendar">calendar</a>
+            <a class="link" href="#staff">kitchen staff</a>
+            <a class="link" href="#faq">faqs</a>
+        </nav>
+
+        <section class="title-flex">
+            <article class="title-info-flex">
+                <figure class="video-title-wrapper">
                     <video src="assets/uiux-logo.mp4" id="video-title" autoplay muted></video>
-                </div>
-                <figure class="pastries-wrapper">
-                    <iframe id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/' frameborder='0'></iframe>
                 </figure>
-            </div>
 
-        </header>
-
-        <main>
-            <section id="weekly_specials">
-                <div class="conic-border">
-                    <h2>
-                        Weekly Specials Here
-                    </h2>
-                </div>
-            </section>
+                <article class="course-title-wrapper">
+                    <h3 style="font-size: 2rem; font-weight: normal">welcome to</h3>
+                    <h1>csci 1300</h1>
+                    <h3 class="course-name">user interfaces and user experience</h3>
+                </article>
 
-            <section id="course_info">
-                <div class="course-info-wrapper">
-                    <h2>Course Info</h2>
-                    <p>Have you ever walked into a door thinking that you were supposed to pull instead of push? Have you ever been stuck on a website, not sure how to proceed next?</p>
 
-                    <p>Learn when to use different interfaces, how to model and represent user interaction, how to elicit requirements and feedback from users, as well as the principles of user experience design, methods for designing and prototyping interfaces, and user interface evaluation.</p>
-
-                    <p>Students interested in both learning the process behind building an effective interface and gaining hands-on experience designing a user interface should take this course. There will be assignments, readings, and studios, where students will have the opportunity to work alongside TAs and interact with industry guests as they learn critical tools for interface and web design.</p>
-
-                    <a class="glow-on-hover button">syllabus →</a>
-                </div>
                 <aside class="business-hours">
-                    <h3>Business Hours</h3>
-                    <p>Tues/Thurs 1:00PM - 2:20PM</p>
-                    <p>McMillan Hall</p>
+                    <h3>business hours</h3>
+                    <p>T/Th 1-2:20pm</p>
+                    <p>MacMillan Hall 117</p>
+                    <div><a class="link" href="https://example.com">Zoom Link</a></div>
                 </aside>
-            </section>
-
-            <section id="important_links" class="section" style="background-color: #706881;">
-                <h2 style="color: #f5ce5b">important links</h2>
+            </article>
+            <figure class="pastries-wrapper">
+                <iframe id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/' frameborder='0'></iframe>
+            </figure>
+        </section>
+
+    </header>
+
+    <main>
+<!--            <section id="weekly_specials">-->
+<!--                <div class="conic-border">-->
+<!--                    <h2>-->
+<!--                        Weekly Specials Here-->
+<!--                    </h2>-->
+<!--                </div>-->
+<!--            </section>-->
+
+        <section id="important_links" class="section">
+            <h2 class="title">important links</h2>
+
+            <div id="helpful-links-box" class="flex-column">
+
+                <div class="flex-column" style="margin: 0 10px;">
+                    <h3 class="subtitles">websites</h3>
+                    <a style="margin: 10px;" href="https://piazza.com/class/kcw25izsiei48j" target="_blank" class="helpful-link glow-on-hover">
+                        <img src="./assets/edstem.png" class="small-icon">
+                        <h3>edstem →</h3>
+                    </a>
+                    <a style="margin: 10px;" href="https://canvas.brown.edu/" target="_blank" class="helpful-link glow-on-hover">
+                        <img src="./assets/canvas.png" class="small-icon">
+                        <h3>canvas →</h3>
+                    </a>
+                    <a style="margin: 10px;" href="https://script.google.com/a/brown.edu/macros/s/AKfycbw3-4g7pzYS8dgLLu5fHImIXC0Asu7Cqn_DLEGngPdEDRmFgxs/exec" target="_blank" class="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 id="helpful-links-box" class="flex-column">
+                <div class="flex-column">
+                    <h3 class="subtitles">course docs</h3>
+                    <a href="https://docs.google.com/document/d/1XlcD1bA4THmcWBqI607RxwrLY37ZUfIKXdqBBkH2IBc/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://cs.brown.edu/courses/csci1300/fall2020/documents/[cs1300]%20Software%20License%20Guide.pdf" 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/10gUVRN74JkL6Iqw3w_XEPcAaQkZFqlXYTRX-XFk51yk/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/18I11UCHFAhYXajRXMa2aw6wh73hSKrbmSPy_o0z9V0c/edit?usp=sharing" target="_blank" class="no-border-helpful-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="white" 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="#52A25E" 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>style guide</h3>
+                    </a> -->
+                </div>
 
-                    <div class="flex-column" style="margin: 0px 10px;">
-                        <h3 style="color: #f5ce5b">Common Websites</h3>
-                        <a style="margin: 10px;" href="https://piazza.com/class/kcw25izsiei48j" target="_blank" class="helpful-link glow-on-hover">
-                            <img src="./CS 1300_files/piazza.png" class="small-icon">
-                            <h3>piazza</h3>
+                    <div class="flex-column">
+                        <h3 class="subtitles">forms</h3>
+                        <!-- <a href="https://forms.gle/jpaWjoDhp7LBfVk27" target="_blank" class="no-border-helpful-link">
+                          <h3>waitlist form</h3>
+                        </a> -->
+                        <a href="https://forms.gle/BCEeyomrUDNbDjin8" 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>project handin form</h3>
                         </a>
-                        <a style="margin: 10px;" href="https://canvas.brown.edu/" target="_blank" class="helpful-link glow-on-hover">
-                            <img src="./CS 1300_files/canvas.png" class="small-icon">
-                            <h3>canvas</h3>
+                        <a href="https://forms.gle/5L5CCLRqozXrUnmE8" 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 style="margin: 10px;" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank" class="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" transform="translate(2 2)"><path d="m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path><path d="m.5 4.5h16" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path><g fill="white"><g><circle cx="8.5" cy="8.5" r="1"></circle><circle cx="4.5" cy="8.5" r="1"></circle><circle cx="12.5" cy="8.5" r="1"></circle></g><g><circle cx="8.5" cy="12.5" r="1"></circle><circle cx="4.5" cy="12.5" r="1"></circle><circle cx="12.5" cy="12.5" r="1"></circle></g></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" transform="translate(2 2)"><path d="m2.5.5h12c1.1045695 0 2 .8954305 2 2v12c0 1.1045695-.8954305 2-2 2h-12c-1.1045695 0-2-.8954305-2-2v-12c0-1.1045695.8954305-2 2-2z" stroke="#706881" stroke-linecap="round" stroke-linejoin="round"></path><path d="m.5 4.5h16" stroke="#706881" stroke-linecap="round" stroke-linejoin="round"></path><g fill="#706881"><g><circle cx="8.5" cy="8.5" r="1"></circle><circle cx="4.5" cy="8.5" r="1"></circle><circle cx="12.5" cy="8.5" r="1"></circle></g><g><circle cx="8.5" cy="12.5" r="1"></circle><circle cx="4.5" cy="12.5" r="1"></circle><circle cx="12.5" cy="12.5" r="1"></circle></g></g></g></svg>
-                            <h3>schedule</h3>
+                        <a href="https://forms.gle/U9mCY3Jxw138ux5M7" 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 style="margin: 10px;" href="https://script.google.com/a/brown.edu/macros/s/AKfycbw3-4g7pzYS8dgLLu5fHImIXC0Asu7Cqn_DLEGngPdEDRmFgxs/exec" target="_blank" class="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="white" 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="#706881" 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 href="https://forms.gle/JVDLKSa5Uc8qkfQ2A" 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 switch form</h3>
                         </a>
-                    </div>
-
-                    <div class="flex-column" style="margin: 25px 10px 0px 10px;">
-                        <h3 style="color: #f5ce5b">course docs</h3>
-                        <a href="https://docs.google.com/document/d/1XlcD1bA4THmcWBqI607RxwrLY37ZUfIKXdqBBkH2IBc/edit?usp=sharing" target="_blank" class="no-border-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="white" 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="#52A25E" 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 href="https://forms.gle/9F6Ec2wX8Tvtyr2C7" 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://cs.brown.edu/courses/csci1300/fall2020/documents/[cs1300]%20Software%20License%20Guide.pdf" target="_blank" class="no-border-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="white" 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="#52A25E" 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/10gUVRN74JkL6Iqw3w_XEPcAaQkZFqlXYTRX-XFk51yk/edit?usp=sharing" target="_blank" class="no-border-helpful-link glow-on-hover">
-                            <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="white" 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="#52A25E" 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/18I11UCHFAhYXajRXMa2aw6wh73hSKrbmSPy_o0z9V0c/edit?usp=sharing" target="_blank" class="no-border-helpful-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="white" 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="#52A25E" 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>style guide</h3>
-                        </a> -->
                     </div>
+            </div>
+        </section>
+
+        <section id="full_menu">
+            <h2 class="title">menu (schedule)</h2>
+            <div class="edges important-note">
+                <p>
+                    We <strong>strongly recommend</strong> bookmarking this schedule, as
+                    this contains all information regarding assignments, lectures,
+                    studios, and readings.
+                </p>
+                <a class="glow-on-hover button" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank">link to schedule →</a>
+            </div>
 
-                        <div class="flex-column" style="margin: 25px 10px 0px 10px; align-content: flex-start;">
-                            <h3 style="color: #f5ce5b">forms</h3>
-                            <!-- <a href="https://forms.gle/jpaWjoDhp7LBfVk27" target="_blank" class="no-border-helpful-link">
-                              <h3>waitlist form</h3>
-                            </a> -->
-                            <a href="https://forms.gle/BCEeyomrUDNbDjin8" target="_blank" class="no-border-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="white" 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="#52A25E" 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>project handin form</h3>
-                            </a>
-                            <a href="https://forms.gle/5L5CCLRqozXrUnmE8" target="_blank" class="no-border-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="white" 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="#52A25E" 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/U9mCY3Jxw138ux5M7" target="_blank" class="no-border-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="white" 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="#52A25E" 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/JVDLKSa5Uc8qkfQ2A" target="_blank" class="no-border-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="white" 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="#52A25E" 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 switch form</h3>
-                            </a>
-                            <a href="https://forms.gle/9F6Ec2wX8Tvtyr2C7" target="_blank" class="no-border-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="white" 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="#52A25E" 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>
-                        </div>
-                </div>
-
-            </section>
 
-            <section id="full_menu">
-                <div class="header flex-row">
-                    <img src="./CS 1300_files/succulents-02.png" class="succulent-png" />
-                    <h1 style="color: #a29bba">SCHEDULE</h1>
-                    <img src="./CS 1300_files/succulents-02.png" class="succulent-png" />
-                </div>
-                <div class="important-note">
-                    <p>
-                        We <strong>strongly recommend</strong> bookmarking this schedule, as
-                        this contains all information regarding assignments, lectures,
-                        studios, and readings.
-                    </p>
-                    <a class="glow-on-hover button" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRow8i_X8guQpwU_da4y7rwDBbhTeYsUQ2b33MPkezcz2dLOpQxMBzo_6XBYJFTD6mSnT3-FVUsjh6S/pubhtml?gid=1112663023&amp;single=true" target="_blank">link to schedule →</a>
-                </div>
+            <figure class="spreadsheet-wrapper">
+                <iframe id="schedule-iframe" class="embedded-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR97aOo6hHLDmv_bqzK5ipCBHRUKqnzfox3c0RzjBggOjWAzn0a49S2GxRieW9Cgg/pubhtml?widget=true&amp;headers=false"></iframe>            </figure>
+        </section>
+
+        <section id="calendar">
+            <h2 class="title">calendar</h2>
+            <div class="edges">
+                <p style="margin-bottom: 10px; padding-left: 10px;">
+                    To subscribe to the course gcal, click
+                    <a
+                            class="link"
+                            href="https://calendar.google.com/calendar?cid=Y19nMXR0M2lpbjZ2ZDJqcTJlbzFpamJxNmJya0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t"
+                            target="_blank"
+                    >here</a
+                    >.
+                </p>
+                <p style="padding-left: 10px;">
+                    To sign up for TA Hours, please go to
+                    <a
+                            class="link"
+                            href="https://signmeup.cs.brown.edu/"
+                            target="_blank"
+                    >hours</a
+                    >.
+                </p>
+            </div>
 
-                <iframe id="schedule-iframe" class="embedded-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR97aOo6hHLDmv_bqzK5ipCBHRUKqnzfox3c0RzjBggOjWAzn0a49S2GxRieW9Cgg/pubhtml?widget=true&amp;headers=false"></iframe>
-            </section>
 
-            <section id="calendar">
-                <div class="header flex-row">
-                    <img src="./CS 1300_files/succulents-07.png" class="succulent-png" />
-                    <h1 style="color: #f5ce5b">calendar</h1>
-                    <img src="./CS 1300_files/succulents-07.png" class="succulent-png" />
-                </div>
-                <div class="important-note">
-                    <p style="color: #2b2a2d; margin-bottom: 10px">
-                        To subscribe to the course gcal, click
-                        <a
-                                class="glow-on-hover"
-                                href="https://calendar.google.com/calendar?cid=Y19nMXR0M2lpbjZ2ZDJqcTJlbzFpamJxNmJya0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t"
-                                target="_blank"
-                                style="color: #52a25e"
-                        >here</a
-                        >.
-                    </p>
-                    <p style="color: #2b2a2d; margin-bottom: 5px">
-                        To sign up for TA Hours, please go to
-                        <a
-                                class="glow-on-hover"
-                                href="https://signmeup.cs.brown.edu/"
-                                target="_blank"
-                                style="color: #52a25e"
-                        >SignMeUp</a
-                        >.
-                    </p>
-                    <h4
-                            style="
-              margin-bottom: 20px;
-              color: #0e6a3e;
-              text-transform: uppercase;
-              font-size: 12px;"
-                    >
-                        (( Zoom links for TA hours will be in the SignMeUp queue ))
-                    </h4>
-                </div>
+            <figure class="spreadsheet-wrapper">
                 <iframe id="calendar-iframe" class="embedded-iframe"  src="https://calendar.google.com/calendar/embed?src=c_igafsu38m7acism73deqltp8s4%40group.calendar.google.com&ctz=America%2FNew_York"></iframe>
-            </section>
+            </figure>
+        </section>
 
-            <section id="staff" class="flex-column section" style="background-color: #706881">
-                <div
-                        class="flex-column section"
-                        style="background-color: #706881"
-                >
-                    <div class="header flex-row">
-                        <img src="./CS 1300_files/succulents-06.png" class="succulent-png" />
-                        <h1 style="color: #2bb673">STAFF</h1>
-                        <img src="./CS 1300_files/succulents-06.png" class="succulent-png" />
-                    </div>
+        <section id="staff" class="section">
+            <h2 class="title">staff</h2>
 
-                    <div id="emails" class="flex-row wrap-container">
-                        <div class="email">
-                            <h3 style="color: white">uiuxtas@lists.cs.brown.edu</h3>
-                            <h4>(email all TAs, use this by default)</h4>
-                        </div>
-                        <div class="email">
-                            <h3 style="color: white">uiuxhtas@lists.cs.brown.edu</h3>
-                            <h4>(HTAs, Grad TA, &amp; Jeff)</h4>
+            <div class="flex-column edges">
+                <div id="emails" class="flex-row wrap-container">
+                    <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, use this by default)</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>
+            </div>
+            <article class="flex-column">
+                <div class="shelf flex-column">
+                    <div class="ta-box-left flex-row">
+                        <div class="img-box">
+                            <img
+                                    src="./assets/pastry-photos/michael.png"
+                                    class="ta-pastry"
+                            />
+                            <img src="assets/bio-photos/jeff.jpg" class="ta-img"/>
                         </div>
-                        <div class="email">
-                            <h3 style="color: white">jeff@cs.brown.edu</h3>
-                            <h4>(sensitive issues)</h4>
+
+                        <div class="flex-column bio-text">
+                            <h3>[professor] jeff</h3>
+                            <h4>
+                                jeff has been teaching cs 1300 for 10 years ever since its
+                                inception. he’s studying cs and is an amateur farmer👨‍🌾, plays
+                                keyboard in a local band, and holds the world record for tech
+                                internships!
+                            </h4>
                         </div>
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
                         <div class="ta-box-left flex-row">
                             <div class="img-box">
                                 <img
-                                        src="./CS 1300_files/succulents-jeff.png"
-                                        class="ta-cactus"
+                                        src="./assets/pastry-photos/anika.png"
+                                        class="ta-pastry"
+                                        id="anika-pastry"
+                                        style="margin-bottom: 3px"
                                 />
-                                <img src="./CS 1300_files/jeff.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/anika.jpg" class="ta-img" />
+                            </div>
+                            <div class="flex-column bio-text">
+                                <h3>[hta] anika</h3>
+                                <h4>
+                                    Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.                                </h4>
                             </div>
+                        </div>
 
+                        <div class="ta-box-left flex-row">
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/michael.png"
+                                        class="ta-pastry"
+                                        id="michael-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/michael.png" class="ta-img" />
+                            </div>
                             <div class="flex-column bio-text">
-                                <h3>[professor] jeff</h3>
+                                <h3>[hta] michael</h3>
                                 <h4>
-                                    jeff has been teaching cs 1300 for 8 years ever since its
-                                    inception. he’s studying cs and is an amateur farmer👨‍🌾, plays
-                                    keyboard in a local band, and holds the world record for tech
-                                    internships!
+                                    Ciao! Ws only.
                                 </h4>
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-left flex-row">
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-sarah.png"
-                                            class="ta-cactus"
-                                            id="sarah-cactus"
-                                            style="margin-bottom: 3px"
-                                    />
-                                    <img src="./CS 1300_files/sarah.jpg" class="ta-img" />
-                                </div>
-                                <div class="flex-column bio-text">
-                                    <h3>[hta] anika</h3>
-                                    <h4>
-                                        Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.
-                                    </h4>
-                                </div>
+                <div class="shelf flex-column">
+                    <div class="ta-box-left flex-row">
+                        <div class="img-box">
+                            <img
+                                    src="./assets/pastry-photos/tongyu.png"
+                                    class="ta-pastry"
+                                    id="tongyu-pastry"
+                            />
+                            <img src="./assets/bio-photos/tongyu.png" class="ta-img" />
+                        </div>
+                        <div class="flex-column bio-text">
+                            <h3>[grad ta] tongyu</h3>
+                            <h4>
+                                Hiya, I'm Tongyu! I'm a PhD student working with Jeff on creativity support and specifically drawing/design tools. I doodle with watercolours a lot and play all types of video games except FPSes (they make me dizzy @_@)
+                            </h4>
+                        </div>
+                    </div>
+                    <img
+                            src="./assets/shelf.png"
+                            class="shelf-png"
+                    />
+                </div>
+
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>aubrey</h3>
+                                <h4>
+                                    Hello!! I'm Aubrey, a senior studying cs. I really like studio Ghibli a decade back and drew half of the storyboard of Spirited Away. I'm also really into skiing and photography :)
+                                </h4>
                             </div>
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/aubrey.png"
+                                        class="ta-pastry"
+                                        id="aubrey-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/aubrey.jpg" class="ta-img" />
+                            </div>
+                        </div>
 
-                            <div class="ta-box-left flex-row">
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-laura.png"
-                                            class="ta-cactus"
-                                            id="laura-cactus"
-                                            style="margin-bottom: -20px"
-                                    />
-                                    <img src="./CS 1300_files/laura.png" class="ta-img" />
-                                </div>
-                                <div class="flex-column bio-text">
-                                    <h3>[hta] michael</h3>
-                                    <h4>
-                                        Ciao, I’m Michael. I grew up in Cleveland, live in Florida, and was raised by Italians.
-                                        Big olive oil, basketball, and senior vibes.
-                                    </h4>
-                                </div>
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>connie</h3>
+                                <h4>
+                                    Fan of Pantone 3435 C 🍉.
+                                </h4>
+                            </div>
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/connie.png"
+                                        class="ta-pastry"
+                                        id="connie-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/connie.jpg" class="ta-img" />
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
                         <div class="ta-box-left flex-row">
                             <div class="img-box">
                                 <img
-                                        src="./CS 1300_files/succulents-talie.png"
-                                        class="ta-cactus"
-                                        style="margin-bottom: 5px"
+                                        src="./assets/pastry-photos/dylan.png"
+                                        class="ta-pastry"
+                                        id="dylan-pastry"
+                                        style="margin-bottom: 3px"
                                 />
-                                <img src="./CS 1300_files/talie.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/dylan.png" class="ta-img" />
                             </div>
                             <div class="flex-column bio-text">
-                                <h3>[grad ta] tongyu</h3>
+                                <h3>dylan</h3>
                                 <h4>
-                                    [FIX] Hello I'm Talie. I'm a PhD student working with Jeff on building
-                                    systems to improve mental health. You are welcome and encouraged
-                                    to come ask me for weird bird facts at any time.
+                                    Hi everyone, I'm so excited to meet all of you :D -- my name is Dylan, I'm a junior at Brown, and I'm from central MA. I enjoy playing with a new JavaScript framework every week and sometimes actually get real work done. In my free time, I enjoy playing competitive Valorant (join Brown's team!), overspending at cafés, and reading.
                                 </h4>
                             </div>
                         </div>
-                        <img
-                                src="./CS 1300_files/shelf.png"
-                                class="shelf-png"
-                                style="margin-top: -35px"
-                        />
-                    </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>aubrey</h3>
-                                    <h4>
-                                        Hello!! I'm Aubrey, a senior studying cs. I really like studio Ghibli a decade back and drew half of the storyboard of Spirited Away. I'm also really into skiing and photography :)
-                                    </h4>
-                                </div>
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-michael.png"
-                                            class="ta-cactus"
-                                            id="michael-cactus"
-                                            style="margin-bottom: -53px"
-                                    />
-                                    <img src="./CS 1300_files/michael.jpg" class="ta-img" />
-                                </div>
+                        <div class="ta-box-left flex-row">
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/isaac.png"
+                                        class="ta-pastry"
+                                        id="isaac-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/isaac.jpg" class="ta-img" />
                             </div>
-
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>connie</h3>
-                                    <h4>
-                                        Fan of Pantone 3435 C 🍉.
-                                    </h4>
-                                </div>
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-felicia.png"
-                                            class="ta-cactus"
-                                            id="felicia-cactus"
-                                            style="margin-bottom: 20px"
-                                    />
-                                    <img src="./CS 1300_files/felicia.png" class="ta-img" />
-                                </div>
+                            <div class="flex-column bio-text">
+                                <h3>isaac</h3>
+                                <h4>
+                                    Hi! I'm Isaac, a senior studying cognitive science from California. I enjoy playing the violin, exploring with my electric skateboard, running Brown Esports, and shooting films!
+                                </h4>
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-left flex-row">
-                                <div class="img-box">
-                                    <img
-                                            id="gabby-cactus"
-                                            src="./CS 1300_files/succulents-gabby.png"
-                                            class="ta-cactus"
-                                            style="margin-bottom: -12px"
-                                    />
-                                    <img src="./CS 1300_files/gabby.jpg" class="ta-img" />
-                                </div>
-                                <div class="flex-column bio-text">
-                                    <h3>dylan</h3>
-                                    <h4>
-                                        Hi everyone, I'm so excited to meet all of you :D -- my name is Dylan, I'm a junior at Brown, and I'm from central MA. I enjoy playing with a new JavaScript framework every week and sometimes actually get real work done. In my free time, I enjoy playing competitive Valorant (join Brown's team!), overspending at cafés, and reading.
-                                    </h4>
-                                </div>
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>jenny</h3>
+                                <h4>
+                                    Hey, I am a junior studying CS. Always on the search for cute and elegant designs, places to watch sunsets, and good food!
+                                </h4>
                             </div>
-
-                            <div class="ta-box-left flex-row">
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-sophia.png"
-                                            class="ta-cactus"
-                                    />
-                                    <img src="./CS 1300_files/sophia.jpg" class="ta-img" />
-                                </div>
-                                <div class="flex-column bio-text">
-                                    <h3>isaac</h3>
-                                    <h4>
-                                        Hi! I'm Isaac, a senior studying cognitive science from California. I enjoy playing the violin, exploring with my electric skateboard, running Brown Esports, and shooting films!
-                                    </h4>
-                                </div>
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/jenny.png"
+                                        class="ta-pastry"
+                                        id="jenny-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/jenny.jpeg" class="ta-img" />
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
-                    </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>jenny</h3>
-                                    <h4>
-                                        Hey, I am a junior studying CS. Always on the search for cute and elegant designs, places to watch sunsets, and good food!
-                                    </h4>
-                                </div>
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-ifechi.png"
-                                            class="ta-cactus"
-                                            id="ifechi-cactus"
-                                            style="margin-bottom: -50px"
-                                    />
-                                    <img src="./CS 1300_files/ifechi.png" class="ta-img" />
-                                </div>
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>jessie</h3>
+                                <h4>
+                                    hi everyone! i’m jessie, a senior from las vegas studying cs and applied math. i love live music, being outdoors, and drinking matcha lattes.
+                                </h4>
                             </div>
-
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>jessie</h3>
-                                    <h4>
-                                        hi everyone! i’m jessie, a senior from las vegas studying cs and applied math. i love live music, being outdoors, and drinking matcha lattes.
-                                    </h4>
-                                </div>
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-ndunge.png"
-                                            class="ta-cactus"
-                                            id="ndunge-cactus"
-                                            style="margin-bottom: 15px"
-                                    />
-                                    <img src="./CS 1300_files/ndunge.jpg" class="ta-img" />
-                                </div>
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/jessie.png"
+                                        class="ta-pastry"
+                                        id="jessie-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/jessica.jpg" class="ta-img" />
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-left flex-row">
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-miranda.png"
-                                            class="ta-cactus"
-                                            id="miranda-cactus"
-                                            style="margin-bottom: -10px"
-                                    />
-                                    <img src="./CS 1300_files/miranda.jpg" class="ta-img" />
-                                </div>
-                                <div class="flex-column bio-text">
-                                    <h3>kelly</h3>
-                                    <h4>
-                                        Hello! I am Kelly, a Senior from California concentrating in CS-Econ and EAS. I enjoy digital illustration, listening to J-pop/K-pop, and watching anime/reading manga. I love Salmon, especially in sushi. I also like collecting things.
-                                    </h4>
-                                </div>
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
+                        <div class="ta-box-left flex-row">
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/kelly.png"
+                                        class="ta-pastry"
+                                        id="kelly-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/kelly.png" class="ta-img" />
+                            </div>
+                            <div class="flex-column bio-text">
+                                <h3>kelly</h3>
+                                <h4>
+                                    Hello! I am Kelly, a Senior from California concentrating in CS-Econ and EAS. I enjoy digital illustration, listening to J-pop/K-pop, and watching anime/reading manga. I love Salmon, especially in sushi. I also like collecting things.
+                                </h4>
                             </div>
+                        </div>
 
-                            <div class="ta-box-left flex-row">
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-stanley.png"
-                                            class="ta-cactus"
-                                            id="stanley-cactus"
-                                            style="margin-bottom: -5px"
-                                    />
-                                    <img src="./CS 1300_files/stanley.jpg" class="ta-img" />
-                                </div>
-                                <div class="flex-column bio-text">
-                                    <h3>lauren</h3>
-                                    <h4>
-                                        Hi! My name’s Lauren, and I’m a senior studying CS. I love hiking, traveling, and rom-coms, and I’m super excited to meet y’all!
-                                    </h4>
-                                </div>
+                        <div class="ta-box-left flex-row">
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/lauren.png"
+                                        class="ta-pastry"
+                                        id="lauren-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/lauren.jpeg" class="ta-img" />
+                            </div>
+                            <div class="flex-column bio-text">
+                                <h3>lauren</h3>
+                                <h4>
+                                    Hi! My name’s Lauren, and I’m a senior studying CS. I love hiking, traveling, and rom-coms, and I’m super excited to meet y’all!
+                                </h4>
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>melissa</h3>
-                                    <h4>Hi I'm a senior studying CS and IAPA from Vancouver, Canada. I love being in the outdoors skiing, hiking, biking or anything at all. I also enjoy eating honey cruller donuts, reading, and playing the board game Go.</h4>
-                                </div>
-                                <!-- <div class="img-box"> -->
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>melissa</h3>
+                                <h4>Hi I'm a senior studying CS and IAPA from Vancouver, Canada. I love being in the outdoors skiing, hiking, biking or anything at all. I also enjoy eating honey cruller donuts, reading, and playing the board game Go.</h4>
+                            </div>
+                            <div class="img-box">
                                 <img
-                                        src="./CS 1300_files/succulents-zach.png"
-                                        class="ta-cactus"
+                                        src="./assets/pastry-photos/melissa.png"
+                                        class="ta-pastry"
+                                        id="melissa-pastry"
+                                        style="margin-bottom: 3px"
                                 />
-                                <!-- <img src="staff/zach.jpg" class="ta-img"> -->
-                                <!-- </div> -->
+                                <img src="./assets/bio-photos/melissa.jpg" class="ta-img" />
                             </div>
+                        </div>
 
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>miku</h3>
-                                    <h4>
-                                        Hi I'm Miku, a senior concentrating in CS. I am from Bangkok, Thailand. I love tiramisu, strawberry shortcake, macaron, banana bread, cream puff, mille-feuille, baklava, donuts.... ..
-                                    </h4>
-                                </div>
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-minna.png"
-                                            class="ta-cactus"
-                                            style="margin-bottom: -5px"
-                                    />
-                                    <img src="./CS 1300_files/minna.jpg" class="ta-img" />
-                                </div>
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>miku</h3>
+                                <h4>
+                                    Hi I'm Miku, a senior concentrating in CS. I am from Bangkok, Thailand. I love tiramisu, strawberry shortcake, macaron, banana bread, cream puff, mille-feuille, baklava, donuts.... ..
+                                </h4>
+                            </div>
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/miku.png"
+                                        class="ta-pastry"
+                                        id="miku-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/miku.png" class="ta-img" />
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
+                </div>
 
-                    <div class="shelf flex-column">
-                        <div class="flex-row ta-wrapper">
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>nick</h3>
-                                    <h4>Hi! My name is Nick Vadasz and I am a junior studying CS. I'm from rural East Texas, though my whole family is from Hungary. Besides computer science, I love listening to and performing music (Brown U Orchestra 4 lyfe), art, gaming, philosophy, and starting projects that I will never finish.</h4>
-                                </div>
-                                <!-- <div class="img-box"> -->
+                <div class="shelf flex-column">
+                    <div class="flex-row ta-wrapper">
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>nick</h3>
+                                <h4>Hi! My name is Nick Vadasz and I am a junior studying CS. I'm from rural East Texas, though my whole family is from Hungary. Besides computer science, I love listening to and performing music (Brown U Orchestra 4 lyfe), art, gaming, philosophy, and starting projects that I will never finish.</h4>
+                            </div>
+                            <div class="img-box">
                                 <img
-                                        src="./CS 1300_files/succulents-zach.png"
-                                        class="ta-cactus"
+                                        src="./assets/pastry-photos/nick.png"
+                                        class="ta-pastry"
+                                        id="nick-pastry" id="nick-pastry"
+                                        style="margin-bottom: 3px"
                                 />
-                                <!-- <img src="staff/zach.jpg" class="ta-img"> -->
-                                <!-- </div> -->
+                                <img src="./assets/bio-photos/nick.png" class="ta-img" />
                             </div>
+                        </div>
 
-                            <div class="ta-box-right flex-row">
-                                <div class="flex-column bio-text">
-                                    <h3>sunny</h3>
-                                    <h4>
-                                        Hello! I am a senior studying CS and Behavioral Decision Sciences. I will be working as a product designer in New York after graduation. I love drawing, owning plushies, and drinking boba (very basic, I know). My dream is to travel around the world while working remotely in the future~                                    </h4>
-                                </div>
-                                <div class="img-box">
-                                    <img
-                                            src="./CS 1300_files/succulents-minna.png"
-                                            class="ta-cactus"
-                                            id="minna-cactus"
-                                            style="margin-bottom: -5px"
-                                    />
-                                    <img src="./CS 1300_files/minna.jpg" class="ta-img" />
-                                </div>
+                        <div class="ta-box-right flex-row">
+                            <div class="flex-column bio-text">
+                                <h3>sunny</h3>
+                                <h4>
+                                    Hello! I am a senior studying CS and Behavioral Decision Sciences. I will be working as a product designer in New York after graduation. I love drawing, owning plushies, and drinking boba (very basic, I know). My dream is to travel around the world while working remotely in the future~                                    </h4>
+                            </div>
+                            <div class="img-box">
+                                <img
+                                        src="./assets/pastry-photos/sunny.png"
+                                        class="ta-pastry"
+                                        id="sunny-pastry"
+                                        style="margin-bottom: 3px"
+                                />
+                                <img src="./assets/bio-photos/sunny.jpg" class="ta-img" />
                             </div>
                         </div>
-                        <img src="./CS 1300_files/shelf.png" class="shelf-png" />
                     </div>
+                    <img src="./assets/shelf.png" class="shelf-png" />
                 </div>
-            </section>
-
-            <section id="faq">
-
-            </section>
-        </main>
-
-
-    </div>
+            </article>
+        </section>
+
+        <section id="faq">
+            <h2 class="title">FAQ</h2>
+
+            <article class="edges">
+                <h3>Is this course capped?</h3>
+                <p>This year it is not capped. As of today, around 235 students have already been able to register on Courses @ Brown.</p>
+
+                <h3>Is there a waitlist for the course?</h3>
+                <p>There is no waitlist.</p>
+
+                <h3>Are there prerequisites for the course?</h3>
+                <p>This course requires one of the intro CS sequences (CSCI 0150/0160, CSCI 0170/0180, CSCI 0190, or CS 0200). CS graduate students are exempt. These prerequisites are also listed on Courses @ Brown</p>
+
+                <h3>Will this course be online or in-person?</h3>
+                <p>In person. There will be in-person activities during class, and separately, there will be in-person studios (a form of lab) as well during hours outside of class. More information will be available around the beginning of the semester.</p>
+
+                <h3>Can I take this course as a non-CS concentrator or incoming first-year student?</h3>
+                <p>It's likely that similar course, CSCI 0130, will be offered in Spring 2023, which is designed for non-concentrators and has no prerequistes. If it is offered, it will likely be capped at a limited number of students, and be taught by a Ph.D. student. There is no other information about CSCI 0130 at this time, as it is pending review from a university committee.</p>
+
+                <h3>Can I take CSCI 1300 as a RISD student?</h3>
+                <p>Yes, but RISD students should meet the same prerequisites as Brown students.</p>
+
+                <h3>I can't enroll in the course, but would like to learn UI/UX. What can I do?</h3>
+                <p>All Brown and RISD students are welcome to participate in one of the days of UI Camp on September 10-11, an all-day event featuring studios run by our TAs with lunch provided. While priority will be given to students enrolled in the course, we aim to accommodate students not enrolled in the course as well. Both days have similar content, so students should only attend one of the dates. More information will be provided at the start of the semester, but interested students can mark those dates.</p>
+
+                <h3>Could I get an exception to enroll in the course?</h3>
+                <p>Based on the projected enrollment, we're unlikely to waive prereqs or make exceptions this year, and you should make preparations for an exception not being possible. In the unlikely event that we approve any exceptions, it will be noted here first, and the exception will be approved for everyone in the same situation. The course has a number of assignments and activities that depend on time from external industry guests, as well as limited studio space and TA staff, so there is a limited number of students we are able to accommodate.</p>
+
+                <h3>If I am not enrolled in the course, can I attend lecture?</h3>
+                <p>It's likely that there will be extra seats in the classroom we have chosen for this semester. None of the course staff is likely to notice non-enrolled students in the classroom.</p>
+
+                <h3>I will miss some or all of the classes. Can I be excused or watch recordings of the classes asynchronously?</h3>
+                <p>Classes will generally be recorded when possible. We are not checking attendance specifically or deducting points for missed classes but the course is an in-person course so students are responsible for anything that happens in class. There will be in-class activities that provide participation points as part of your grade, but there will be more activities than are needed to get full activity points. You do not need to contact the instructor or TAs for missing class.</p>
+
+                <h3>Can I take the course as a capstone?</h3>
+                <p>Yes, for a capstone, you should extend an assignment into something that has substantial development and design components and release it. For instance, you could take your Iterative Design prototype and build it fully to the point where it's a deployable app. This can be done as a group, but the amount of work should be proportional to the group size. The capstone can be done anytime in the semester, until the end of winter break.</p>
+
+                <h3>What will studios be like?</h3>
+                <p>Students sign up for studios by selecting the corresponding lab hour when registering. The studio lab hours will be outside regular lecture hours. TAs will have an activity prepared for students in studio, and will be around to give feedback to students during this time. Students are welcome to work collaboratively on the studio activities. Work done in studios may be good starters for your portfolio.</p>
+
+                <h3>Will there be a textbook for the course?</h3>
+                <p>No, all readings will be available on this website.</p>
+
+                <h3>Will there be a final exam?</h3>
+                <p>No, you will complete a portfolio for your final assignment.</p>
+
+                <h3>When is the last day I have to come to class?</h3>
+                <p>It would be the last day listed on the schedule above.</p>
+            </article>
+
+            <footer>Made with <span style="color: #FF1493;">&hearts;</span> in Providence</footer>
+        </section>
+    </main>
+
+    <nav id="nav">
+        <div>
+            <div id="logo-wrapper">
+                <div class="hide-desktop" style="width: 0.5rem"></div>
+                <a href="#welcome"><img src="./images/favicon.png" id="logo" /></a
+                ><a
+                    class="hide-desktop"
+                    style="
+              text-decoration: none;
+              font-weight: 700;
+              color: #000;
+              margin-left: 0.25rem;
+              font-family: classico-urw, sans-serif;
+            "
+                    href="#welcome"
+            ><span>CSCI 1300</span></a
+            >
+                <div class="hide-desktop" style="flex: 1"></div>
+                <button
+                        class="hide-desktop"
+                        style="flex: none; margin-right: 1rem"
+                        onclick="toggleNav(!isNavOpen);"
+                >
+                    Toggle Nav
+                </button>
+            </div>
+        </div>
+        <hr />
+        <div id="nav-links">
+            <!--                <a class="button" href="#xxx">Weekly Specials</a>-->
+            <a class="link" href="#full_menu">Full Menu</a>
+            <a class="link" href="#calendar">Calendar</a>
+            <a class="link" href="#staff">Kitchen Staff</a>
+            <a class="link" href="#faq">FAQs</a>
+        </div>
+    </nav>
 </body>
 </html>
 \ No newline at end of file
diff --git a/style.css b/style.css
index 73c02f6..76df8ad 100644
--- a/style.css
+++ b/style.css
@@ -3,37 +3,46 @@ vars and color
  */
 :root {
     /* define the color pallet */
-    --primary-color-blue: #D1F7FF;
-    --secondary-color: #F7C59F;
+    --primary-color: #D1F7FF;
+    --secondary-color: #fcd6c2;
     --accent-color: #DA627D;
-    --dark-color: #554348;
-    --navy-blue: #222E50;
+    --second-accent-color: #222E50;
+}
+
+/* minimalist reset */
+* {
+    padding: 0;
+    margin: 0;
 }
 
 html {
-    background-color: #d1f7ff;
-    font-family: "Inter", sans-serif;
     scroll-behavior: smooth;
 }
 
-@supports (font-variation-settings: normal) {
-    html {
-        font-family: "Inter var", sans-serif;
-    }
+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: rgb(212, 212, 212);*/
+}
+
+header {
+    position: relative;
+    overflow: hidden;
 }
 
+p {
+    line-height: 1.2;
+}
 /*
 body and main container
  */
 
-body {
-    margin: 0;
-    padding: 0;
-    background-color: var(--primary-color-blue);
-}
-
-.text-scale {
-    font-size: clamp(1rem, 1vw, 3rem);
+/* 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 {
@@ -44,15 +53,49 @@ body {
 }
 
 /*
-header color will be that blue
+section format + colors
  */
-section {
-    padding: 20px 10%;
+
+section, header {
+    padding: 1rem 2rem;
 }
 
-header, hr, section {
-    background-color: var(--primary-color-blue);
-    padding-bottom: 20px;
+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 15% 1rem 15%;
+}
+
+.title {
+    color: var(--accent-color);
+}
+
+
+h2 {
+    text-align: center;
+    font-size: 2rem;
+}
+
+strong {
+    color: var(--accent-color);
+    font-weight: 800;
+}
+
+
+/*
+header color will be that blue
+ */
+
+header {
+    background-color: var(--primary-color);
 }
 
 
@@ -61,7 +104,7 @@ nav bar (logo and anchors)
  */
 
 nav {
-    margin: 0 20px 10px 20px;
+    margin: 0 20px 15px 20px;
     padding: 0;
 }
 
@@ -69,12 +112,16 @@ nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    position: relative;
+    padding-right: 20px;
+}
+
+.nav-flex > a {
+    margin-bottom: 30px;
 }
 
 .logo-img {
-    width: 115px;
-    height: 115px;
+    width: 80px;
+    height: 80px;
     border-radius: 100%;
     padding: 0;
 }
@@ -85,30 +132,78 @@ nav {
     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: 10;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    padding-top: 60px;
+    transition: 0.4s;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#hamburger-box {
+    padding: 10px;
+    position: fixed;
+    height: fit-content;
+    top: 0;
+    z-index: 2;
+    width: 100%;
+    justify-content: space-between;
+    background-color: rgb(43,42,45,0.6);
+    margin: 0;
+}
+
+/* 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: #18272f;
+    color: var(--accent-color);
     font-weight: 700;
 }
 
 .link::before {
     content: "";
-    background-color: #00000044;
+    background-color: #0000ff77;
     position: absolute;
     left: 0;
     bottom: -0.125rem;
     width: 100%;
     height: 2px;
-    z-index: 1000;
+    z-index: 5;
     transition: all 0.2s ease-out;
 }
 
 .link:hover::before {
     bottom: 0;
     height: 100%;
-    background-color: #00000011;
+    background-color: #0000ff22;
     border-radius: 5%;
     transform: scale(1.1);
 }
@@ -118,51 +213,111 @@ title area (animated text and connie's 3d model)
  */
 .title-flex {
     display: flex;
-    justify-content: space-between;
-    height: min-content;
-    align-items: center;
+    justify-content: left;
+    padding: 0;
+    z-index: 1;
 }
 
-.video-title-wrapper {
-    position: relative;
-    left: clamp(10px, 30px, 20vw);
-    bottom: 20px;
-    z-index: 10;
+.title-info-flex {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    max-width: 65vw;
+    align-items: start;
 }
 
+.video-title-wrapper {
+    z-index: 1;
+    width: clamp(25rem, 35vw, 500px);
+    margin-bottom: 1rem;
+    padding-left: 50px;
+}
 
 #video-title {
-    width: clamp(275px, 40vw, 500px);
     border-radius: 30px;
 }
 
+.course-title-wrapper {
+    margin-top: .5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 10px;
+}
+
+
+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: .25rem 0 1rem 0;
+    z-index: 5;
+}
+
+
 .pastries-wrapper {
-    position: relative;
-    width: 100%;
-    height: 50vmin;
+    /* 16:9 aspect ratio */
+    overflow: hidden;
+    position: absolute;
     margin: 0;
-    z-index: 5;
+    z-index: 2;
+    height: 450px;
+    width: 200vw;
 }
 
 #connie-pastries {
-    width: 100%;
+    border: 0;
     height: 100%;
+    position: absolute;
+    top: 10px;
+    width: 100%;
     pointer-events: none;
     user-select: none;
+    z-index: 1;
+    left: -35vw;
+}
+
+
+.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-blue);
+    border: 10px solid var(--primary-color);
     background-color: transparent;
 }
 
 #weekly_specials * {
-    background-color: var(--primary-color-blue);
+    background-color: var(--primary-color);
 }
 
 #weekly_specials > * {
@@ -173,23 +328,6 @@ weekly specials area
 course info section
  */
 
-#course_info, #full_menu, #calendar, #important_links {
-    justify-content: space-between;
-    align-items: center;
-
-    background-color: var(--secondary-color);
-}
-
-#course_info {
-    display: flex;
-    background-color: var(--primary-color-blue);
-}
-
-.course-info-wrapper {
-    width: 50vw;
-    padding-right: 5vw;
-}
-
 .button {
     /* goal - make it look clickable */
     display: block;
@@ -204,23 +342,28 @@ course info section
     border: 2px blue solid;
     background-color: white;
 
-    width: 25vw;
-}
-
-.business-hours {
-    background-color: #E8BBA1;
-    padding: 10px 30px;
-    margin-right: 10px;
-    border-radius: 15px;
+    width: fit-content;
 }
 
 /*
 full menu & ta_calendar
  */
 
+.spreadsheet-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+}
+
+.important-note > p {
+    padding-left: 10px;
+    margin-bottom: 10px;
+}
+
 .embedded-iframe {
-    width: 100%;
-    height: min(80vw, 600px);
+    width: 70vw;
+    height: max(60vh, 500px);
     display: block;
     margin-top: 10px;
 }
@@ -229,16 +372,10 @@ full menu & ta_calendar
 convenience for helpful links
  */
 
-#important_links {
-    text-align: center;
-}
-
-#important_links > h2 {
-    text-align: left;
-    padding-left: 30vw;
+.subtitles {
+    color: var(--accent-color);
 }
 
-
 .flex-row {
     display: flex;
     flex-direction: row;
@@ -246,6 +383,13 @@ convenience for helpful links
     align-items: center;
 }
 
+.wrap-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
+    width: 100%;
+}
+
 .flex-column {
     display: flex;
     flex-direction: column;
@@ -253,6 +397,10 @@ convenience for helpful links
     align-items: center;
 }
 
+.flex-right {
+    align-items: flex-end;
+}
+
 .flex-space-between {
     display: flex;
     flex-direction: row;
@@ -268,17 +416,14 @@ convenience for helpful links
 #helpful-links-box {
     display: flex;
     flex-direction: row;
-    align-content: baseline;
-    margin: 0 auto;
+    align-items: start;
     justify-content: space-evenly;
-}
-#helpful-links-box h2 {
-    color: #f5ce5b;
+    margin: 1rem auto 0 auto;
 }
 
 .helpful-link {
     text-decoration: none;
-    color: white;
+    color: var(--second-accent-color);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -286,12 +431,12 @@ convenience for helpful links
     width: 150px;
     padding: 5px 15px;
     border-radius: 5px;
-    border: 3px solid white;
+    border: 3px solid #0000ff66;
     margin: 10px 0;
 }
 
 .helpful-link h3 {
-    color: white;
+    color: var(--second-accent-color);
     margin-left: 5px;
 }
 
@@ -325,42 +470,322 @@ convenience for helpful links
 }
 
 .no-border-helpful-link {
-    color: white;
+    color: var(--second-accent-color);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     width: fit-content;
     margin: 10px 0;
-    text-decoration: underline;
+    text-decoration: none;
 }
 
 .no-border-helpful-link h3 {
-    color: white;
+    color: var(--second-accent-color);
     margin-left: 5px;
 }
 .no-border-helpful-link:hover h3 {
-    color: #52A25E;
+    color: #DA627D;
 }
 
 .no-border-helpful-link:hover {
-    color: #52A25E;
+    color: #DA627D;
 }
 
+
 /*
-kitchen staff - using a grid to match the figma layout
+staff area
  */
-#kitchen_staff {
-    grid-template-areas:
-            "jeff tongyu"
-            "shelf shelf shelf shelf shelf shelf"
-            "anika anika anika michael michael michael"
-            "shelf shelf shelf shelf shelf shelf"
-            "aubrey connie dylan"
-            "shelf shelf shelf shelf shelf shelf"
-            "isaac jenny jessie"
-            "shelf shelf shelf shelf shelf shelf"
-            "kelly lauren melissa miku nick sunny";
-            "shelf shelf shelf shelf shelf shelf"
-    grid-template-rows: 200px ;
-}
-\ No newline at end of file
+.email {
+    border-left: 3px solid var(--accent-color);
+    padding-left: 10px;
+    margin: 10px 25px;
+}
+
+#emails {
+    margin-bottom: 15px;
+}
+
+.ta-box-left, .ta-box-right {
+    margin: 0 20px;
+}
+
+.ta-pastry {
+    width: 150px;
+    height: auto;
+    text-shadow: 0 0 25px brown;
+    z-index: 1;
+    align-self: flex-end;
+    opacity: 1;
+    transition: .5s ease;
+    border-radius: 25%;
+    padding-bottom: 20px;
+}
+
+.bio-text {
+    justify-content: center;
+    text-align: center;
+}
+
+.bio-text h3 {
+    color: var(--accent-color);
+    margin: 0;
+}
+
+.bio-text h4 {
+    font-size: 14px;
+    letter-spacing: normal;
+    text-transform: none;
+    max-width: 200px;
+    line-height: 1;
+    margin-bottom: 35px;
+    font-weight: normal;
+    padding: 0 5px;
+    color: var(--second-accent-color);
+}
+
+.shelf-png {
+    width: 800px;
+    height: auto;
+    margin-top: -30px;
+}
+.img-box {
+    display: flex;
+    cursor: default;
+    position: relative;
+    height: 100%;
+}
+.ta-img {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    top: calc(50% - 5px);
+    left: 50%;
+    height: 100px;
+    width: auto;
+    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;
+}
+
+
+/*
+faq area
+ */
+
+/* no text overflow */
+#faq p, #faq h1, #faq h2, #faq h3, #faq h4, #faq h5,  #faqh6 {
+    overflow-wrap: break-word;
+}
+
+#faq a {
+    color: inherit;
+}
+
+#faq a:hover, #faq a:focus {
+    color: rgb(30, 30, 30);
+    background-color: rgb(212, 212, 212);
+}
+
+/* media should not be inline, but be blocks */
+/* media shouldn't break out of their container */
+#faq img, #faq picture, #faq video, #faq canvas, #faq svg {
+    display: block;
+    max-width: 100%;
+}
+
+#faq body {
+    padding: 2rem;
+    margin: 1rem auto;
+    max-width: 60rem;
+}
+
+#faq h1 {
+    font-size: 1.5rem;
+    line-height: 1.2;
+}
+
+#faq h2 {
+    padding-top: 2rem;
+    font-size: 2rem;
+    font-weight: 400;
+}
+
+#faq h2 a {
+    text-decoration: none;
+}
+
+#faq h3 {
+    padding-top: 1rem;
+    color: var(--accent-color);
+}
+
+#faq p {
+    color: var(--second-accent-color);
+}
+
+#faq h4 {
+    font-weight: 400;
+    filter: opacity(0.5);
+}
+
+#faq footer {
+    padding-top: 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;
+}
+
+#hamburger-box {
+    display: none;
+    z-index: 100;
+}
+
+#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%;
+    }
+
+    .embedded-iframe {
+        width: 90vw;
+    }
+}
+
+
+@media only screen and (max-width: 845px) {
+    #emails {
+        width: 90%;
+    }
+}
+
+@media only screen and (max-width: 720px) {
+    header {
+        padding-left: 1rem;
+    }
+    .title-info-flex, .title, .edges {
+        padding-left: 2%;
+    }
+    .embedded-iframe {
+        width: 95vw;
+    }
+    .shelf-png {
+        width: 90%;
+    }
+    .ta-box-left, .ta-box-right {
+        max-width: 45%;
+    }
+    .ta-box-left {
+        flex-direction: column-reverse !important;
+        margin: 0 5px;
+    }
+    .ta-box-right {
+        flex-direction: column !important;
+        margin: 0 5px;
+    }
+    .ta-pastry {
+        align-self: center;
+    }
+    .ta-wrapper {
+        align-items: flex-end !important;
+    }
+    .shelf .flex-row {
+        align-items: center;
+    }
+    .bio-text h4 {
+        margin-bottom: 5px;
+    }
+    .ta-pastry {
+        padding-bottom: 25px;
+    }
+}
+
+@media only screen and (max-width: 575px) {
+    .nav-flex {
+        display: none;
+    }
+    .title-flex {
+        margin-top: 60px;
+    }
+    .course-title-wrapper {
+        margin-top: 50px;
+    }
+    .video-title-wrapper {
+        padding-left: 0;
+        margin: 0 auto;
+    }
+    .title-info-flex, .title {
+        max-width: 90vw;
+    }
+    .pastries-wrapper {
+        bottom: -30px;
+    }
+    #connie-pastries {
+        left: -50vw;
+    }
+    #helpful-links-box {
+        flex-direction: column;
+        align-items: center;
+        padding: 0 10px;
+    }
+    #helpful-links-box .subtitles {
+        font-size: 150%;
+    }
+    #helpful-links-box > .flex-column:not(:first-child) {
+        margin-top: 2rem;
+    }
+    #emails {
+        align-items: center;
+    }
+    #hamburger-box {
+        display: block;
+    }
+    .business-hours {
+        margin-top: 2rem;
+    }
+}
+
author	Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu>	2022-09-06 07:43:01 -0400
committer	Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu>	2022-09-06 07:43:01 -0400
commit	2d21c6efd18b8a393b61012a0d805fccc51759c8 (patch)
tree	631f29aa1696f981d4a2a544da62d3e940e2b297
parent	5f8787568dbdaa25b2af55e55c04144d459282de (diff)