added email protection and more interests

style.css

@@ -65,6 +65,20 @@ body {
     max-height: 200px;
 }
 
+.card .front hr {
+    height: calc(var(--height) / 2);
+    width: 0px;
+
+    border-radius: 10px;
+    border: 2px dashed lightgray;
+
+    margin: 0 10px;
+}
+
+.card .front .name {
+    margin-left: 30px;
+}
+
 .card .front .name h1 {
     text-align: left;
     margin: 0 0 10px 0;
@@ -99,17 +113,31 @@ body {
 
 .card .back ul li i {
     width: 20px;
-    margin-right: 10px;
+    margin-right: 7px;
     text-align: center;
+    color: #404040;
+    font-size: 0.9em;
+    line-height: 1em;
 }
 
 .card .back .interests {
-    font-size: 1.5em;
+    font-size: 1.4em;
     letter-spacing: 0.3em;
     line-height: 1.6em;
     text-align: center;
 }
 
+.card .back .interests h2 {
+    font-size: 0.7em;
+    letter-spacing: 0;
+    line-height: 1em;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 5px;
+    color: #404040;
+}
+
 .card .flip-button {
     position: absolute;
     right: 0;
@@ -117,7 +145,7 @@ body {
     padding: 0 20px 10px 0;
 
     font-size: 1.5em;
-    color: gray;
+    color: #404040;
 }
 
 .mobile-visible {
@@ -128,6 +156,11 @@ a {
     font-style: normal;
     text-decoration: none;
     color: black;
+    cursor: pointer;
+}
+
+.requires-js {
+    display: none;
 }
 
 @media (hover: hover) {
@@ -149,5 +182,18 @@ a {
     }
     .card .back {
         transform: rotateY(180deg);
-    }    
+    }
+    .card .front hr {
+        width: calc(var(--width) / 2);
+        height: 0px;
+    
+        border-radius: 10px;
+        border: 2px dashed lightgray;
+    
+        margin: 0 10px;
+    }
+    .card .front .name {
+        margin-top: 30px;
+        margin-left: 0;
+    }
 }