body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; }
    .profile-page { max-width: 600px; margin: 30px auto; }

    h1 {
      font-size: 28px;
      text-align: center;
      margin-bottom: 20px;
      color: #fefefe;
    }

    .profile-header-big {
      width: 85%;
      background: rgba(255, 255, 255, 0);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      padding: 30px 20px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);

      backdrop-filter: blur(10px); /* blurs whatever is behind the navbar */
      -webkit-backdrop-filter: blur(5px); 
      border: 1px solid rgba(255, 255, 255, 0.387);
    }

    .pfp-large {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
    }

    .pfp-small {
      width: 100px;
      height: 100px;
      border-radius: 22%;
      object-fit: cover;
      margin-left: 3%;
      margin-right: 3%;
      margin-bottom: 6%;
    }

    .user-tag { color: gray; margin: 5px 0; }

    .following-list-card {
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      background: rgba(255, 255, 255, 0);
      margin-top: 25px;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border: 1px solid rgba(255, 255, 255, 0.387);
      backdrop-filter: blur(10px); /* blurs whatever is behind the navbar */
      -webkit-backdrop-filter: blur(5px); 
    }
    .following-list-card2 {

    top: 0;

    left: 0;

    right: 0;

    height: 10px;

    padding: 0 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    font-size: 13px;

    color: white;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(10px);
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      background: rgba(255, 255, 255, 0);
      margin-top: 25px;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border: 1px solid rgba(255, 255, 255, 0.387);
      backdrop-filter: blur(10px); /* blurs whatever is behind the navbar */
      -webkit-backdrop-filter: blur(5px); 
    }
    .following-list-card a {
      color: #ffffff; 
      text-decoration: none;
    }

    .pfp-row {
      display: flex;
      flex-wrap: wrap;
      text-align: center;
    }
    
    .pfp-item {
      margin: 10px;
    }
    
    .pfp-name {
      font-size: 14px;
      margin-top: 5px;
      color: #444;
    }

    .back-link { color: #8e4444; display:block; text-align:center; margin-top:20px; }


.battery {
  display: flex;
  align-items: center;
  gap: 6px;
}

.battery-body {
  width: 28px;
  height: 12px;
  border: 2px solid white;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.battery-fill {
  height: 100%;
  width: 50%;
  background: limegreen;
  transition: width 0.3s ease, background 0.3s ease;
}

.battery-tip {
  width: 3px;
  height: 6px;
  background: white;
  border-radius: 1px;
}