.ritratto_avatar_immagine{border:1px solid pink;display:block;margin:0 auto}
.ritratto_avatar_immagine:hover{content:url("https://i.ibb.co/8LbhPMDb/02.png")}
.camera-widget{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;display:inline-block;position:relative;--post-scale:0.8;--text-scale:0.8}
.camera-widget .camera-container{display:inline-block;margin:0 auto;border:1px solid pink;background:#fff;position:relative;border-radius:15px;box-shadow:0 20px 40px rgba(0,0,0,0.1)}
.camera-widget .preload-img{position:absolute;left:-9999px}
.camera-widget .camera-main{width:400px;position:relative;border-radius:15px;display:block}
.camera-widget .camera-container:hover .camera-main{animation:camera-flash .2s}
.camera-widget .social-post{position:absolute;width:calc(200px * var(--post-scale));background:#fff;border-radius:calc(12px * var(--post-scale));box-shadow:0 8px 25px rgba(0,0,0,0.15);transform:rotate(var(--rotation)) scale(var(--post-scale));transform-origin:center;overflow:hidden}
.camera-widget .social-post:hover{transform:rotate(var(--rotation)) scale(calc(var(--post-scale) * 1.2));box-shadow:0 15px 40px rgba(0,0,0,0.25);z-index:10}
.camera-widget .social-post:hover .post-img{height:auto;max-height:none;width:calc(200px * var(--post-scale));object-fit:cover}
.camera-widget .post-header{padding:calc(12px * var(--post-scale));display:flex;align-items:center;gap:calc(10px * var(--post-scale));border-bottom:1px solid #eee}
.camera-widget .user-avatar{width:calc(32px * var(--post-scale));height:calc(32px * var(--post-scale));border-radius:50%;background:url('https://i.ibb.co/HfNjNw1G/pfp.jpg') center/cover;border:1px solid #fff;font-weight:bold;font-size:calc(14px * var(--text-scale))}
.camera-widget .user-info{flex:1}
.camera-widget .post-username{font-weight:600;font-size:calc(14px * var(--text-scale));color:#333;margin:0}
.camera-widget .post-time{font-size:calc(12px * var(--text-scale));color:#666;margin:0}
.camera-widget .post-img{width:100%;height:120px;object-fit:cover;display:block}
.camera-widget .post-content{padding:12px}
.camera-widget .post-actions{display:flex;gap:15px;align-items:center;font-size:12px;color:#666}
.camera-widget .post-subscribe{border-top:1px solid #eee;padding:10px 12px;display:flex;align-items:center;gap:8px;background:#0091EA}
.camera-widget .subscribe-icon{width:16px;height:16px;background:white;border-radius:50%;padding:2px}
.camera-widget .subscribe-text{font-size:9px;color:#DBEFFB;font-weight:600;letter-spacing:0.5px;margin:0}
.camera-widget .post-action{display:flex;align-items:center;gap:4px;cursor:pointer;transition:color 0.2s}
.camera-widget .post-action:hover{color:#ff6b6b}
.camera-widget .action-likes{font-weight:600;color:#333;font-size:calc(12px * var(--text-scale))}
.camera-widget .post-1{--rotation:-8deg}
.camera-widget .post-2{--rotation:5deg}
.camera-widget .post-3{--rotation:3deg}
@keyframes camera-flash{50%{filter:brightness(2)}}
.footer-div{width:400px;margin:20px auto 0;border-radius:15px;background:#fff;color:#48494D;border:1px solid pink;box-shadow:0 20px 40px rgba(0,0,0,0.1);overflow:hidden}
.footer-banner{width:100%;height:120px;background:url('https://i.ibb.co/WNzW4mPG/1500x500.jpg') center/cover}
.footer-content{padding:20px;width:calc(100% - 40px);text-align:left}
.footer-avatar{width:80px;height:80px;border-radius:50%;background:url('https://i.ibb.co/HfNjNw1G/pfp.jpg') center/cover;border:3px solid #fff;margin:-40px 0 15px 0;box-shadow:0 4px 12px rgba(0,0,0,0.1);position:relative;z-index:1}
.footer-title{font-weight:bold;font-size:18px;color:#48494D;margin:0 0 8px 0}
.footer-username{font-size:14px;color:#CBD1D6;margin:0 0 15px 0}
.footer-bio{font-size:14px;color:#48494D;line-height:1.4;margin:0}


<div class="camera-widget">
<img class="preload-img" src="https://i.ibb.co/2Y51CLxt/001.png">
<img class="preload-img" src="https://i.ibb.co/bjRVRXJ5/002.png">
<img class="preload-img" src="https://i.ibb.co/krz0jYv/003.png">
<div class="camera-container">
<img class="camera-main" src="https://i.ibb.co/gMHW5kT0/camera.png">
<div class="social-post post-1" style="top:20%;left:-21%">
<div class="post-header">
<div class="user-avatar"></div>
<div class="user-info">
<div class="post-username">@saechan</div>
<div class="post-time">2h ago</div>
</div>
</div>
<img class="post-img" src="https://i.ibb.co/2Y51CLxt/001.png">
<div class="post-content">
<div class="post-actions">
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">♥</span> <span class="action-likes">247</span></div>
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">«»</span> <span style="font-size:calc(12px * var(--text-scale))">12</span></div>
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">↗</span> <span style="font-size:calc(12px * var(--text-scale))">Share</span></div>
</div>
</div>
<div class="post-subscribe">
<img class="subscribe-icon" src="https://i.ibb.co/27C4fnHp/icon.png">
<div class="subscribe-text">SUBSCRIBE TO SEE SAECHAN'S POSTS</div>
</div>
</div>
<div class="social-post post-2" style="top:5%;right:-23%">
<div class="post-header">
<div class="user-avatar"></div>
<div class="user-info">
<div class="post-username">@saechan</div>
<div class="post-time">5h ago</div>
</div>
</div>
<img class="post-img" src="https://i.ibb.co/bjRVRXJ5/002.png">
<div class="post-content">
<div class="post-actions">
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">♥</span> <span class="action-likes">189</span></div>
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">«»</span> <span style="font-size:calc(12px * var(--text-scale))">8</span></div>
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">↗</span> <span style="font-size:calc(12px * var(--text-scale))">Share</span></div>
</div>
</div>
<div class="post-subscribe">
<img class="subscribe-icon" src="https://i.ibb.co/27C4fnHp/icon.png">
<div class="subscribe-text">SUBSCRIBE TO SEE SAECHAN'S POSTS</div>
</div>
</div>
<div class="social-post post-3" style="bottom:10%;right:-24%">
<div class="post-header">
<div class="user-avatar"></div>
<div class="user-info">
<div class="post-username">@saechan</div>
<div class="post-time">1d ago</div>
</div>
</div>
<img class="post-img" src="https://i.ibb.co/krz0jYv/003.png">
<div class="post-content">
<div class="post-actions">
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">♥</span> <span class="action-likes">324</span></div>
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">«»</span> <span style="font-size:calc(12px * var(--text-scale))">21</span></div>
<div class="post-action"><span style="font-size:calc(12px * var(--text-scale))">↗</span> <span style="font-size:calc(12px * var(--text-scale))">Share</span></div>
</div>
</div>
<div class="post-subscribe">
<img class="subscribe-icon" src="https://i.ibb.co/27C4fnHp/icon.png">
<div class="subscribe-text">SUBSCRIBE TO SEE SAECHAN'S POSTS</div>
</div>
</div>
</div>
</div>

<div class="footer-div">
<div class="footer-banner"></div>
<div class="footer-content">
<div class="footer-avatar"></div>
<div class="footer-title">Saeka °˖✧(^▽^)°˖✧</div>
<div class="footer-username">@saechan</div>
<div class="footer-bio">✨ Lorem Ipsum!<br></div>
</div>
</div>