*{margin:0;padding:0;box-sizing:border-box;font-family:Borel,cursive}main{height:100dvh;width:100dvw;background-color:#eecfee;display:flex;align-items:center;justify-content:center;perspective:1000px}h1{position:absolute;font-size:2.5rem;font-family:Jua,sans-serif;color:#4a025c;top:25%;left:50%;transform:translate(-50%)}h1 div{font-size:inherit;font-weight:inherit;font-family:inherit}.container-env{height:160px;width:282px;position:relative;z-index:-1;box-shadow:0 0 100px #a51dc79e;background-color:#837138;cursor:pointer}.shadow-lettre{height:120%;width:100%;position:absolute;top:-30px;z-index:97;background:radial-gradient(rgba(214,104,194,.438) 0%,transparent 65%);opacity:0}.lettre{height:80%;width:80%;position:absolute;background-color:#ece8e8;left:50%;top:50%;z-index:96;transform:translate(-50%,-45%);transition:transform 1.2s cubic-bezier(0,.15,.27,.99);box-shadow:0 0 30px #0000001a;filter:drop-shadow(0 0 30px rgba(0,0,0,.1));padding:1rem}.lettre.active{transform:translate(-50%,-100%)}.lettre h2{font-size:1.5rem;line-height:2rem;text-align:center}.img-card-wrapper,.img-card-wrapper2{position:absolute;left:30%;top:0%;background-color:#fff;padding:.3rem .3rem 1.8rem;box-shadow:0 0 30px #0000;transition:box-shadow .5s ease;z-index:90;transform:rotate(90deg)}.img-active{box-shadow:0 0 30px #0000001a;filter:drop-shadow(0 0 30px rgba(0,0,0,.1))}.img-card-wrapper:nth-child(1){z-index:90}.img-card-wrapper:nth-child(2){z-index:91}.img-card-wrapper:nth-child(3){z-index:92}.img-card-wrapper2:nth-child(1){z-index:93}.img-card-wrapper2:nth-child(2){z-index:94}.img-card-wrapper2:nth-child(3){z-index:95}.img-card{height:8rem;width:7rem}.img-card img{height:100%;width:100%;object-fit:cover}.env-top{position:absolute;z-index:100;top:0;border-top:2px solid rgb(212,173,99)}.env-top svg{fill:#d4ad63}.env-bottom{position:absolute;z-index:99;bottom:-3px;overflow:hidden;height:106px}.env-bottom svg{fill:#d8b575}.env-bg-crop{position:absolute;z-index:98;height:100%;width:100%}.env-bg-crop svg{height:100%;width:100%;fill:#ddbd81}