* {
   font-family: "Lilita One", sans-serif;
   font-optical-sizing: auto;
   font-weight: 100;
   font-style: normal;
   text-decoration: none;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 .name {
   color: rgb(255, 255, 255);
   font-size: 1.3em;
   font-weight: bolder;
   word-spacing: -3px;
   justify-content: center;
   text-align: center;
   -webkit-text-stroke: 2.5px rgba(0, 123, 255, 0.724);
   text-shadow: 0 0 20px rgba(0, 0, 0, 0), 0 0 25px rgb(0, 0, 0);
   cursor: auto;
 }

 html,
 body {
   overflow: hidden;
   height: 100%;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background: black;
 }

 @property --angle {
   syntax: '<angle>';
   initial-value: 0deg;
   inherits: false;
 }

 .profile-card {
   --angle: 0deg;
   position: relative;
   width: clamp(280px, 95vw, 400px);
   aspect-ratio: 4 / 5;
   height: auto;
   min-height: 420px;
   background: rgba(255, 255, 255, 0.269);
   border-radius: 0%;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
   overflow: hidden;
   text-align: center;
   word-spacing: -0.2em;
   border: 5px solid white;
   border-radius: 0%;
   border-image: linear-gradient(var(--angle), blue, white 50%, blue) 1;
   transition: all 0.3s ease;
   animation: rotateAngle 3s linear infinite;
 }

 @keyframes rotateAngle {
   from {
     --angle: 0deg;
   }

   to {
     --angle: 360deg;
   }
 }


 .profile-actions {
   position: absolute;
   bottom: 0%;
   width: 100%;
   height: 82px;
   background: rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: space-around;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1;
   padding-top: 20px;
 }

 .follow-btn,
 .message-btn,
 .portfolio-btn {
   background: linear-gradient(45deg, #007bff, #0056b3);
   color: #ffffff;
   border: 2px solid #ffffff;
   padding: 12px 24px;
   font-size: 15px;
   font-weight: lighter;
   cursor: pointer;
   border-radius: 10px;
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   bottom: 15%;
   transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
 }

 .follow-btn i,
 .message-btn i,
 .portfolio-btn i {
   margin-right: 5px;
 }

 .follow-btn:hover,
 .message-btn:hover,
 .portfolio-btn:hover {
   background: linear-gradient(45deg, #0056b3, #003a7d);
   transform: translateY(-3px);
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
 }

 .follow-btn:active,
 .message-btn:active,
 .portfolio-btn:active {
   transform: translateY(0);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 }

 .follow-btn::before,
 .message-btn::before,
 .portfolio-btn::before {
   content: '';
   position: absolute;
   top: -100%;
   left: -50%;
   width: 45%;
   height: 200%;
   background: rgba(255, 255, 255, 0.5);
   transform: skewX(-30deg);
   transition: transform 0.2s ease;
 }

 .follow-btn:hover::before,
 .message-btn:hover::before,
 .portfolio-btn:hover::before {
   animation: shine 0.25s ease forwards;
 }

 @keyframes shine {
   0% {
     left: -50%;
   }

   50% {
     left: 50%;
   }

   100% {
     left: 150%;
   }
 }

 .toggle-slide-btn {
   width: 35px;
   height: 35px;
   background: #007bff;
   border-radius: 50%;
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   position: absolute;
   bottom: 13%;
   left: 50%;
   transform: translateX(-50%);
   cursor: zoom-in;
   z-index: 10;
   transition: transform 0.2s ease, background 0.2s ease;
 }

 .toggle-slide-btn i {
   display: block;
   line-height: 1;
   margin: 0;
   padding: 0;
   font-size: inherit;
 }

 .toggle-slide-btn:hover {
   transform: translateX(-50%) scale(1.1);
   background: #0056b3;
 }

 .profile-details {
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   padding-top: 30px;
   bottom: -100%;
   overflow: auto;
   left: 0;
   transition: 0.3s ease-in-out;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }

 .profile-details::-webkit-scrollbar {
   display: none;
 }

 .profile-details.show {
   bottom: 0;
 }

 .profile-details h1 {
   color: rgb(0, 119, 255);
   font-size: 2.2em;
   font-weight: 900;
   word-spacing: -1px;
   justify-content: center;
   text-align: center;
   -webkit-text-stroke: 1px white;
   font-family: "Lilita One", serif;
 }

 .profile-details h2 {
   color: rgb(0, 119, 255);
   font-size: 1.8em;
   font-weight: 900;
   word-spacing: -1px;
   justify-content: center;
   text-align: center;
   -webkit-text-stroke: 1px white;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   margin: 20px 0 10px 0;
 }

 .intro {
   text-align: center;
   padding: 5px;
   margin: auto;
   font-family: Arial, sans-serif;
 }

 .intro h1 {
   text-align: center;
   font-size: 2em;
   font-weight: bold;
   color: #007bff;
   margin: 0;
   letter-spacing: 3px;
 }

 .intro p {
   font-size: 15px;
   color: #ffffff;
   margin-top: 10px;
   word-spacing: 5px;
   -webkit-text-stroke: 0.3px rgb(33, 150, 243);
   text-shadow: 0 0 20px rgb(0, 0, 0), 0 0 25px rgb(0, 0, 0);
 }

 .social-links {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin: 20px;
 }

 .social-links a,
 .project-links a {
   position: relative;
   background: #007bff;
   padding: 10px;
   margin: 15px 15px;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   border-radius: 50px;
   font-size: 1.5em;
   font-weight: lighter;
   color: #ffffff;
   transition: 0.5s ease;
   text-decoration: none;
 }

 .social-links a::after,
 .project-links a::after {
   content: attr(aria-label);
   position: absolute;
   top: -35px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: #ffffff;
   padding: 5px 10px;
   border-radius: 5px;
   font-size: 0.75em;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s, transform 0.3s;
   pointer-events: none;
   z-index: 10;
 }

 .social-links a:hover::after,
 .project-links a:hover::after {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(-5px);
 }

 .social-links a:hover,
 .project-links a:hover {
   background: #0056b3;
   transform: scale(1.1);
 }

 /* Style for placeholder/disabled links */
 .social-links .disabled,
 .project-links .disabled {
   position: relative;
   background: #555;
   padding: 10px;
   margin: 15px 15px;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   border-radius: 50px;
   font-size: 1.5em;
   font-weight: lighter;
   color: #ffffff;
   cursor: not-allowed;
   opacity: 0.6;
   transition: 0.5s ease;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .social-links .disabled::after,
 .project-links .disabled::after {
   content: attr(aria-label);
   position: absolute;
   top: -35px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.8);
   color: #ffffff;
   padding: 5px 10px;
   border-radius: 5px;
   font-size: 0.75em;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s, transform 0.3s;
   pointer-events: none;
   z-index: 10;
 }

 .social-links .disabled:hover::after,
 .project-links .disabled:hover::after {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(-5px);
 }

 .social-links .disabled:hover,
 .project-links .disabled:hover {
   background: #555;
   transform: none;
 }

 .profile-header {
   position: relative;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   color: #333333;
 }

 .profile-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   filter: grayscale(100%);
   background-size: cover;
   background-position: center;
   transform: scale(1.1);
   transition: filter 0.3s ease;
   cursor: crosshair;

 }

 .profile-header:hover .profile-bg {
   filter: grayscale(0%);
 }

 .profile-info {
   width: 90%;
   position: absolute;
   left: 50%;
   right: 50%;
   bottom: 25%;
   transform: translateX(-50%);
 }

 .verified-badge {
   width: 40px;
   height: 40px;
   display: inline-block;
   vertical-align: middle;
   position: relative;
   transition: transform 0.2s ease-in-out;
   cursor: pointer;
   margin-right: 2px;
   margin-top: -5px;
   border-radius: 50%;
   border: 1px solid transparent;
   background-color: transparent;
 }

 .verified-badge::after {
   content: '';
   position: absolute;
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
   background-color: transparent;
   border-radius: 50%;
 }

 .verified-badge-container {
   position: relative;
   display: inline-block;
 }

 .verified-badge:active {
   animation: bounce 0.4s ease-in-out;
 }

 @keyframes bounce {
   0% {
     transform: scale(1);
   }

   30% {
     transform: scale(1.3);
   }

   50% {
     transform: scale(0.9);
   }

   100% {
     transform: scale(1);
   }
 }

 /* Tags container - DECREASED PADDING */
 .tags {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   margin-top: 8px;
   flex-wrap: wrap;
 }

 .tag {
   display: inline-flex;
   align-items: center;
   background: transparent;
   border: none;
   padding: 4px 0;
   color: #ffffff;
   font-size: 15px;
   font-weight: 500;
   cursor: none;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   position: relative;
   font-weight: lighter;
   letter-spacing: 0.02em;
   margin: 0 4px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 /* Top and bottom border lines - white */
 .tag::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1.5px;
   background: rgba(255, 255, 255, 0.9);
   transition: all 0.3s ease;
 }

 .tag::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 1.5px;
   background: rgba(255, 255, 255, 0.9);
   transition: all 0.3s ease;
 }

 .tag:hover {
   padding: 4px 12px;
   color: #3b82f6;
   letter-spacing: 0.04em;
   text-shadow: none;
   text-decoration: none;
 }

 .tag:hover::before {
   left: -12px;
   right: -12px;
   background: #3b82f6;
   height: 2px;
   box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
 }

 .tag:hover::after {
   left: -12px;
   right: -12px;
   background: #3b82f6;
   height: 2px;
   box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
 }

 .tag i {
   margin-right: 6px;
   font-size: 0px;
   color: rgba(255, 255, 255, 0.9);
   transition: all 0.3s ease;
 }

 .tag:hover i {
   color: #3b82f6;
   transform: translateX(3px);
 }

 .profile-info p {
   margin-top: 10px;
 }

 .fa-shake {
   animation-duration: 3s;
   transition: animation-duration 0.2s;
 }

 .fa-shake:hover {
   animation: none;
   transform: rotate(5deg);
 }

 .fa-spin {
   animation-duration: 1ms;

 }

 p {
   font-family: Arial, sans-serif;
   font-size: 16px;
 }

 .section-divider {
   border: none;
   height: 2px;
   width: 80%;
   background: linear-gradient(to right, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 1), rgba(0, 123, 255, 0.5));
   border-radius: 5px;
   margin: 20px auto;
   backdrop-filter: blur(5px);
 }