scaled styles 75%

client/src/App.css

@@ -31,35 +31,35 @@ html,
 }
 
 h1 {
-  font-size: 80px;
-  margin: 8px;
+  font-size: 60px;
+  margin: 6px;
   font-weight: normal;
 }
 
 h2 {
-  font-size: 52px;
-  margin: 8px;
+  font-size: 39px;
+  margin: 6px;
   font-weight: normal;
 }
 
 h3 {
-  font-size: 34px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  font-size: 25px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   font-weight: normal;
 }
 
 h4 {
-  font-size: 28px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  font-size: 18px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   font-weight: normal;
 }
 
 p {
-  font-size: 24px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  font-size: 18px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   font-weight: normal;
 }
 
@@ -97,50 +97,45 @@ p {
   align-items: center;
 }
 
-.text-input {
+input[type=text], textarea {
   background-color: white;
-  border-radius: 12px;
+  border-radius: 9px;
   border: none;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 25px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  font-size: 19px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
 }
 
-.name-input {
-  width: 400px;
-  height: 30px;
-  padding-right: 40px; /* Make room for the arrow */
-}
-
 .input-arrow {
   position: absolute;
   right: 10px;
   color: black; /* Adjust arrow color as needed */
 }
 
-.food-buttons {
-  display: flex;
-}
-
-.outline-button {
+button {
   font-family: "Tinos", serif;
   font-style: normal;
-  font-size: 34px;
+  font-size: 25px;
   font-weight: normal;
   color: white;
   background-color: transparent;
-  border: 2px solid white;
-  border-radius: 25px;
-  padding: 0px 22px 0px 22px;
+  border: 1.5px solid white;
+  border-radius: 19px;
+  padding: 0px 16px 0px 16px;
   cursor: pointer;
 }
 
+button:hover {
+  background-color: white;
+  color: rgba(0, 0, 0, 1);
+}
+
 .wide-button {
-  padding: 8px 100px 8px 100px !important;
+  padding: 6px 75px 6px 75px;
 }
 
 @media (prefers-reduced-motion: no-preference) {

client/src/components/FoodButton.jsx

@@ -24,10 +24,10 @@ function FoodButton({
   }
 
   const buttonStyle = {
-    marginLeft: "5px",
-    marginRight: "5px",
-    width: "75px",
-    height: "75px",
+    marginLeft: "4px",
+    marginRight: "4px",
+    width: "56px",
+    height: "56px",
     borderRadius: "50%",
     display: "flex",
     justifyContent: "center",
@@ -50,11 +50,11 @@ function FoodButton({
     height: "80%",
     objectFit: "cover",
     borderRadius: "50%",
+
   };
 
   return (
     <div
-      className="food-button"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       style={buttonStyle}

client/src/components/Foods.jsx

@@ -41,27 +41,27 @@ function Foods({ topic, onContinueForward }) {
     setSelectedFoods((prevFoods) => prevFoods.filter((f) => f !== food));
   }
 
+  const discriptionStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    transition: "opacity 0.5s ease",
+    opacity: currentFood === null ? 1 : 0,
+    pointerEvents: currentFood === null ? "all" : "none",
+  };
+
   return (
     <div className="wrapper">
       <div className="text-container">
         <div>
           <h1>THE FOODS:</h1>
           <div style={{ position: "relative" }}>
-            <div
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                transition: "opacity 0.5s ease",
-                opacity: currentFood === null ? 1 : 0,
-                pointerEvents: currentFood === null ? "all" : "none",
-              }}
-            >
-              <h4>
+            <div style={discriptionStyle}>
+              <p>
                 Please select 2-5 foods
                 <br /> to participate in the discussion about:
-              </h4>
+              </p>
               <h4>{capitalizeFirstLetter(topic)}</h4>
             </div>
             <div
@@ -80,7 +80,7 @@ function Foods({ topic, onContinueForward }) {
           </div>
         </div>
         <div>
-          <div className="food-buttons">
+          <div style={{display: "flex"}}>
             {foods.map((food) => (
               <FoodButton
                 key={food.name}

client/src/components/HumanNameInput.jsx

@@ -44,13 +44,19 @@ function HumanNameInput(props) {
     }
   }
 
+  const inputStyle = {
+    width: "300px",
+    height: "22px",
+    paddingRight: "30px"/* Make room for the arrow */
+  };
+
   return (
     <div>
       <h3>please type your name to enter:</h3>
       <div className="input-icon-wrapper">
         <input
           ref={inputRef}
-          className="text-input name-input"
+          style={inputStyle}
           type="text"
           value={humanName}
           placeholder="your name"

client/src/components/NavItem.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 function NavItem({ name, onDisplayOverlay, isActive }) {
   const navItemStyle = {
-    marginLeft: "25px",
+    marginLeft: "19px",
     cursor: "pointer",
   };
 

client/src/components/Topics.jsx

@@ -117,13 +117,13 @@ function Topics(props) {
                   {topic}
                 </button>
               ))}
-              <h4>please select an issue for the discussion</h4>
+              <p>please select an issue for the discussion</p>
             </div>
             <textarea
               ref={topicTextareaRef}
               className={`${
                 selectedTopic === "choose your own" ? "" : "hidden"
-              } text-input`}
+              }`}
               rows="2"
               value={customTopic}
               placeholder="your topic"