:root{
 --c1:150, 72%, 3%;
 --c2:0, 0%, 95%;
 --c3:0, 0%, 100%;
 --c4:0, 0%, 85%;
 --c5:219, 74%, 58%;
 --c6:219, 80%, 42%;
 --c8:160, 80%, 90%;
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box;position:relative;}
*:focus{outline:none;}
::selection{background:rgba(31, 83, 144, 0.25);}
html,body{margin:0;width:100%;height:100%;}
html{
 background:hsl(var(--c1)) center center/10em no-repeat fixed;
}
body{
 font-family:'Roboto',sans-serif;
 background-color:hsl(var(--c1));
 overflow-y:auto;
 font-size:.9em;
}
div{
 margin:0;
 /*word-wrap:break-word;*/
 /*hyphens:auto;*/
}
div.back{
 width:100%;
 height:100%;
 opacity:0.5;
 position:fixed;
}
div.back img{
 top:50%;
 left:50%;
 min-height:100%;
 min-width:1200px;
 width:100%;
 height:auto;
 position:fixed;
 transform:translateX(-50%) translateY(-50%);
}
div.page{
 width:100%;
 height:100%;
 top:0;
 font-size:1.1em;
 text-align:center;
}
div.over,table.menu{
 min-width:40em;
 width:35%;
 height:100%;
 display:inline-table;
}
table.menu{height:auto;}
table.menu tr:nth-child(1){height:100%;}
table.menu tr:nth-child(2){height:1%;}
table.none{
 width:100%;
 height:100%;
 margin-bottom:4em;
}
table.post{
 transition:600ms;
 width:100%;
 max-width:100%;
 margin:0;
 padding-bottom:6em;
 bottom:0;
 border-spacing:1em;
 display:table;
}
table.post tr.main > th{
 padding:0;
 border-radius:2em;
}
table.post tr th a{
 padding:1em 1.5em;
 border-radius:2em;
 line-height:1.2em;
 color:hsl(var(--c2));
 text-decoration:none;
 background-color:hsl(var(--c5));
 border:solid 2px hsl(var(--c3));
 display:inline-block;
 font-weight:normal;
 cursor:pointer;
}
table.post tr th a:active{
 color:hsl(var(--c5));
 background-color:hsl(var(--c2));
 border:solid 2px hsl(var(--c5));
}
table.post tr.head:first-child td{
 font-size:2em;
 line-height:2em;
 color:white;
 display:block;
 font-weight: bold;
}
table.post tr.main:not(:first-child) > td{
 padding:1.4em;
 border-radius:2em;
 border:solid 1px hsl(var(--c3));
 background-color:hsl(var(--c2));
 text-align:left;
 overflow-wrap:anywhere;
 break-word:word-break;
}
table.post tr:not(:first-child) td p.post_title{
 margin:0;
 font-size:1.2em;
 font-weight:bold;
}
table.post tr:not(:first-child) td p.post_title a,a.edit,a.edit_menu{
 transition:300ms;
 font-size:1em;
 color:#0075ff;
 text-decoration:underline;
 text-decoration-color:transparent;
}
a.edit_menu{
 margin-top:-3.7em !important;
 padding:1.25em 0 !important;
 border:none !important;
 right:2em;
 color:#0075ff !important;
 top:inherit;
 position:absolute;
 background-color:transparent !important;
}
a img.menu_icon{
 margin-top:1em;
 left:1em;
 height:2em;
 opacity:.4;
 top:0;
 position:absolute;
 background-color:transparent !important;
 pointer-events:none;
}
table.post tr:not(:first-child) td p.post_title a:active,a.edit:active,a.edit_menu:active{
 transition:20ms;
 text-decoration-color:inherit;
}
table.post tr:not(:first-child) td iframe{
 background-color:black;
 position:relative;
 width:100%;
 height:24em;
 border-radius:.3em;
}
table.post tr:not(:first-child) td img{
 max-width:100%;
 height:auto;
}
table.post tr:not(:first-child) td p.post_title a:visited{
 transition:20ms;
 color:#08468e;
}
a.edit:visited,a.edit_menu:visited{
 transition:20ms;
 color:#0075ff;
}
table.post tr:not(:first-child) td p.post_date{
 margin:0;
 font-size:.8em;
 line-height:2em;
 color:grey;
}
table.post tr:not(:first-child) td p.post_date a{
 text-decoration:none;
 color:#0075ff;
 font-weight:bold;
}
table.post tr:not(:first-child) td hr{
 margin:0;
 height:0;
 border:none;
 border-bottom:solid 1px hsl(var(--c4));
}
table.menu{
 bottom:0;
 border-spacing:1em;
 position:fixed;
 display:table;
}
table.post td.draft,table.menu a.draft{
 background-color:hsl(var(--c8)) !important;
}
table.menu tr td{
 border-radius:2em;
 border:solid 3px hsl(var(--c3));
 background-color:hsl(var(--c2));
 box-shadow:0px 4px 8px hsla(0, 0%, 0%, .5);
}
table.menu tr:nth-child(1) td{
 height:0;
 opacity:0;
 overflow:hidden;
 pointer-events:none;
}
table.menu tr:nth-child(1) td > div{
 height:100%;
 overflow:auto;
 background-color:hsl(var(--c4));
}
table.menu tr:nth-child(1) td span{
 font-size:1.5em;
 line-height:3em;
 display:block;
 font-weight: bold;
}
table.menu tr:nth-child(1) td a{
 transition:160ms;
 padding:1.25em 5em;
 line-height:1.25em;
 border-top:solid 1px hsl(var(--c4));
 color:black;
 background-color:hsl(var(--c2));
 display:block;
 text-decoration:none;
}
table.menu tr:nth-child(1) td a:active{
 transition:50ms;
 background-color:white;
}
table.menu tr:nth-child(1) td a.add{
 margin:.5em;
 padding:1em 1.5em;
 line-height:1.2em;
 border-radius:2em;
 color:hsl(var(--c2));
 background-color:hsl(var(--c5));
 border:solid 2px hsl(var(--c3));
 display:inline-block;
 width:auto;
}
table.menu tr:nth-child(1) td a.add:active{
 color:hsl(var(--c5));
 background-color:hsl(var(--c2));
 border:solid 2px hsl(var(--c5));
}
table.post tr:nth-child(2) td form.send{
 margin:0;
 padding:0;
 height:100%;
 width:100%;
}
table.post tr:nth-child(2) td.quill form.send::after{
 bottom:-.8em;
 right:1.2em;
 font-size:.7em;
 position:absolute;
 color:gray;
 display:block;
 content:'Powered by Quill';
}
table.post tr:nth-child(2) td form.send input[type="text"],
table.post tr:nth-child(2) td form.send input[type="number"],
table.post tr:nth-child(2) td form.send input[type="password"]{
 margin:0;
 padding:.3em;
 height:100%;
 width:100%;
 font-size:1.3em;
 line-height:2em;
 border-radius:1em;
 border:none;
 border:solid 1px #ccc;
 background-color:transparent;
 text-align:center;
 font-weight:bold;
}
table.post tr:nth-child(2) td form.send input[type="text"] + input[type="text"],
table.post tr:nth-child(2) td form.send div + input[type="text"]{
 margin-top:1em;
 font-size:1em;
 font-weight:normal;
}
table.post tr:nth-child(2) td form.send input[type="checkbox"]{
 margin-top:1em;
 margin-right:.5em;
 cursor:pointer;
}
table.post tr:nth-child(2) td form.send div.row{
 display:block;
}
table.post tr:nth-child(2) td form.send div input:first-child{
 width:calc(100% - 5em);
 display:inline-block;
}
table.post tr:nth-child(2) td form.send div input:last-child{
 margin-left:1em;
 width:4em;
 display:inline-block;
}
label{
 font-size:1em;
 color:dimgrey;
 cursor:pointer;
}
table.post tr:nth-child(2) td form.send input[type="checkbox"]:checked + label{
 font-size:1em;
 color:#0075ff;
}
table.post tr:nth-child(2) td form.send input[type="checkbox"]:nth-child(4):checked{
 filter:hue-rotate(150deg);
}
table.post tr:nth-child(2) td form.send input[type="checkbox"]:nth-child(4):checked + label:nth-child(5){
 filter:hue-rotate(150deg);
}
table.menu tr:nth-child(2) td{
 height:3em;
 color:black;
}
table.menu tr:nth-child(2) td:nth-child(1){
 width:6em;
 font-size:1.1em;
 line-height:0;
 transform:perspective(100em) translateZ(0);
 cursor:pointer;
 font-weight:bold;
 color:hsl(var(--c2));
 background-color:hsl(var(--c5));
 border:solid 2px hsl(var(--c3));
}
table.menu tr:nth-child(2) td:nth-child(1):active{
 transition:0;
 transform:perspective(100em) translateZ(-8em);
 color:hsl(var(--c5));
 background-color:hsl(var(--c6));
 border:solid 2px hsl(var(--c5));
}
table.menu tr:nth-child(2) td:nth-child(1):not(:active){
 transition:160ms ease;
 transform:perspective(100em) translateZ(0);
}
table.menu tr:nth-child(2) td:nth-child(2) form.send{
 height:100%;
 width:100%;
 line-height:3em;
}
table.menu tr:nth-child(2) td:nth-child(2) form.send{
 background-size:1.75em;
 background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACWUExURQAAAICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIc6oUsAAAAydFJOUwACBQgLEBETFBYYGRscHh8hIyQmJyksMTIzNTs9QEVGSElLTE5QUVNUVltcXl9hYmNkrJEEBAAAAgZJREFUWMPtV9t6gjAMpsqAMcHDOgRlDERBncJ4/5ebpDAGtjTCxW6WK78m/29zbFAUqaiGTV1qG6oyQCarICtqyQI6fQw+j/KiLXm0wsNf9gVPkhkOrgWFSCINc/vrj/0lDX3XD9NLEwy5H+va9rgxSX1oeml97PXDyXtlt9M7Gj2qNMGkj6DCJxZHZ1W3+CDS+/t8E+Iz9UYcP5ZxR2jgsOp4FeUP4p8velxcAENu8LUs/05vlB0WYn79Mf8laWZxmPNUUL8JkRAQyMWRiCJoSSvNFsUxEjvXll1pGN/3P8RXRxAYcIW7+bAC11DtmpSmlJvDDYrAg5bonsL8MlEEOjR2d35C/xPcyDmXxionMily5MWlscHJbogkgHjZ7TOKKeNWOXfS4JZnLpKAZzz6BqNjMDoLUAefyvA6YJX4jHu6eJXI/PJQBGtuvCANyYhunMI80LC9VKj8iYRJJBju789hohTyFcASDv/kgal84pnNHngXlmLnUC/TQVAgGfZtFIy+pwvydX4T4M/1GiPZD7YyvGRDiYgU37sjRRMMvryF13Bo66Q+3kr/P/v6+XmOg9ueGMSNMpfGr7iaxk64qR5MBL5cFY5c+Gmp4PC3hNH4Dr53CBoP84H+/l4Iqfijg4/Hf7H04FHyj/9bvGJex+EbhqH4mmE4njGMwZcM4/A3huH4b3mCqplz2Q7hAAAAAElFTkSuQmCC');
 background-repeat:no-repeat;
 background-origin:border-box;
 background-position:calc(100% - .65em) .65em;
}
table.menu tr:nth-child(2) td:nth-child(2) form.send:focus-within{
 transition:800ms ease;
 background-position:calc(100% + 2em) .65em;
}
table.menu tr:nth-child(2) td:nth-child(2) form.send:not(:focus-within){
 transition:400ms ease;
}
table.menu tr:nth-child(2) td:nth-child(2) input{
 height:100%;
 width:100%;
 font-size:1.1em;
 border-radius:2em;
 background-color:transparent;
 text-align:center;
 border:none;
}
table.menu tr:nth-child(2) td:hover,
table.menu tr:nth-child(2) td:focus-within{
 content:'';
}
img.logo{display:inline-block;vertical-align:middle;height:18em;}
p.logo{display:inline-block;vertical-align:middle;font-size:1.1em;color:white;}
span.none{
 margin:0;
 top:0;
 left:0;
 width:100%;
 height:100%;
 position:fixed;
 display:table;
 font-size:1em;
 color:white;
 pointer-events:none;
}
span.none span{
 margin:0;
 display:table-cell;
 vertical-align:middle;
}
div.note{
 margin:0;
 left:0;
 width:100%;
 position:fixed;
 display:block;
 animation:note 10s;
 pointer-events:none;
}
div.note div{
 margin:1em;
 padding:1em 2.2em 1em 1em;
 border-radius:.5em;
 border:solid 1px #af9550;
 display:inline-block;
 background-color:#f5ecc7;
 animation:glow 9s;
}
@keyframes note{
 0%,20%,100%{top:-10em;}
 30%,90%{top:0;}
}
@keyframes glow{
 0%{box-shadow:0em 0em 0em #f5ecc7;}
 10%,30%,50%,70%,90%{box-shadow:0em 0 1em #f5ecc7;}
 20%,40%,60%,80%{box-shadow:0em 0 .5em #f5ecc7;}
 100%{box-shadow:0em 0em 0em #f5ecc7;}
}
@media all and (orientation:portrait){
 div.over,table.menu{width:100%;min-width:100%;}
 table.post tr:not(:first-child) td iframe{height:45vw;}
}
@media only screen and (max-width:45em){
 div.over,table.menu{width:100%;min-width:100%;}
 table.post tr:not(:first-child) td iframe{height:45vw;}
}