:root{--folder-color:#70a1ff;--folder-back-color:#4785ff;--paper-1:#e6e6e6;--paper-2:#f2f2f2;--paper-3:#fff}.folder{cursor:pointer;transform-origin:50%;transition:all .2s ease-in}.folder:not(.open):hover{transform:translateY(-10px)scale(1.05)}.folder:not(.open):hover .paper{transform:translate(-50%,-20%)}.folder.open .paper:first-child{transform:translate(-150%,-80%)rotate(-20deg)}.folder.open .paper:nth-child(2){transform:translate(-50%,-110%)rotate(0)}.folder.open .paper:nth-child(3){transform:translate(50%,-80%)rotate(20deg)}.folder.open .folder__front{transform:skew(20deg)scaleY(.4)}.folder.open .right{transform:skew(-20deg)scaleY(.4)}.folder__back{background:var(--folder-back-color);border-radius:0 10px 10px;width:140px;height:100px;position:relative;box-shadow:0 10px 30px #0000004d}.folder__back:after{z-index:0;content:"";background:var(--folder-back-color);border-radius:8px 8px 0 0;width:45px;height:15px;position:absolute;bottom:98%;left:0}.paper{z-index:2;background:var(--paper-1);border-radius:4px;justify-content:center;align-items:center;width:85%;height:85%;transition:all .5s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;bottom:15%;left:50%;overflow:hidden;transform:translate(-50%,10%);box-shadow:0 4px 10px #0003}.paper:nth-child(2){background:var(--paper-2);width:85%;height:85%}.paper:nth-child(3){background:var(--paper-3);width:85%;height:85%}.folder__front{z-index:20;background:var(--folder-color);transform-origin:bottom;border-radius:5px 10px 10px;width:100%;height:100%;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:absolute;box-shadow:0 -5px 15px #0000001a}