html,body{font-family:sans-serif;letter-spacing:1px;-webkit-user-select:none;user-select:none;white-space:nowrap;margin:0;width:100%;height:100dvh;font-size:15px;overflow:hidden;background:var(--bg);color:var(--fontColor);transition:.8s}#app{position:absolute;left:0;top:0;width:100%;height:100dvh}input{position:relative;width:calc(100% - 20px);background-color:var(--inputBg);color:var(--fontColor);font-size:16px;border:var(--border);border-radius:var(--borderRadius);padding:10px;margin:10px 10px 4px;box-sizing:border-box;outline:none;transition:var(--transitionTime)}input:hover,input:focus{background-color:var(--inputBgFocus)}input:focus{box-shadow:var(--boxShadow)}.btn{background:var(--btnBg);transition:.4s;background-size:200% auto;color:var(--fontColor);border-radius:var(--borderRadius);border:var(--border);padding:8px;margin:10px;cursor:pointer;text-align:center;box-sizing:border-box;-webkit-user-select:none;user-select:none;width:80px;box-shadow:var(--boxShadow)}.btn:hover{transform:scale(1.05);background-position:right center}.btn:active{transform:scale(1);background-position:right center}.fadeIn{animation:fadeIn var(--transitionTime)}@keyframes fadeIn{0%{transform:scale(0);margin:0;padding:0;opacity:0}to{opacity:1;transform:scale(1)}}::-webkit-scrollbar{width:8px;height:12px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border-radius:10px;background:var(--scrollbarColor)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbarColor)}*{scrollbar-width:thin;scrollbar-color:var(--scrollbarColor) transparent}*::-webkit-scrollbar-thumb:hover{scrollbar-color:var(--scrollbarColor) transparent}::placeholder{color:var(--fontColor);font-weight:400;opacity:.7}.icon{fill:#fff;vertical-align:middle;height:64px}.iconSmall{position:absolute;top:8px;right:8px;height:32px;opacity:.7;transition:var(--transitionTime);fill:var(--fontColor);cursor:pointer}.iconSmall:hover{opacity:1!important;transform:scale(1.1)}.iconSmall:active{transform:scale(1)}.githubLink{position:absolute;top:8px;right:8px;cursor:pointer}.themeToggle{position:absolute;top:8px;right:48px;cursor:pointer}.githubLink .icon,.themeToggle .icon{fill:#fff}#background{position:absolute;height:100dvh;overflow:hidden;width:100%}.blob{border-radius:50%;aspect-ratio:1;opacity:.1;position:absolute;transition:var(--transitionTime)}.blob.one{background:var(--bgBlob1);height:max(300px,35dvmax);left:10%;top:-10%;animation:movement_two 36s ease-in-out infinite both}.blob.two{background:var(--bgBlob2);height:max(200px,25dvmax);left:70%;top:30px;animation:movement_two 42s ease-in-out infinite both;animation-delay:-14s}.blob.three{background:var(--bgBlob3);height:max(150px,15dvmax);left:50%;top:40%;animation:movement_one 24s ease-in-out infinite both;animation-delay:-14s}.blob.four{background:#000;height:max(1200px,120dvmax);left:50%;top:60%;animation:movement_three 74s ease-in-out infinite both}@keyframes movement_one{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(50%,20%)}}@keyframes movement_two{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(20%,80%) scale(1.3)}}@keyframes movement_three{0%,to{transform:translate(5,5)}50%{transform:translate(-5%,-10%)}}.confirmBox{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0008;animation:confirmBoxAnimation var(--transitionTime)}.confirmBoxInner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cardBg);height:102px;line-height:96px;min-width:192px;padding:32px 24px 24px;border-radius:var(--borderRadius);font-size:18px;text-align:center;overflow:hidden;animation:confirmBoxInnerAnimation var(--transitionTime)}.confirmBoxText{position:absolute;top:0;left:0;width:100%;height:48px;line-height:52px;background:var(--confirmBoxTint);font-size:16px}.confirmBoxCancel,.confirmBoxConfirm{position:absolute;bottom:16px;top:auto}.confirmBoxCancel{left:24px}.confirmBoxConfirm{right:24px;fill:#f44}@keyframes confirmBoxAnimation{0%{opacity:0}to{opacity:1}}@keyframes confirmBoxInnerAnimation{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.boardCreator{position:absolute;left:0;bottom:0;width:100%}.boardCreatorAddBtn{position:relative;width:calc(100% - 20px);height:48px;background:var(--btnBgThemed);background-size:200% auto;margin-bottom:5px}.boardCreatorAddBtn:hover{background-position:right center}.boardCreatorAddBtn .icon{height:32px}.boardCreatorUploadBtn,.boardCreatorDownloadBtn{position:relative;width:calc(50% - 20px);height:32px;display:inline-block;padding:4px;box-shadow:none}.boardCreatorUploadBtn:hover,.boardCreatorDownloadBtn:hover{background:var(--btnBgHover)}.boardCreatorUploadBtn{float:left}.boardCreatorDownloadBtn{float:right}.boardCreatorUploadBtn .icon,.boardCreatorDownloadBtn .icon{height:24px;fill:var(--fontColor)}#boardSelector{position:absolute;left:0;top:64px;width:100%;height:calc(100% - 176px);padding-top:16px;overflow-y:auto;overflow-x:hidden;-webkit-mask-image:linear-gradient(to bottom,#000,#000 80%,#0000 98%);mask-image:linear-gradient(to bottom,#000,#000 80%,#0000 98%);padding-bottom:40%;box-sizing:border-box}.boardCard{position:relative;width:calc(100% - 20px);height:72px;text-align:left;letter-spacing:1.3px;margin-bottom:14px;margin-top:0;box-shadow:none}.boardCard:hover{background:var(--btnBgHover)}.boardCard>.boardCardInner>.icon{opacity:0}.boardCard:hover>.boardCardInner>.icon{opacity:.7}.boardCardSelected{background:var(--btnBgThemed);color:#fff;background-size:200% auto;cursor:default;font-weight:700}.boardCardSelected:hover{background:var(--btnBgThemed);background-size:200% auto;background-position:right center}.boardCardTitle{position:absolute;bottom:12px;left:12px;font-size:17px;font-family:var(--titleFont)}.boardCard .iconSmall{position:absolute;right:8px}.boardCardSelected .iconSmall{fill:#fff}.boardCardEdit,.boardCardColor,.boardCardRemove{width:28px}.boardCardEdit{position:absolute;right:44px!important}.boardCardInput{position:absolute;margin:0;bottom:8px;display:none;background:none}.boardCardInput{position:absolute;bottom:0;left:0;top:auto;right:auto;width:100%;height:34px;line-height:100%;background-color:#0000;color:#fff;font-size:17px;border:none;border-radius:var(--borderRadius);padding:20px;margin:0}.boardCardInput:hover,.boardCardInput:focus{background-color:#0000}input:focus{box-shadow:none}#sidebar{position:absolute;left:0;top:0;width:256px;height:100%;background:var(--sidebarBg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transitionTime);border-right:var(--border)}.sidebarHidden{left:-256px!important}.sidebarTitle{position:absolute;left:0;top:0;width:100%;height:64px;font-size:20px;font-weight:700;font-family:var(--titleFont);letter-spacing:3px;color:var(--fontColor);transition:var(--transitionTime);background:var(--titleBg)}.sidebarTitleText{position:absolute;left:0;top:0;width:calc(100% - 64px);height:64px;line-height:84px;padding-left:64px}.sidebarTitle .icon{position:absolute;left:8px;top:16px;height:40px;fill:var(--fontColor)}.hideToggle{position:absolute;right:-32px;top:0;width:32px;height:64px;cursor:pointer;background:var(--titleBg);border-radius:0 0 var(--borderRadius);transition:var(--transitionTime);border-bottom:var(--border);border-right:var(--border);box-sizing:border-box}.hideToggle .icon{left:0;top:0;width:32px;height:64px;fill:var(--fontColor)}.hideToggle .icon{opacity:.5;transition:.2s}.hideToggle:hover .icon{opacity:1;transform:scale(1.1)}.sidebarHidden .hideToggle .icon{transform:rotate(180deg)}.list{position:relative;margin-right:40px;width:320px;min-height:112px;flex-shrink:0;background:var(--listBg);border-radius:var(--borderRadius);padding-bottom:4px;border:var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.listTitle{font-size:20px;font-weight:700;font-family:var(--titleFont);color:var(--fontColor);padding:16px}.listIconLeft{right:80px}.listIconRight{right:48px}.list>.icon{opacity:0}.list:hover>.icon{opacity:.7}.cards{overflow-x:hidden;overflow-y:auto;max-height:calc(100dvh - 212px);margin-bottom:8px}.listCreator{opacity:.6;transition:var(--transitionTime);height:115px}.listCreator:hover{opacity:1}.listCreatorInput{margin-top:12px}.listCreatorAddBtn{position:relative;width:calc(100% - 20px);height:44px;padding:6px;background:var(--btnBgThemed);background-size:200% auto}.listCreatorAddBtn:hover{background-position:right center}.listCreatorAddBtn .icon{height:32px}.card{position:relative;width:calc(100% - 20px);background:var(--cardBg);color:var(--fontColor);font-size:16px;border-radius:var(--borderRadius);border:var(--border);margin:16px 10px 4px;box-sizing:border-box;padding:16px 32px 16px 14px;text-align:left;letter-spacing:1.3px;white-space:wrap;overflow:hidden;transition:var(--transitionTime)}.card:hover{border-color:#fff;padding-top:44px}.card>.icon{opacity:0}.card:hover>.icon{opacity:.7}.cardColored{font-weight:700;color:#fff}.cardIconColor{right:48px}.cardIconUp{left:8px}.cardIconDown{left:40px}.cardIconLeft{left:72px}.cardIconRight{left:104px}#board{position:absolute;left:256px;top:0;width:calc(100% - 256px);height:100%;transition:var(--transitionTime);overflow:hidden}.boardExpanded{left:0!important;width:100%!important}#boardTitle{position:absolute;left:calc(var(--leftPadding) + 8px);top:24px;font-family:var(--titleFont);font-size:24px;color:#fffa}#lists{position:absolute;display:flex;flex-direction:row;align-items:flex-start;top:64px;overflow-y:hidden;overflow-x:auto;padding-left:var(--leftPadding);padding-right:80px;width:100%;height:calc(100% - 72px);box-sizing:border-box}:root{--transitionTime: .2s;--leftPadding: clamp(40px, 5vw, 64px);--borderRadius: 8px;--titleFont: "Roboto", sans-serif;--btnBgThemed: linear-gradient(to right, var(--bg) 0%, var(--bgBlob1) 51%, var(--bg) 100%);--bg: #012;--bgBlob1: #000;--bgBlob2: #000;--bgBlob3: #000;--border: 1px solid #fff3;--fontColor: #fff;--titleBg: #111;--sidebarBg: #0006;--listBg: #0006;--inputBg: #444;--inputBgFocus: #666;--cardBg: #333;--boxShadow: 0 0 8px 0 #0008;--btnBg: #0002;--btnBgHover: #0004;--scrollbarColor: #fff4;--confirmBoxTint: #0004}.light{--border: 1px solid #fff6;--fontColor: #111;--titleBg: #fff;--sidebarBg: #0001;--listBg: #fffa;--inputBg: #ddd;--inputBgFocus: #fff;--cardBg: #fff;--boxShadow: 0 0 0px 0 #0002;--btnBg: #fffa;--btnBgHover: #fff;--scrollbarColor: #fffa;--confirmBoxTint: #0001}
