.folder-container{perspective:1000px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.folder-wrapper{cursor:pointer;outline:none;transition:all .2s ease-in;position:relative}.folder-wrapper:focus-visible{box-shadow:0 0 0 2px white, 0 0 0 4px var(--folder-color)}.folder-wrapper:not(.is-open):hover,.folder-wrapper.is-open{transform:translateY(-8px)}.folder-body{background-color:var(--folder-back-color);border-radius:0 30px 30px;width:375px;height:300px;position:relative;box-shadow:0 20px 40px #0000001a}.folder-tab{z-index:0;background-color:var(--folder-back-color);border-radius:15px 15px 0 0;width:112px;height:37px;position:absolute;bottom:98%;left:0}.folder-paper{z-index:20;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease-in-out;display:flex;position:absolute;bottom:10%;left:50%;overflow:hidden;box-shadow:0 10px 20px #0000001a}.folder-wrapper:not(.is-open) .folder-paper{transform:translate(-50%)translateY(10%)}.folder-wrapper:not(.is-open):hover .folder-paper{transform:translate(-50%)translateY(0)}.folder-wrapper.is-open .folder-paper:hover{filter:brightness(1.05);box-shadow:0 10px 20px #00000026}.folder-front{z-index:30;transform-origin:bottom;background-color:var(--folder-color);border-radius:15px 30px 30px;width:100%;height:100%;transition:all .3s ease-in-out;position:absolute;box-shadow:inset 0 2px 5px #fff3,0 -2px 10px #0000001a}.folder-wrapper:not(.is-open):hover .folder-front-left{transform:skew(15deg)scaleY(.6)}.folder-wrapper:not(.is-open):hover .folder-front-right{transform:skew(-15deg)scaleY(.6)}.folder-wrapper.is-open .folder-front-left{transform:skew(15deg)scaleY(.6)}.folder-wrapper.is-open .folder-front-right{transform:skew(-15deg)scaleY(.6)}