feat: update my custom templates

src/templates/alex_deluxe.css

@@ -1,11 +1,21 @@
+html, body {
+	background: #5397f5;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	height: 90vh;
+}
+
+
 .container-front {
   padding: 1rem;
   background: #5397f5;
-  width: 80vw;
+  max-width: 80vw;
+	width: 100%;
   margin: 0 auto;
   color: white;
   font-size: 3.5vw;
-  border-radius: 0.7rem;
 }
 
 .container-back {
@@ -15,11 +25,17 @@
   margin: 0 auto;
   color: white;
   font-size: 3.5vw;
-  border-radius: 0.7rem;
 }
 
 hr {
   background-color: white;
   color: white;
   border-color: white;
 }
+
+div a {
+	color: black !important;
+	font-weight: bold
+	background: white;
+	padding: 0.2rem 0.3rem;
+}

src/templates/alex_deluxe_basic_back.html

@@ -1,4 +1,7 @@
 <div class=container-back>
-	<span class="front-text-post">{{Front}}</span>
-	<hr id="answer"><span class="back-text">{{Back}}</span>
+	<h1>{{Front}}</h1>
+	{{#Back}}
+	<hr id="answer">
+	<h2>{{Back}}</h2>
+	{{/Back}}
 </div>

src/templates/alex_deluxe_basic_front.html

@@ -1,3 +1,3 @@
 <div class=container-front>
-    <span class="front-text-pre">{{Front}} </span>
+    <h1>{{Front}}</h1>
 </div>

src/templates/alex_deluxe_cloze_back.html

@@ -1,3 +1,7 @@
 <div class=container-back>
-    <span class="front-text-pre">{{cloze:Text}}</span><br><span class="extra">{{Extra}}</span>
+    <h1>{{cloze:Text}}</h1>
+    {{#Extra}}
+    <hr>
+    <h2>{{Extra}}</h2>
+    {{/Extra}}
 </div>

src/templates/alex_deluxe_cloze_front.html

@@ -1,3 +1,3 @@
 <div class=container-front>
-    <span class="front-text-pre">{{cloze:Text}}</span>
+    <h1>{{cloze:Text}}</h1>
 </div>

src/templates/alex_deluxe_cloze_style.css

@@ -1,25 +1,57 @@
-.container-front {
+span {
+	color: white !important;
+}
+
+html, body {
+	background: #5397f5;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	height: 80vh;
+}
+
+.container-front, .container-back {	
+  font-size: 2.81em;
   padding: 1rem;
   background: #5397f5;
-  width: 80vw;
+  max-width: 80vw;
+	width: 100%;
   margin: 0 auto;
   color: white;
-  font-size: 3.5vw;
-  border-radius: 0.7rem;
 }
 
-.container-back {
-  padding: 1rem;
-  background: #5397f5;
-  width: 80vw;
-  margin: 0 auto;
+hr {
+  background-color: white;
   color: white;
-  font-size: 3.5vw;
-  border-radius: 0.7rem;
+  border-color: white;
+}
+
+a {
+	color: white;
+}
+
+.container-back .cloze {
+	text-decoration: underline;
 }
 
+
 hr {
   background-color: white;
   color: white;
   border-color: white;
 }
+
+div a {
+	color: black !important;
+	font-weight: bold
+	border: 0.9px solid white;
+	background: white;
+	padding: 0.2rem 0.3rem;
+	border-radius: 6px;
+}
+
+div a:hover {
+	background: blue;
+	color: pink !important;
+}