html{font-family:Barlow,sans-serif}body{margin:0;background-color:#f8f6e3}.warn{color:#f54242}.hidden{visibility:hidden}.button-small.danger{background-color:#f54242;box-shadow:0 2px 4px #f54242}.button-small.danger:focus,.button-small.danger:hover{background-color:#f54242;box-shadow:0 2px 8px #f54242}ployous-header header{display:flex;flex-direction:column;align-items:center;font-size:36px;font-weight:900;color:#f8f6e3;background-color:#41c9e2;min-height:50px;box-shadow:0 2px 4px #ace2e1}ployous-header header .header-nav{width:100%;display:flex;justify-content:space-between;align-items:center}ployous-header header .header-nav a{text-decoration:none}ployous-header header .header-nav a:hover,ployous-header header .header-nav a:focus,ployous-header header .header-nav a:visited{color:#f8f6e3}ployous-header header .header-nav span{font-size:26px;padding:10px;box-shadow:0 2px 4px #008dda;margin:5px}ployous-header header .header-nav span:hover{cursor:pointer;box-shadow:0 2px 8px #008dda}ployous-header header img{height:60px}@media screen and (min-width: 600px){ployous-header header img{height:80px}}ployous-header header .alpha{padding-left:10px;font-size:16px;font-style:italic;font-weight:900;color:#b01c43;align-self:center}ployous-landing-page .tag-line{font-size:20px;font-weight:600;text-align:center;margin:15px;color:#008dda}ployous-landing-page .welcome{font-size:20px;font-weight:600;text-align:center;margin:15px;color:#008dda}ployous-landing-page .welcome-hint{font-size:18px;font-weight:400;text-align:center;margin:15px}ployous-landing-page .welcome-hint a{color:#008dda}ployous-landing-page #menu{display:flex;flex-direction:column;align-items:center}ployous-landing-page #canvas{position:absolute;top:0;left:0;z-index:-10}view-posts,view-post{display:flex;flex-direction:column;align-items:center}view-posts #posts,view-post #posts{width:95%;max-width:500px}view-posts .post,view-post .post{text-align:left;min-height:30px;margin:10px;box-shadow:0 1px 3px #41c9e2}view-posts .post .postheader,view-post .post .postheader{display:flex;justify-content:space-between}view-posts .post .alias,view-post .post .alias{display:inline-block;padding:5px;color:#41c9e2}view-posts .post .timestamp,view-post .post .timestamp{display:inline-block;padding:5px}view-posts .post .message,view-post .post .message{padding:5px;cursor:pointer}view-posts .post .actions,view-post .post .actions{display:flex;justify-content:flex-end;color:#41c9e2;padding:0 5px}view-posts .post .actions span,view-post .post .actions span{margin:2px 5px;font-size:20px;cursor:pointer}create-post{width:90%;display:flex;flex-direction:column;align-items:center;margin:auto}create-post form{max-width:320px;display:flex;flex-direction:column;align-items:center}create-post form label{font-size:18px;font-weight:600;color:#41c9e2}create-post #postMessage{min-width:250px;min-height:250px;margin:10px 0;padding:10px;font-family:Barlow,sans-serif;font-size:18px;font-weight:400;color:#008dda;box-shadow:0 2px 4px #008dda;text-decoration:none;border:none;overflow-y:auto}create-post #postMessage ::selection{background:#008dda;color:#f8f6e3}@media screen and (min-width: 360px){create-post #postMessage{min-width:320px}}@media screen and (min-width: 1080px){create-post #postMessage{min-width:600px}}create-post #postMessage::placeholder{color:#ace2e1}create-post #postMessage:focus{outline:none;border:1px solid #008DDA;box-shadow:0 2px 8px #008dda}create-post #postMessageHint{font-size:14px;color:#41c9e2;align-self:flex-end}create-post #postMessageHint.warn{color:#f54242}.button-small{margin:5px;padding:5px;font-size:14px;font-weight:600;color:#f8f6e3;text-decoration:none;background-color:#41c9e2;box-shadow:0 2px 4px #008dda;text-align:center;border:none}.button-small.highlight{background-color:#008dda}.button{width:80%;max-width:200px;margin:10px;padding:10px;font-size:18px;font-weight:600;color:#f8f6e3;text-decoration:none;background-color:#41c9e2;box-shadow:0 2px 4px #008dda;text-align:center;border:none}.button:visited{text-decoration:none}.button:hover,.button-small:hover{background-color:#008dda;box-shadow:0 2px 8px #008dda;cursor:pointer}.popup{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.popup .popup-body{display:flex;flex-direction:column;margin:15% auto;padding:20px;width:80%}.popup .popup-body .popup-header{display:flex;justify-content:space-between;background-color:#41c9e2;color:#f8f6e3;font-size:16px;font-weight:600;padding:10px}.popup .popup-body .popup-header .popup-title{display:flex}.popup .popup-body .popup-header .popup-info{padding-left:3px;display:inline-block;align-self:flex-start;font-size:16px}.popup .popup-body .popup-header .popup-close{align-self:flex-end}.popup .popup-body .popup-content{padding:10px;background-color:#f8f6e3;font-size:14px}#keyPopup .popup-content{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}#keyPopup .popup-content .input{width:95%}#keyPopup .popup-content .text{font-weight:400;font-size:16px;padding:5px}#keyPopup .popup-content .buttons{display:flex;justify-content:center;padding:10px}#keyPopup .popup-content .button-small{margin:0 10px}.input{position:relative}.input input[type=text]{width:100%;padding:10px;font-size:14px;box-sizing:border-box;border:none;position:relative;box-shadow:0 1px 3px #41c9e2}.input input[type=text]:focus{outline:none}.input input[type=text]::placeholder{color:#ace2e1}.input span.copy{position:absolute;right:0;top:3px;padding:3px;z-index:10;color:#41c9e2;background-color:#fff}.input span.copy:hover{cursor:pointer}.input span.copyhint{position:absolute;opacity:0;top:38px;right:-16px;padding:5px;color:#41c9e2;background-color:#000000b3;z-index:1}.input span.copyhint .arrow{position:absolute;top:-14px;right:17px;color:#000000b3}.input span.copyhint.animate{animation:fadeInOut 2.5s ease-out forwards}@keyframes fadeInOut{10%{opacity:1}60%{opacity:1}to{opacity:0}}.input:after{display:block;position:relative;content:"";width:100%;border-bottom:2px solid #41C9E2}.input:has(input:focus):after{border-bottom:2px solid #008DDA;animation:expandLine .25s ease-out forwards}@keyframes expandLine{0%{left:50%;width:0%}to{left:0;width:100%}}search-posts{margin:10px 0;display:flex;width:95%;max-width:500px;justify-content:space-evenly}search-posts .input{width:70%}search-posts .button-small{margin:0;width:20%;display:inline-block;align-self:stretch}