Loading…

Loading…

Just Luna.
One of those who created MSC
MSC Designer & Developer

MSC Empire

MSC is a community for communication where you can find new friends and like-minded people. We bring together individuals interested in programming and video games.

Loading…

.boot{ display:none; } .app{ opacity:1 !important; visibility:visible !important; } /* ====== Responsive ambient sizing + smaller mobile card (v2) ====== */ /* Ribbon centering: keyframes already translate(-50%), so no extra margin shift */ .ribbon{ margin-left: 0 !important; } @media (max-width: 480px){ /* Make the center panel noticeably smaller on phones */ .wrap{ padding: 12px; } .card{ width: min(360px, 84vw); border-radius: 22px; padding: .95rem .90rem; } h1{ font-size: 1.42rem; } p{ font-size: .92rem; line-height: 1.5; margin-top: .45rem; } .avatar-wrap{ width: 92px; height:92px; margin-bottom:.78rem; } .avatar{ width: 80px; height:80px; } .msc{ margin-top: .75rem; padding: .88rem .88rem; border-radius: 18px; } .msc p{ font-size: .90rem; line-height: 1.45; } .buttons{ margin-top: .95rem; gap: .85rem; } .btn{ width: 46px; height:46px; border-radius: 16px; } .icon, .github-icon{ width: 22px; height: 22px; } /* Make background effects scale to the screen instead of being huge */ .blob{ filter: blur(20px); opacity: .44; } .blob.b1{ width: 46vmin; height: 46vmin; left: -16vmin; top: -14vmin; animation: floatA_m 6.2s ease-in-out infinite; } .blob.b2{ width: 54vmin; height: 54vmin; right: -20vmin; bottom: -22vmin; animation: floatB_m 7.0s ease-in-out infinite; } .blob.b3{ width: 38vmin; height: 38vmin; left: 56%; top: -10vmin; opacity: .26; animation: floatC_m 5.8s ease-in-out infinite; } .ribbon{ width: 104vmin; height: 26vmin; top: 58%; filter: blur(18px); opacity: .18; animation: ribbon_m 4.6s ease-in-out infinite; } .ribbon.r2{ top: 20%; opacity: .14; filter: blur(16px); animation-duration: 4.2s; } } /* Extra-short phones: reduce sizes a bit more (still no scrolling) */ @media (max-width: 480px) and (max-height: 720px){ .card{ width: min(340px, 82vw); padding: .86rem .84rem; } h1{ font-size: 1.34rem; } .avatar-wrap{ width: 86px; height:86px; } .avatar{ width: 74px; height:74px; } .btn{ width: 44px; height:44px; } } /* Mobile-specific, smaller-motion keyframes so effects don't swallow the whole screen */ @media (max-width: 480px){ @keyframes floatA_m{ 0%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); } 35%{ transform: translate3d(80px,46px,0) scale(1.08) rotate(7deg); } 70%{ transform: translate3d(30px,92px,0) scale(1.03) rotate(-6deg); } 100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); } } @keyframes floatB_m{ 0%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); } 40%{ transform: translate3d(-86px,-60px,0) scale(1.09) rotate(-8deg); } 75%{ transform: translate3d(-24px,-96px,0) scale(1.04) rotate(6deg); } 100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); } } @keyframes floatC_m{ 0%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); } 50%{ transform: translate3d(0,78px,0) scale(1.06) rotate(9deg); } 100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); } } @keyframes ribbon_m{ 0%{ transform: translate3d(-50%,-50%,0) rotate(-14deg) scaleX(1); } 50%{ transform: translate3d(-50%,-50%,0) rotate(22deg) scaleX(1.14); } 100%{ transform: translate3d(-50%,-50%,0) rotate(-14deg) scaleX(1); } } }