.profile-frame-container{background:0 0;border-radius:50%;width:200px;height:200px;padding:5px;display:inline-block;position:relative}.profile-frame-border{z-index:0;border-radius:50%;position:absolute;inset:-5px}.profile-frame-border:before{content:"";background:conic-gradient(#0000 0%,#3b82f6cc 10%,#8b5cf6cc 15%,#ec4899cc 20%,#f59e0bcc 25%,#0000 30%);border-radius:50%;animation:4s linear infinite rotate-gradient;position:absolute;inset:0}@media (prefers-color-scheme:dark){.profile-frame-border:before{background:conic-gradient(#0000 0%,#3b82f6e6 10%,#8b5cf6e6 15%,#ec4899e6 20%,#f59e0be6 25%,#0000 30%)}}.profile-frame-image{-o-object-fit:cover;object-fit:cover;z-index:1;border-radius:50%;width:100%;height:100%;position:relative}.profile-frame-container:hover .profile-frame-border:before{animation-play-state:paused}@keyframes rotate-gradient{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:768px){.profile-frame-container{width:180px;height:180px}.profile-frame-border:before{animation-duration:5s}}@supports not (background:conic-gradient(from 0deg, transparent, #3b82f6)){.profile-frame-border:before{background:linear-gradient(135deg,#0000,#3b82f6cc,#8b5cf6cc,#ec4899cc,#0000)}}