Test

Author: Rohan Doijode

guitar-chords/Sapphire.html

@@ -6,53 +6,64 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5974826855904767"
      crossorigin="anonymous"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=EB+Garamond:wght@400;600&display=swap" rel="stylesheet">
   <style>
     html, body {
       height: 100%;
       margin: 0;
       padding: 0;
-      background: #f6f8fb;
+      background: #f5ecd7 url('https://www.transparenttextures.com/patterns/old-mathematics.png');
     }
     body {
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
-      font-family: 'Segoe UI', Arial, sans-serif;
-      color: #222;
-      background: #f6f8fb;
+      font-family: 'EB Garamond', serif;
+      color: #3e2c1c;
+      background: #f5ecd7 url('https://www.transparenttextures.com/patterns/old-mathematics.png');
     }
     .card {
-      background: #fff;
+      background: #fffbe6;
       margin: 2.5em 0 2em 0;
       padding: 2.5em 2em 2em 2em;
-      border-radius: 18px;
-      box-shadow: 0 4px 32px 0 rgba(42,77,122,0.10), 0 1.5px 6px 0 rgba(42,77,122,0.07);
+      border-radius: 14px;
+      border: 2px solid #c9b18a;
+      box-shadow: 0 0 40px rgba(120, 90, 40, 0.10);
       max-width: 700px;
       width: 100%;
+      font-family: 'EB Garamond', serif;
     }
     h1 {
       font-size: 2.5em;
-      color: #1a355c;
+      color: #7c4a03;
       margin-bottom: 0.2em;
       text-align: center;
       letter-spacing: 0.03em;
+      font-family: 'Special Elite', cursive;
+      text-shadow: 1px 1px 0 #fffbe6, 2px 2px 0 #b97a56;
     }
     h2 {
       font-size: 1.3em;
-      color: #2a4d7a;
+      color: #b97a56;
       margin-top: 0;
       margin-bottom: 1.5em;
       text-align: center;
       font-weight: 400;
       letter-spacing: 0.01em;
+      font-family: 'Special Elite', cursive;
     }
     h3 {
-      color: #2a4d7a;
+      color: #7c4a03;
       margin-top: 2em;
       margin-bottom: 0.7em;
       font-size: 1.15em;
       letter-spacing: 0.01em;
+      font-family: 'Special Elite', cursive;
+      border-bottom: 2px dashed #b97a56;
+      padding-bottom: 6px;
+      background: linear-gradient(90deg, #f5ecd7 60%, #e7d3b3 100%);
+      box-shadow: 0 1px 0 #fffbe6;
     }
     .section {
       margin-bottom: 2em;
@@ -67,6 +78,8 @@
       border-radius: 4px;
       padding: 0 2px;
       transition: background 0.15s;
+      font-family: 'Special Elite', cursive;
+      font-size: 1.08em;
     }
     .chord:hover, .chord:focus {
       background: #e7fbe9;
@@ -76,16 +89,17 @@
       position: absolute;
       left: 0;
       top: 1.5em;
-      background: #fff;
-      color: #222;
-      border: 1px solid #2a4d7a;
+      background: #fffbe6;
+      color: #3e2c1c;
+      border: 1px solid #b97a56;
       border-radius: 6px;
       padding: 0.5em 1em;
-      font-size: 0.95em;
+      font-size: 0.97em;
       white-space: pre;
       z-index: 100;
-      box-shadow: 0 2px 8px rgba(42,77,122,0.15);
+      box-shadow: 0 2px 8px rgba(120, 90, 40, 0.15);
       min-width: 90px;
+      font-family: 'EB Garamond', serif;
     }
     .chord:hover .chord-popup,
     .chord:focus .chord-popup {
@@ -100,31 +114,48 @@
       top: 1.5em;
     }
     pre, code {
-      background: #f4f4f4;
+      background: #f9f4e7;
       padding: 1em;
       border-radius: 8px;
       overflow-x: auto;
-      font-size: 1em;
+      font-size: 1.07em;
       line-height: 1.5;
       margin: 0.5em 0 1.5em 0;
+      font-family: 'EB Garamond', serif;
+      color: #4d3b23;
+      border: 1.5px solid #c9b18a;
+      box-shadow: 0 0 8px rgba(120, 90, 40, 0.07);
     }
     .notes {
       font-size: 0.97em;
       color: #555;
     }
     a {
-      color: #2a4d7a;
+      color: #7c4a03;
       text-decoration: underline;
       transition: color 0.15s;
+      font-family: 'EB Garamond', serif;
     }
     a:hover {
-      color: #1a355c;
+      color: #b97a56;
+    }
+    ul {
+      list-style-type: square;
+      padding-left: 22px;
+    }
+    li {
+      margin-bottom: 6px;
     }
     footer {
       margin-top: 2em;
       text-align: center;
-      color: #888;
-      font-size: 0.95em;
+      color: #7c4a03;
+      font-size: 1em;
+      border-top: 2px double #b97a56;
+      font-family: 'Special Elite', cursive;
+      letter-spacing: 1px;
+      background: #e7d3b3;
+      padding: 18px 0 0 0;
     }
     @media (max-width: 800px) {
       .card {