Making the roof a little more roofy

index.css

@@ -26,13 +26,42 @@ li {
   color: var(--primary-color);
 }
 
+.customer-satisfaction-roof-parent {
+  filter: url(#round);
+  /* Making the triangle fit the rest of the house */
+  margin: 0 -1rem;
+}
+
 .customer-satisfaction-roof {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   text-align: center;
-  border-radius: 5rem 5rem 0.5rem 0.5rem;
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  min-height: 150px;
+  font-size: 12pt;
+}
+
+/* mini screen */
+@media only screen and (max-width: 480px) {
+  .customer-satisfaction-roof {
+    font-size: 11pt;
+  }
+}
+
+/* medium screen */
+@media only screen and (min-width: 751px) and (max-width: 1300px) {
+  .customer-satisfaction-roof {
+    font-size: 16pt;
+  }
+}
+
+/* large screen */
+@media only screen and (min-width: 1301px) {
+  .customer-satisfaction-roof {
+    font-size: inherit;
+  }
 }
 
 .customer-satisfaction-roof h2,

index.html

@@ -20,12 +20,14 @@
       <h1 class="thinking-people-system">Thinking People System</h1>
     </header>
     <main>
+      <div class="customer-satisfaction-roof-parent">
         <section class="customer-satisfaction-roof focusable">
           <h2 class="customer-satisfaction">Customer Satisfaction</h2>
           <p class="value-analysis-value-engineering">
             Value analysis / Value engineering
           </p>
         </section>
+      </div>
       <section class="levers">
         <ul>
           <li class="security focusable">Security</li>
@@ -152,6 +154,20 @@
         </li>
       </ul>
     </details>
+    <svg class="flt_svg" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="round">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
+            result="flt_tag"
+          />
+          <feComposite in="SourceGraphic" in2="flt_tag" operator="atop" />
+        </filter>
+      </defs>
+    </svg>
     <script type="module" src="main.ts"></script>
   </body>
 </html>