Add 'keatonbrown.info/s.css'

keatonbrown.info/s.css

@@ -0,0 +1,97 @@
+body {
+    background: linear-gradient( #adc8cb, #edc0cd, #f1f1f1, #edc0cd, #adc8cb);
+    background-repeat: no-repeat;
+    height: 96vh;
+    padding: 2vh;
+    margin: 0px;
+    font-family: sans-serif;
+}
+
+.centered {
+    text-align: center;
+    margin: auto;
+    display: block;
+}
+
+.content {
+    padding: 7px;
+    max-width: 525px;
+    margin: auto;
+}
+
+.content p {
+    text-indent: 5%;
+    line-height: 1.5em;
+}
+
+.frame {
+    max-width: 700px;
+    min-height: 96vh;
+    max-height: 96vh;
+    margin: auto;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSKtDnYQcchQnSyIijhqFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxcnRSdJES/5cUWsR4cNyPd/ced+8AoVFhmtU1Dmi6baaTCTGbWxVDrxAQQRB9iMrMMuYkKQXf8XWPAF/v4jzL/9yfI6LmLQYEROJZZpg28Qbx9KZtcN4njrKSrBKfE4+ZdEHiR64rHr9xLros8MyomUnPE0eJxWIHKx3MSqZGPEUcUzWd8oWsxyrnLc5apcZa9+QvDOf1lWWu0xxGEotYggQRCmooowIbcVp1UiykaT/h4x9y/RK5FHKVwcixgCo0yK4f/A9+d2sVJie8pHAC6H5xnI8RILQLNOuO833sOM0TIPgMXOltf7UBzHySXm9rsSOgfxu4uG5ryh5wuQMMPhmyKbtSkKZQKADvZ/RNOWDgFuhd83pr7eP0AchQV6kb4OAQGC1S9rrPu3s6e/v3TKu/H+v6cnFUhIhoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AINAyswm0QLFQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAB9SURBVEjH7ZVLCsAwCERH97n/PeMBppsGpBCIbeyHZjYhm3moOEqtldhVSsFMmRkAQLMA3lOzAB4kJIlkKW7QgnwY0har978MaYa9d3q7IhW8bya92BmNo+FKjoaRvAu1qxlHA3UF5N8hZzZ5NB2EJD1g1r33nppRwSMz2QALAzbRTngrjQAAAABJRU5ErkJggg==");
+    color: #000;
+    border: 2px solid blueviolet;
+    overflow-y: auto;
+}
+
+.header {
+    max-width: 350px;
+    padding-top: 30px;
+}
+
+.header * {
+    margin: auto;
+}
+
+hr {
+    width: 25%;
+}
+
+.menu {
+    width: 28%;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0px 3px;
+    background-color: #e2e2e212;
+    border: 2px solid #e2e2e294;
+    -webkit-transition: border 0.25s ease-in-out;
+    transition: border 0.25s ease-in-out;
+}
+
+.menu:hover {
+    background-color: #8a2be212;
+    border: 2px solid #8a2be294;
+}
+
+.menu:hover .menucontent {
+    max-height:100vh;
+}
+
+.menu a {
+    display: block;
+    text-overflow: ellipsis;
+    padding: 1px 3px;
+}
+
+.menu a:hover {
+    background-color: #ed9db444;
+}
+
+.menu button {
+    font-size: 1.25em;
+    font-weight: bold;
+    margin: auto;
+    display: block;
+    text-overflow: ellipsis;
+    background: none;
+    border: none;
+}
+
+.menucontent {
+    max-height: 0px;
+    overflow: hidden;
+    max-width: 100%;
+    -webkit-transition: max-height 1s ease-in-out;
+    transition: max-height 1s ease-in-out;
+}