diff --git a/12-order-summary-component-thymeleaf/src/input.css b/12-order-summary-component-thymeleaf/src/input.css
index b5c61c9..55cc701 100644
--- a/12-order-summary-component-thymeleaf/src/input.css
+++ b/12-order-summary-component-thymeleaf/src/input.css
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+html {
+ font-size: 16px;
+}
diff --git a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
index 0b357e2..a618370 100644
--- a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
@@ -6,6 +6,7 @@
+
Frontend Mentor | Order summary card
@@ -15,8 +16,7 @@
.attribution a { color: hsl(228, 45%, 44%); }
-
+
Order Summary
diff --git a/12-order-summary-component-thymeleaf/tailwind.config.js b/12-order-summary-component-thymeleaf/tailwind.config.js
index 089db9a..80cf5cc 100644
--- a/12-order-summary-component-thymeleaf/tailwind.config.js
+++ b/12-order-summary-component-thymeleaf/tailwind.config.js
@@ -2,7 +2,26 @@
module.exports = {
content: ["./src/**/*.html"],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ 'pale-blue': 'hsl(225, 100%, 94%)',
+ 'bright-blue': 'hsl(245, 75%, 52%)',
+ 'very-pale-blue': 'hsl(225, 100%, 98%)',
+ 'desaturated-blue': 'hsl(224, 23%, 55%)',
+ 'dark-blue': 'hsl(223, 47%, 23%)',
+ },
+ fontFamily: {
+ 'sans': ['Red Hat Display', 'sans-serif'], // This will set Roboto as the default sans font
+ },
+ fontWeight: {
+ 'thin': 100,
+ 'normal': 400,
+ 'semibold': 600,
+ 'bold': 700,
+ 'extrabold': 900,
+ }
+
+ },
},
plugins: [],
}