*{margin:0;padding:0;box-sizing:border-box}
body{
 background:#000;
 color:#fff;
 overflow:hidden;
 font-family:Courier New,monospace;
 cursor:url('https://cdn.leanhduc.pro.vn/theme/theme-thong-tin-lien-he-version-2-0/images/mouse-f1.png'),auto;
}

#loader{
 position:fixed;inset:0;
 background:#000;
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:9999;
}
.loader-core{
 width:140px;height:140px;
 border-radius:50%;
 border:4px solid transparent;
 border-top:4px solid #9b59ff;
 box-shadow:0 0 60px #9b59ff;
 animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

#bg{
 position:fixed;inset:0;
 background:url('assets/images/bg.gif') center/cover no-repeat;
 filter:blur(6px) brightness(.55);
 z-index:-1;
}

.avatar{
 position:absolute;
 top:25px;left:50%;
 transform:translateX(-50%);
 width:190px;height:190px;
 border-radius:50%;
 border:4px solid #9b59ff;
 box-shadow:0 0 50px #9b59ff;
 animation:float 4s ease-in-out infinite;
 overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
@keyframes float{
 0%,100%{transform:translate(-50%,0)}
 50%{transform:translate(-50%,-14px)}
}

.center{
 height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;
 text-align:center;
}

.glitch{
 font-size:64px;
 color:#9b59ff;
 letter-spacing:4px;
 position:relative;
 text-shadow:0 0 15px #9b59ff;
}
.glitch::before,.glitch::after{
 content:attr(data-text);
 position:absolute;
 left:0;top:0;
}
.glitch::before{
 color:red;
 transform:translate(-2px,0);
 animation:gl1 2s infinite;
}
.glitch::after{
 color:cyan;
 transform:translate(2px,0);
 animation:gl2 2s infinite;
}
@keyframes gl1{0%{clip-path:inset(0 0 80% 0)}50%{clip-path:inset(40% 0 20% 0)}100%{clip-path:inset(0 0 80% 0)}}
@keyframes gl2{0%{clip-path:inset(60% 0 0 0)}50%{clip-path:inset(20% 0 40% 0)}100%{clip-path:inset(60% 0 0 0)}}

.bio{margin-top:10px;color:#ddd;font-size:20px}

#typing{
 margin-top:20px;
 padding:12px 20px;
 border:2px solid #9b59ff;
 box-shadow:0 0 25px #9b59ff;
 min-width:260px;
}

.discord{
 margin-top:18px;
 color:#9b59ff;
 font-weight:bold;
}

.social{
 position:absolute;
 bottom:40px;
 display:flex;
 gap:22px;
}
.social a{
 width:60px;height:60px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:#111;
 color:#fff;
 box-shadow:0 0 25px #9b59ff;
 font-size:24px;
 transition:.3s;
}
.social a:hover{
 transform:scale(1.3) rotate(10deg);
}