Add Language Support and Copy English Translation as Placeholder

static/css/style.css

@@ -193,8 +193,9 @@ form {
 }
 
 .guide-container {
-    display: flex;
+    display: block;
     margin: 0 auto;
+    margin-bottom: 8px;
     width: 70%;
     background-color: #770505;
     border-radius: 15px;
@@ -202,6 +203,29 @@ form {
     font-size: 16px;
 }
 
+.guide-list {
+    display: flex;
+}
+
+.guide-langs {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.guide-langs a {
+    font-size: 20px;
+    height: 48px;
+    cursor: pointer;
+    border: 2px solid #a00b0b;
+    border-radius: 10px;
+    background-color: #6d0606;
+    color: white;
+    margin: 4px 0;
+    text-align: center;
+    line-height: 48px;
+    text-decoration: none;
+}
+
 @media (orientation: portrait) {
     .guide-container {
         display: block;
@@ -218,6 +242,20 @@ form {
         height: 128px;
         line-height: 128px;
     }
+
+    .guide-list {
+        display: block;
+    }
+
+    .guide-langs {
+        grid-template-columns: 1fr;
+    }
+
+    .guide-langs a {
+        font-size: 60px;
+        height: 128px;
+        line-height: 128px;
+    }
 }
 
 code {