diff --git a/README.md b/README.md
index 50e5933d0..e0d5c4cd9 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,21 @@
-# Survey form with React
+# Project Survey
 
-Replace this readme with your own information about your project.
+## View it live
+https://zombie-survey.netlify.app/
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## Project Brief
+Practice React state and controlled forms by making a Typeform-like product. Your completed project should consist of at least 3 questions that need to be answered by users. When the user presses submit, they should see a summary of their answers.
 
-## The problem
+## Project requirements 
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+- [x] Ideate, design and code your app.
+- [x] Connect HTML form inputs to state.
+- [x] Use form fields and `useState` hook in React
+- [x] Use state to show different components based on where you are in the survey
+- [x] There should be a submit button. When pressed your app should hide the input form and show a summary of the user's submissions.
+- [x]  Your site should follow accessibility guidelines
 
-## View it live
+## Installation
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+    npm install
+    npm start 
diff --git a/code/package-lock.json b/code/package-lock.json
index e34d9bb1c..3a317936e 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@babel/eslint-parser": "^7.18.9",
-        "babel-eslint": "^10.1.0",
         "eslint": "^8.21.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.26.0",
@@ -4637,34 +4636,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "eslint": ">= 4.12.1"
-      }
-    },
-    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -20687,26 +20658,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
-        }
-      }
-    },
     "babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
diff --git a/code/public/Assets/githublogo.png b/code/public/Assets/githublogo.png
new file mode 100644
index 000000000..9490ffc6d
Binary files /dev/null and b/code/public/Assets/githublogo.png differ
diff --git a/code/public/Assets/linkedinlogo.png b/code/public/Assets/linkedinlogo.png
new file mode 100644
index 000000000..50aeee7c3
Binary files /dev/null and b/code/public/Assets/linkedinlogo.png differ
diff --git a/code/public/Assets/sarabattilotti.jpeg b/code/public/Assets/sarabattilotti.jpeg
new file mode 100644
index 000000000..ee4c5d29a
Binary files /dev/null and b/code/public/Assets/sarabattilotti.jpeg differ
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..f5b080225 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,90 @@
-import React from 'react';
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import { Greeting } from 'components/Greeting';
+import { Human } from 'components/Human';
+import { Name } from 'components/Name';
+import { Continent } from 'components/Continent';
+import { BadNews } from 'components/BadNews';
+import { Fitness } from 'components/Fitness';
+import { Combat } from 'components/Combat';
+import { Body } from 'components/Body';
+import { Summary } from 'components/Summary';
+import { Footer } from 'components/footer/Footer';
+import { Weapon } from 'components/Weapon';
+import zombie from 'components/zombie.png';
 
 export const App = () => {
-  return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
-}
+  const stepsTotalCount = 9;
+  const [step, setStep] = useState(0);
+  const [human, setHuman] = useState(false);
+  const [name, setName] = useState('');
+  const [continent, setContinent] = useState('');
+  const [fitness, setFitness] = useState(0);
+  const [combat, setCombat] = useState('');
+  const [body, setBody] = useState('');
+  const [weapon, setWeapon] = useState('');
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  };
+  if (step < 4) {
+    return (
+      <>
+        <section className="contentBox">
+          <div className="questionBox">
+            {step === 0 && (<Greeting />)}
+            {step === 1 && (<Human human={human} setHuman={setHuman} />)}
+            {step === 2 && (<Name name={name} setName={setName} />)}
+            {step === 3 && (<Continent name={name} continent={continent} setContinent={setContinent} />)}
+          </div>
+          {step === 0 && (<button className="button" type="button" onClick={handleStepIncrease}> Start </button>)}
+          {step >= 1 && step <= 8 && (<button className="button" type="button" onClick={handleStepIncrease}> Next </button>)}
+        </section>
+        <div className="progressBox">
+          {step >= 1 && step < 9 && (
+            <p className="progress-meter">
+              <progress value={step} max={stepsTotalCount + 1}>
+                {step} of {stepsTotalCount}
+              </progress>
+              <span>
+                <br />
+                <b>{step}</b> / {stepsTotalCount}
+              </span>
+            </p>
+          )}
+        </div>
+        <Footer />
+      </>
+    );
+  } else {
+    return (
+      <>
+        <div className="contentBox" style={{ backgroundImage: `url(${zombie})` }}>
+          <div className="questionBox">
+            {step === 4 && (<BadNews name={name} continent={continent} />)}
+            {step === 5 && (<Fitness fitness={fitness} setFitness={setFitness} />)}
+            {step === 6 && (<Combat combat={combat} setCombat={setCombat} />)}
+            {step === 7 && (<Weapon weapon={weapon} setWeapon={setWeapon} />)}
+            {step === 8 && (<Body body={body} setBody={setBody} />)}
+            {step === 9 && (<Summary name={name} continent={continent} fitness={fitness} combat={combat} weapon={weapon} body={body} />)}
+          </div>
+          {step >= 1 && step <= 8 && (<button className="button" type="button" onClick={handleStepIncrease}> Next </button>)}
+          {step === 9 && (<button className="button" type="button" onClick={() => window.location.reload(false)}> Game Over </button>)}
+        </div>
+        <div className="progressBox">
+          {step >= 1 && step < 9 && (
+            <p className="progress-meter">
+              <progress value={step} max={stepsTotalCount + 1}>
+                {step} of {stepsTotalCount}
+              </progress>
+              <span>
+                <br />
+                <b>{step}</b> / {stepsTotalCount}
+              </span>
+            </p>
+          )}
+        </div>
+        <Footer />
+      </>
+    );
+  }
+}
\ No newline at end of file
diff --git a/code/src/components/BadNews.js b/code/src/components/BadNews.js
new file mode 100644
index 000000000..e82999cd7
--- /dev/null
+++ b/code/src/components/BadNews.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const BadNews = ({ name, continent }) => {
+  return (
+    <section className="badNewsClass">
+      <h1> <em>Terrible</em> news <mark>{name}</mark> </h1>
+      <h1> A zombie <mark>apocalypse</mark>
+        <br />
+      is coming to <mark>{continent}</mark> in a month!
+      </h1>
+      <h1> Will <em>YOU</em> survive it? </h1>
+    </section>
+  );
+}
+
diff --git a/code/src/components/Body.js b/code/src/components/Body.js
new file mode 100644
index 000000000..8759239bb
--- /dev/null
+++ b/code/src/components/Body.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import heart from './heart.png'
+import brain from './brain.png'
+
+export const Body = ({ body, setBody }) => {
+  return (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <section className="body">
+        <h1>Which one do you <em>think</em>
+          <br />
+          is your best <mark>body</mark> part?
+        </h1>
+        <div className="imageAndRadio">
+          <div className="imageOnlyRadio">
+            <img src={heart} alt="heartImg" />
+            <img src={brain} alt="brainFuImg" />
+          </div>
+          <div className="radioOnly">
+            <label htmlFor="Heart">
+              <input
+                type="radio"
+                id="Heart"
+                value="Heart"
+                onChange={(event) => setBody(event.target.value)}
+                checked={body === 'Heart'} />
+        Heart
+            </label>
+            <label htmlFor="Brain">
+              <input
+                type="radio"
+                id="Brain"
+                value="Brain"
+                onChange={(event) => setBody(event.target.value)}
+                checked={body === 'Brain'} />
+        Brain
+            </label>
+          </div>
+        </div>
+      </section>
+    </form>
+  );
+}
diff --git a/code/src/components/Combat.js b/code/src/components/Combat.js
new file mode 100644
index 000000000..10ca2aab9
--- /dev/null
+++ b/code/src/components/Combat.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import judo from 'components/judo.png'
+import KungFu from 'components/KungFu.png'
+
+export const Combat = ({ combat, setCombat }) => {
+  return (
+    <form>
+      <section className="combat">
+        <h1> Which one do <em>you</em> think
+          <br />
+          is the most effective style of <mark>combat</mark>?
+        </h1>
+        <div className="imageAndRadio">
+          <div className="imageOnlyRadio">
+            <img src={judo} alt="JudoImg" />
+            <img src={KungFu} alt="KungFuImg" />
+          </div>
+          <div className="radioOnly">
+            <label htmlFor="Judo">
+              <input
+                type="radio"
+                id="Judo"
+                value="Judo"
+                onChange={(event) => setCombat(event.target.value)}
+                checked={combat === 'Judo'} />
+        Judo
+            </label>
+            <label htmlFor="Kung-Fu">
+              <input
+                type="radio"
+                id="Kung-Fu"
+                value="Kung-Fu"
+                onChange={(event) => setCombat(event.target.value)}
+                checked={combat === 'Kung-Fu'} />
+        Kung-Fu
+            </label>
+          </div>
+        </div>
+      </section>
+    </form>
+  );
+}
diff --git a/code/src/components/Continent.js b/code/src/components/Continent.js
new file mode 100644
index 000000000..02cb99f66
--- /dev/null
+++ b/code/src/components/Continent.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Continent = ({ continent, setContinent, name }) => {
+  return (
+    <form className="selectContainer" onSubmit={(event) => event.preventDefault()}>
+      <section>
+        <h1> Where are you <mark>{name}</mark>? </h1>
+        <select
+          className="select"
+          onChange={(event) => setContinent(event.target.value)}
+          value={continent}>
+          <option value="">Select continent</option>
+          <option value="Europe">Europe</option>
+          <option value="Australia">Australia</option>
+          <option value="Asia">Asia</option>
+          <option value="Africa">Africa</option>
+          <option value="North America">North America</option>
+          <option value="South America">South America</option>
+          <option value="Antarctica">Antarctica</option>
+        </select>
+      </section>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/code/src/components/Fitness.js b/code/src/components/Fitness.js
new file mode 100644
index 000000000..612a0df70
--- /dev/null
+++ b/code/src/components/Fitness.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Fitness = ({ fitness, setFitness }) => {
+  return (
+    <form
+      className="fitness"
+      onSubmit={(event) => event.preventDefault()}>
+      <section>
+        <h1>What is <em>your</em> level of physical <mark>fitness</mark>?</h1>
+        <section className="sliderSection">
+          <input
+            type="range"
+            className="slider"
+            min="1"
+            max="10"
+            value={fitness}
+            id="fitness"
+            onChange={(event) => setFitness(event.target.value)} />
+        </section>
+      </section>
+    </form>
+  );
+}
diff --git a/code/src/components/Greeting.js b/code/src/components/Greeting.js
new file mode 100644
index 000000000..cf45064d6
--- /dev/null
+++ b/code/src/components/Greeting.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Greeting = () => {
+  return (
+    <form>
+      <section className="greeting">
+        <h1> Hello! 👋</h1>
+        <h1>The sun is <mark> shining</mark> today, but what about <em>tomorrow?</em> </h1>
+      </section>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/code/src/components/Human.js b/code/src/components/Human.js
new file mode 100644
index 000000000..51d1c9f8d
--- /dev/null
+++ b/code/src/components/Human.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Human = (human, setHuman) => {
+  return (
+    <form>
+      <section className="human">
+        <h1><em>Question</em> is: </h1>
+        <label htmlFor="checkboxHuman">
+          Are you <mark>human?</mark>
+          <input
+            id="checkboxHuman"
+            type="checkbox"
+            /* checked={human} */
+            onChange={(event) => setHuman(event.target.checked)} />
+        </label>
+      </section>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/code/src/components/KungFu.png b/code/src/components/KungFu.png
new file mode 100644
index 000000000..336a9a809
Binary files /dev/null and b/code/src/components/KungFu.png differ
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
new file mode 100644
index 000000000..122951a1d
--- /dev/null
+++ b/code/src/components/Name.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Name = ({ name, setName }) => {
+  return (
+    <form>
+      <section>
+        <h1> How do <em>other</em> humans call <mark>you?</mark></h1>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          placeholder="Your Name"
+          minLength="2"
+          required />
+      </section>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
new file mode 100644
index 000000000..579e5db87
--- /dev/null
+++ b/code/src/components/Summary.js
@@ -0,0 +1,65 @@
+import React from 'react';
+
+export const Summary = ({ name, continent, fitness, combat, weapon, body }) => {
+  if (fitness <= 5) {
+    return (
+      <section className="solution">
+
+        <p> <span> {name}</span>
+          <br />
+        Zombies are coming to <span> {continent}</span>.
+          <br />
+         With a <span> {fitness}</span>  fitness level, <u>your chances are low</u>.
+          <br />
+          <u>Most likely</u> you will be the first to fall and be turned into a zombie.
+          <br />
+         Honestly, <span> {combat}</span> skills won’t be of much help to you.
+          <br />
+         Keep your <u>friends</u> close and your <span> {weapon} </span> closer.
+          <br />
+         Look at the <mark>bright side</mark>!
+          <br />
+         You will spend <u>eternity</u> feasting
+          <br />
+         on your favourite dish - human <span> {body}</span> .
+          <br />
+         GOOD LUCK!
+          <br />
+         BONUS TIP: To <u>prepare better</u> and increase your chances of survival
+          <br />
+           - watch <em>Pride Prejudice and Zombies</em> daily for the next month.
+        </p>
+
+      </section>
+    );
+  } else {
+    return (
+      <section className="solution">
+        <p> <span> {name}</span>
+          <br />
+         Zombies are coming to <span> {continent}</span>.
+          <br />
+         Even with a <span> {fitness}</span>  fitness level, <u>your chances are slim</u>.
+          <br />
+          <u>To be honest</u>, you will probably survive a couple of days <u>max</u>
+          <br />
+          by leveraging your <span> {combat} </span> skills.
+          <br />
+         Keep your <u>friends</u> close and your <span> {weapon} </span> closer.
+          <br />
+          Look at the <mark>bright side</mark>, when zombies do get you,
+          <br />
+         you will spend <u>eternity</u> feasting
+          <br />
+         on your favourite dish - human <span> {body}</span> .
+          <br />
+         GOOD LUCK!
+          <br />
+         BONUS TIP: To <u>prepare better</u> and increase your chances of survival
+          <br />
+           - watch <em>Pride Prejudice and Zombies</em> daily for the next month.
+        </p>
+      </section>
+    );
+  }
+}
\ No newline at end of file
diff --git a/code/src/components/Weapon.js b/code/src/components/Weapon.js
new file mode 100644
index 000000000..3f63175a5
--- /dev/null
+++ b/code/src/components/Weapon.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Weapon = ({ weapon, setWeapon }) => {
+  return (
+    <form
+      className="selectContainer"
+      onSubmit={(event) => event.preventDefault()}>
+      <section>
+        <h1> <em>Weapon</em> of <mark>choice?</mark> </h1>
+        <select
+          className="select"
+          onChange={(event) => setWeapon(event.target.value)}
+          value={weapon}>
+          <option value="">Select weapon</option>
+          <option value="Axe">Axe</option>
+          <option value="Bow">Bow</option>
+          <option value="Musket">Musket</option>
+          <option value="Sword">Sword</option>
+          <option value="Ugly Teddy Bear">Ugly Teddy Bear</option>
+        </select>
+      </section>
+    </form>
+  );
+}
diff --git a/code/src/components/brain.png b/code/src/components/brain.png
new file mode 100644
index 000000000..7770ac94e
Binary files /dev/null and b/code/src/components/brain.png differ
diff --git a/code/src/components/fitness.png b/code/src/components/fitness.png
new file mode 100644
index 000000000..6589ad672
Binary files /dev/null and b/code/src/components/fitness.png differ
diff --git a/code/src/components/footer/Footer.css b/code/src/components/footer/Footer.css
new file mode 100644
index 000000000..b77add146
--- /dev/null
+++ b/code/src/components/footer/Footer.css
@@ -0,0 +1,52 @@
+/* Footer */
+
+footer {
+    /* margin-top: 20px;
+    height: 120px; 
+    padding: 5px; */
+    display: flex;
+    flex-direction: column;
+    align-self: flex-end;
+  }
+  
+  footer p {
+    text-align: center;
+    color: black;
+    text-shadow: 1px 1px 2px white;
+  }
+  
+  .contact-me {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    /*
+    margin-top: 10px; */
+  }
+  
+  .contact-logo{
+    width: 20px;
+    height: 20px;
+    object-fit: cover;
+    opacity: .75;
+  }
+  
+  .contact-logo:hover{
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  
+  .about-me {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 5px;
+    /* gap: 5px;
+     padding: 5px;
+    margin-bottom: 10px;
+    */
+    color: black;
+    text-shadow: 1px 1px 2px white;
+    text-align: center;
+  }
\ No newline at end of file
diff --git a/code/src/components/footer/Footer.js b/code/src/components/footer/Footer.js
new file mode 100644
index 000000000..da36372e1
--- /dev/null
+++ b/code/src/components/footer/Footer.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import './Footer.css';
+
+export const Footer = () => {
+  return (
+    <footer>
+      <div className="contact-me">
+        <a href="https://www.linkedin.com/in/sarabattilotti/"><img src="./assets/linkedinlogo.png" className="contact-logo" alt="link to LinkedIn" /></a>
+        <a href="https://cerulean-madeleine-a3d3da.netlify.app/"><img src="./assets/sarabattilotti.jpeg" className="contact-logo" alt="link to Sara's portfolio" /></a>
+        <a href="https://github.com/SaraBat"><img src="./assets/githublogo.png" className="contact-logo" alt="link to GitHub" /></a>
+      </div>
+      <div className="about-me">
+        <p>Designed by Sara Battilotti</p>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/heart.png b/code/src/components/heart.png
new file mode 100644
index 000000000..13cb49314
Binary files /dev/null and b/code/src/components/heart.png differ
diff --git a/code/src/components/judo.png b/code/src/components/judo.png
new file mode 100644
index 000000000..194b7c0b1
Binary files /dev/null and b/code/src/components/judo.png differ
diff --git a/code/src/components/sfondoSole.png b/code/src/components/sfondoSole.png
new file mode 100644
index 000000000..243b3e5a1
Binary files /dev/null and b/code/src/components/sfondoSole.png differ
diff --git a/code/src/components/zombie.png b/code/src/components/zombie.png
new file mode 100644
index 000000000..31629859a
Binary files /dev/null and b/code/src/components/zombie.png differ
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..b24b332a5 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,181 @@
 body {
-  margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+  background: conic-gradient(from 135deg, #F9EAA7, #E5C551);
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.contentBox {
+  background-image:url("./components/sfondoSole.png");
+  background-position: center; /* Center the image */
+  background-repeat: no-repeat; /* Do not repeat the image */
+  background-size: cover; /* Resize the background image to cover the entire container */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 50px; 
+  width: 70%;
+  height: 80%;
+  margin: auto;
+  margin-top: 10%;
+  margin-bottom: 5%;
+  gap: 20px;
+  border: 5px double black;
+  border-radius: 25px;
+
+}
+
+.questionBox, .progressBox, .greeting, .human, .badNewsClass, .fitness, .sliderSection, .solution {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+mark {
+background-color: #E5C551; 
+}
+
+h1 {
+  text-align: center;
+}
+.solution p {
+ size: 10px;
+ text-align: center;
+ text-decoration: solid;
+ font-weight: 700;
+}
+
+.solution span {
+  text-decoration: 2px double black;
+  background-color: #E5C551;
+}
+
+.button {
+  background-color: #E5C551; 
+  cursor: pointer;
+  font-weight: 700;
+  height: 75px;
+  width: 75px;
+  border: 2px double #614124;
+  border-radius: 50%;
+  margin: 10px;
+  padding: 8px 15px;
+  opacity: 0.7;
+}
+
+.button:hover{
+  transform: scale(1.2);
+  opacity: 1;
+}
+
+input:checked {
+  border: none;
+  outline: 2px solid black;
+}
+
+input[type=text] {
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid black;
+}
+
+input[type=text]:focus {
+  border: 3px black;
+}
+
+.selectContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.select {
+  background-color: transparent;
+  width: 200px;
+  border-color: 2px solid black;
+  justify-content: center;
+  align-items: center;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+  background: transparent;
+  width: 200px;
+  margin: 0;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 32px;
+  height: 32px;
+  /* border: 0; */
+  background: url('./components/fitness.png');
+  cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  /* width: 100%; */
+  height: 25px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px white, 0px 0px 1px white;
+  background: white;
+  border-radius: 1.3px;
+  border: 0.2px double #010101;
+}
+
+input[type=range]::-webkit-slider-runnable-track:hover {
+  transform: scale(1.2);
+}
+
+.imageAndRadio {
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  gap: 10px;
+}
+
+.imageOnlyRadio {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  gap: 70px;
+}
+
+.radioOnly{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 30px; 
+}
+
+progress[value] {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0.5px solid black;
+  border-radius: 2px;
+}
+
+progress[value]::-webkit-progress-value {
+    background-color:black;
+    border-radius: 2px;
+    height: 17px;
+    
+}
+
+progress[value]::-webkit-progress-bar {
+  background-color: white;
+}
+
+