fixed any syntax errors

README.md

@@ -26,29 +26,29 @@ This assignment should prove that a student is able to:
 
 ## Standard requirements
 
-- [ ] Fork the project to your github account
-- [ ] Clone the project to your computer
-- [ ] Open the project in VSCode with `code <cloned_repo_folder_name>`
-- [ ] Initialize playwright and install project packages
-  - [ ] Use `npm i` to install packages
-  - [ ] Use `npm run browser-install` to install the browser environment for testing (~131mb will be downloaded)
-  - [ ] (Windows users only) Use `npm run deps-install` to install playwright additional dependencies (160mb will be downloaded)
-- [ ] All the tasks of the "Specific requirements" section MUST be solved
-- [ ] **The project's file/folder structure should NOT be edited!**
+- [x] Fork the project to your github account
+- [x] Clone the project to your computer
+- [x] Open the project in VSCode with `code <cloned_repo_folder_name>`
+- [x] Initialize playwright and install project packages
+  - [x] Use `npm i` to install packages
+  - [x] Use `npm run browser-install` to install the browser environment for testing (~131mb will be downloaded)
+  - [x] (Windows users only) Use `npm run deps-install` to install playwright additional dependencies (160mb will be downloaded)
+- [x] All the tasks of the "Specific requirements" section MUST be solved
+- [x] **The project's file/folder structure should NOT be edited!**
 - [ ] All the tests MUST pass. Fix any errors before you submit (acceptance criteria).
   - [ ] Use `npm run test` to run all tests in the terminal
   - [ ] (Optional) Use `npm run test-ui` to run all the tests with GUI
   - [ ] (Optional) Use `npm run show-report` to see the latest report in the browser
 - [ ] VSCode IDE MUST have 0 problems listed
 - [ ] The code of the index.html and styles.css should pass the W3C validation (Feel free to use either the "[w3c web validator](https://marketplace.visualstudio.com/items?itemName=CelianRiboulet.webvalidator)" VSCode extension or the "[Online w3c Markup Validation Service](https://validator.w3.org/#validate_by_input)")
-- [ ] The code MUST be formatted with Prettier.
-- [ ] Push the changes to the Github repo, when finished.
-- [ ] Submit a .txt file with the Github repo url.
+- [x] The code MUST be formatted with Prettier.
+- [x] Push the changes to the Github repo, when finished.
+- [x] Submit a .txt file with the Github repo url.
 
 ## Specific requirements
 
 For the styles.css file:
 
-- [ ] Find and fix all the syntax issues in the file
+- [x] Find and fix all the syntax issues in the file
   - There are commented out hints for you to find the CSS rules with incorrect syntax
   - When running tests, the failed test message contains the CSS file line number of the rule that was tested.

css/styles.css

@@ -15,7 +15,7 @@ body {
 
 /* 🔴 CSS Property name Error here 👇 */
 body {
-  background-colo: #030a1e;
+  background-color: #030a1e;
 }
 
 .content {
@@ -37,10 +37,10 @@ h2 {
 }
 
 /* 🔴 CSS Syntax Error here 👇 */
-main
-  width: 100%;
-  padding-top: 60px;
-  display: flex;
+main{
+  width: 100;
+  padding-top: 60%;
+  display: block;
   flex-direction: column;
   gap: 60px;
 }
@@ -50,7 +50,7 @@ main
   width: 100%;
      max-width: 964px;
   margin: 0 auto;
-  display; flex;
+  display: flex;
    gap: 30px;
 }
 
@@ -62,7 +62,7 @@ i {
 /* 🔴 CSS Syntax Error here 👇 */
 .box {
   background: linear-gradient(#17192c, #1a1c30),
-  border: 1px solid #2c3044;
+  border 1px solid #2c3044;
   padding: 30px;
   width: 100%;
   border-radius: 16px;
@@ -110,7 +110,7 @@ i {
   padding: 12px;
   background: linear-gradient(45deg, #1e2338, #191e34);
   border: 1px solid #282d43;
-    borderRadius: 5px;
+    border-radius: 5px;
 }
 
 .option-item-name,
@@ -129,15 +129,15 @@ i {
 /* 🔴 CSS Syntax Error here 👇 */
 .option-item-name .hint,
 .review-author-name .hint,
-.form-input-group label; {
+.form-input-group label {
   font-size: 12px;
   color: #b6b8c0;
 }
 
 /* 🔴 CSS Syntax Error here 👇 */
 .option-item-selected {
   display: flex;
-  align-items = center;
+  align-items: center;
   gap: 16px;
 }
 
@@ -166,7 +166,7 @@ label {
 
 /* 🔴 CSS property name Error here 👇 */
 [type='radio']:checked ~ label .circle {
-  BackgroundColor: white;
+  Background-color: white;
   border: 4px solid #5f57ff;
 }
 
@@ -180,7 +180,7 @@ label {
   gap: 20px;
   padding: 20px;
   overflow: hidden;
-  Pposition: relative;
+  position: relative;
 }
 
 /* 🔴 CSS syntax Error here 👇 */
@@ -192,7 +192,7 @@ label {
   bottom: 0;
   left: 0;
   right: 0;
-  background-image: url(/assets/backgrounds/review-bg.png');
+  background-image: url(/assets/backgrounds/review-bg.png);
   background-size: cover;
 }
 
@@ -378,5 +378,5 @@ footer ul a {
 
 /* 🔴 CSS property name Error here 👇 */
 footer ul li span a {
-  colorrrrr: rgb(218, 82, 82);
+  color: rgb(218, 82, 82);
 }