Update README.md

README.md

@@ -1,16 +1,18 @@
 <h3 align="center">Cute Kuma</h3>
 
 <p align="center">
-  Cute CSS for  <a href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a> status page with a simple and modern look
+  Give your <a href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a> status page a cute and modern look
   <br>
   <a href="https://kuma.denisromanov.ru"><strong>Live demo »</strong></a>
   <br>
   <br>
-  <a href="https://github.com/dermv/cute-kuma/tree/main#features">Features</a>
+  <a href="#features">Features</a>
   ·
-  <a href="https://github.com/dermv/cute-kuma/tree/main#install">Install</a>
+  <a href="#installation">Installation</a>
   ·
-  <a href="https://github.com/dermv/cute-kuma/tree/main#personalization">Personalization</a>
+  <a href="#personalization">Personalization</a>
+  ·
+  <a href="#troubleshooting">Troubleshooting</a>
 </p>
 
 <p>
@@ -23,28 +25,49 @@
 
 ## Features
 
-- Modern design: Inspired by top monitoring services
-- Light and dark themes
-- No refresh timer: Removed by default (optional restoration)
-- Clean code: Easy to customize and extend
+- Modern design inspired by top monitoring services
+- Support for Uptime Kuma v1 and v2
+- Support for light and dark themes
+- Hidden refresh timer for a cleaner look (can be easily restored)
+- Clean, easily customizable and extendable code
 
-## Install
+## Installation
 
 1. In your Uptime Kuma dashboard, navigate to status page.
 2. Click `Edit Status Page`.
-3. Scroll down to `Custom CSS`.
+3. Scroll down to `Custom CSS` field.
 4. Copy the contents of `main.css` and paste it into the `Custom CSS` field.
 5. Click `Save` at the bottom.
 
 ## Personalization
 
-You can modify the values inside `:root {}` to fit your needs.
+You can easily customize the theme by modifying the variables inside the `:root {}` block.
+
+### Restoring the Refresh Timer
+
+The refresh timer is hidden by default. To make it visible again, find the `.refresh-info` rule and remove or comment out the `display: none;` line.
+
+## Troubleshooting
+
+### Country Flag Emojis Not Displaying on Windows
+
+Browsers on Windows cannot render country flag emojis correctly.
+
+To fix it, add the following code to the very beginning of your CSS.
 
-By default, the refresh timer is removed. Remove/comment `display: none;` in `.refresh-info` to restore visibility as shown here:
 ```
-.refresh-info[data-v-b8247e57] {
-  /* display: none; */
-  opacity: 1;
-  margin-bottom: 0 !important;
+@font-face {
+  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2");
+  font-family: "Twemoji Country Flags";
+  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062, U+E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073, U+E0074, U+E0077, U+E007F;
+}
+```
+
+> [!IMPORTANT]
+> For **Uptime Kuma v1** you most likely need to add the following code.
+
+```
+#app {
+  font-family: BlinkMacSystemFont, "segoe ui", Roboto, "helvetica neue", Arial, "noto sans", sans-serif, "apple color emoji", "Twemoji Country Flags", "segoe ui emoji", "segoe ui symbol", "noto color emoji";
 }
 ```