.checkbox-lock{--color:#a5a5b0;--size:30px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;font-size:var(--size);user-select:none;fill:var(--color)}.checkbox-lock>svg{fill:currentColor}.checkbox-lock .lock-open{position:absolute;animation:keyframes-fill .5s}.checkbox-lock .lock{position:absolute;display:none;animation:keyframes-fill .5s}.checkbox-lock input:checked~.lock-open{display:none}.checkbox-lock input:checked~.lock{display:block}.checkbox-lock input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}@keyframes keyframes-fill{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}}.folder{--transition:350ms;--folder-W:52px;--folder-H:36px;position:absolute;left:calc(50% - var(--folder-W)/ 2);top:calc(50% - var(--folder-H)/ 2 + 4px);transition:transform var(--transition) ease}.folder:hover{transform:scale(1.05)}.folder .back-side,.folder .front-side{position:absolute;transition:transform var(--transition);transform-origin:bottom center}.folder .back-side::after,.folder .back-side::before{content:"";display:block;background-color:#fff;opacity:.7;z-index:0;width:var(--folder-W);height:var(--folder-H);position:absolute;transform-origin:bottom center;border-radius:4px;transition:transform 350ms;z-index:0}.folder .back-side::after{content:"staticfiles";font-size:8px;text-align:right}.folder-container:hover .back-side::before{transform:rotateX(-5deg) skewX(5deg)}.folder-container:hover .back-side::after{transform:rotateX(-15deg) skewX(12deg)}.folder .front-side{z-index:1}.folder-container:hover .front-side{transform:rotateX(-40deg) skewX(15deg)}.folder .tip{background:linear-gradient(135deg,#ff9a56,#ff6f56);width:20px;height:6px;border-radius:2px 2px 0 0;box-shadow:0 5px 15px rgba(0,0,0,.2);position:absolute;top:-6px;z-index:2}.folder .cover{background:linear-gradient(135deg,#ffe563,#ffc663);width:var(--folder-W);height:var(--folder-H);box-shadow:0 10px 20px rgba(64,64,64,.3);border-radius:0 4px 4px 4px}.cube-container{width:160px;height:160px;perspective:800px;margin:10px}.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:rotate 15s infinite linear}.cube .face{position:absolute;width:160px;height:160px;color:#1599d6;font-size:18px;text-align:center;line-height:200px;background:0 0;opacity:.9;border:2px solid;border-image:linear-gradient(90deg,rgba(14,8,110,1) 0%,rgba(15,15,167,1) 26%,rgba(20,45,255,1) 85%);box-shadow:0 0 100px rgba(8,178,245,.61)}.cube .front{transform:translateZ(80px);background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9 0,#80d0c7 100%)}.cube .back{transform:rotateY(180deg) translateZ(80px);background-color:#f6f6f6;background-image:linear-gradient(160deg,#0093e9 0,#80d0c7 100%)}.cube .right{transform:rotateY(90deg) translateZ(80px);background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9 0,#80d0c7 100%)}.cube .left{transform:rotateY(-90deg) translateZ(80px);background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9 0,#80d0c7 100%)}.cube .top{transform:rotateX(90deg) translateZ(80px);background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9 0,#80d0c7 100%)}.cube .bottom{transform:rotateX(-90deg) translateZ(80px);background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9 0,#80d0c7 100%)}.cube-container:hover .cube{animation-play-state:paused}@keyframes rotate{0%{transform:rotateX(0) rotateY(0) rotateZ(0)}100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}.stack-card{--background-color:#f4f4f481;overflow:visible;position:relative;background:var(--background-color);width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border:1px solid #4040407b;border-radius:4px}.stack-card:after,.stack-card:before{content:"";position:absolute;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid #3f3f3f88;border-radius:4px;background:var(--background-color);backdrop-filter:blur(10px);transition:.5s;z-index:-99}.details{position:relative;height:100%;width:100%}.details>span{position:absolute;font-size:12px;bottom:10px;width:100%;text-align:center}.imgbox{position:absolute;top:10px;left:10px;bottom:10px;right:10px;background:#222;border-radius:4px;transition:.5s;z-index:1}.stack-card:hover .imgbox{bottom:30px}.stack-card:hover:before{transform:rotate(20deg)}.stack-card:hover:after{transform:rotate(10deg);box-shadow:0 2px 20px rgba(0,0,0,.2)}