added language change button

main_style.css

@@ -8,6 +8,7 @@
     --serif: 'Instrument Serif', Georgia, serif;
     --sans: 'DM Sans', system-ui, sans-serif;
     --nav-w: 230px;
+    --font-size: 17px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -35,7 +36,7 @@ span,
 li {
     color: var(--muted);
     line-height: 1.7;
-    font-size: 15px;
+    font-size: var(--font-size);
 }
 
 h1,
@@ -62,18 +63,64 @@ a {
     width: 230px;
 }
 
-.hidden {
-  display: none;
+.lang-dropdown {
+    display: flex;
+    gap: 3px;
+    margin-top: 10px;
+    width: 83px;
 }
 
-.dropdown-content {
-  border: 1px solid #ccc;
-  background: white;
-  position: absolute;
+.lang-menu {
+    display: flex;
+    gap: 3px;
+    margin-top: 5px;
+}
+
+.lang-item {
+    cursor: pointer;
+    background-color: var(--surface);
+    width: 40px;
+    height: 20px;
+    text-align: center;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--muted);
+}
+
+.lang-item:hover {
+    border-color: var(--text);
+    color: var(--text);
+}
+
+#lang-button {
+    width: 40px;
+    height: 30px;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    cursor: pointer;
+    background-color: var(--surface);
+    color: var(--muted);
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    padding: 3px 6px;
+
+    font-size: 14px;
+}
+
+#lang-button:hover {
+    border-color: var(--text);
+    color: var(--text);
+}
+
+option {
+    border: 1px solid var(--border);
+    border-radius: 8px;
 }
 
 #sidebar-top {
-    padding: 36px 32px 28px;
+    padding: 36px 32px 20px;
     border-bottom: 1px solid var(--border);
 }
 
@@ -86,6 +133,7 @@ a {
 #sidebar-top-content p {
     margin: 0;
     pad: 0;
+    font-size: 13px;
 }
 
 #navbar {
@@ -104,7 +152,7 @@ a {
     position: relative;
     text-decoration: none;
     color: var(--muted);
-    font-size: 0.9rem;
+    font-size: 13px;
 }
 
 .nav-link:hover {
@@ -136,6 +184,7 @@ a {
 .nav-link .idx {
     color: var(--muted);
     font-weight: normal;
+    font-size: 13px;
 }
 
 #sidebar-bottom {
@@ -160,7 +209,7 @@ a {
 #introduction {
     padding-top: 100px;
     margin-left: 60px;
-    margin-bottom: 150px;
+    margin-bottom: 60px;
     margin-right: 100px;
 }
 
@@ -248,7 +297,8 @@ a {
 }
 
 .text-content a {
-    font-size: 15px;
+    font-size: var(--font-size);
+    font-weight: normal;
 }
 
 .block-image img {
@@ -276,4 +326,8 @@ a {
 .link-row {
     margin: 60px;
     margin-top: 30px;
+}
+
+.hidden {
+    display: none;
 }