Create light.css

themes/light.css

@@ -0,0 +1,139 @@
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
+
+body {
+        margin: 40px auto;
+        width: 610px;
+        max-width: 100%;
+        line-height: 1.6;
+        font-size: 16px;
+        background: #fffff4;
+        color: #3a1616;
+        padding: 0 10px;
+        font-size: 18px;
+        line-height: 28px;
+        font-family: "Lora";
+        font-weight: 500;
+        box-sizing: border-box;
+        /* Smooth the font a little bit, it's a
+         bit too bold on retina screens */
+        -webkit-font-smoothing: antialiased;
+        
+}
+
+/* --------------------------------------------------- */
+/* Make a nice input form with rounded corners and hover
+ animations*/
+/* --------------------------------------------------- */
+input {
+        padding: 10px 16px;
+        margin: 2px 0;
+        box-sizing: border-box;
+        border: 2px solid #dabebe;
+        border-radius: 6px;
+        background: #fffff4;
+        color: #3a1616;
+        font-size: 16px;
+        -webkit-transition: 0.5s;
+        transition: 0.5s;
+        outline: none;
+}
+input:focus {
+        border: 2px solid #3a1616;
+}
+
+/* --------------------------------------- */
+/* The button is very similar to the input */
+/* --------------------------------------- */
+.button {
+        background-color: #fffff4;
+        border: none;
+        color: black;
+        padding: 6px 14px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        margin: 4px 2px;
+        transition-duration: 0.4s;
+        cursor: pointer;
+        border: 2px solid #3a1616;
+        border-radius: 6px;
+}
+.button:hover {
+        background-color: #3a1616;
+        color: white;
+}
+
+/* ----------------------------------------------- */
+/* Various classes for messages of different kinds */
+/* ----------------------------------------------- */
+.isa_info,
+.isa_success,
+.isa_warning,
+.isa_error {
+        width: 90%;
+        margin: 10px 0px;
+        padding: 12px;
+}
+.isa_info {
+        color: #00529b;
+        background-color: #bde5f8;
+}
+.isa_success {
+        color: #4f8a10;
+        background-color: #dff2bf;
+}
+.isa_warning {
+        color: #9f6000;
+        background-color: #feefb3;
+}
+.isa_error {
+        color: #d8000c;
+        background-color: #ffd2d2;
+}
+
+h1,
+h2,
+h3 {
+        line-height: 1.2;
+        font-family: "Lora";
+}
+
+img {
+        width: 500px;
+        max-width: 100%;
+        border-radius: 10px;
+        text-align: center;
+}
+
+/* --------------------------------------------- */
+/* Bold hover animations on links and clickables */
+/* --------------------------------------------- */
+a {
+        cursor: pointer;
+        color: #217ab7;
+        line-height: inherit;
+        transition: .14s;
+}
+a:hover {
+        color: white;
+        background-color: #3297d3;
+}
+a:visited {
+        color: #43458b;
+        border-color: #43458b;
+}
+a:visited:hover {
+        color: white;
+        background-color: #9251ac;
+}
+
+pre {
+        font-family: "Inconsolata", monospace;
+}
+
+::selection {
+        color: white;
+        background: #ff4081;
+}