style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: #0b2347;
  color: #fff;
}

/* Top bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #003399;
  padding: 8px 16px;
  color: #fff;
}

.logo {
  font-weight: bold;
  text-transform: lowercase;
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  margin: 0 6px;
  font-size: 14px;
}

.main-nav a.active {
  font-weight: bold;
  text-decoration: underline;
}

.search-box input {
  padding: 3px 6px;
  font-size: 12px;
}

.search-box button {
  padding: 3px 8px;
  font-size: 12px;
}

/* Layout */
.page {
  max-width: 1200px;
  margin: 16px auto;
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 16px;
}

/* Reusable cards */
.profile-card,
.profile-edit-box,
.status-box,
.post,
.top-friends,
.music-player {
  background: #0f3d7a;
  border-radius: 4px;
  padding: 12px;
}

/* Left column */
.profile-card h2 {
  margin-bottom: 4px;
}

.tagline {
  font-size: 12px;
  color: #c7dcff;
  margin-bottom: 8px;
}

.avatar {
  width: 100%;
  height: 140px;
  background-color: #002b66;
  background-image: url("https://placekitten.com/200/200");
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 8px;
}


.stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}

.stats span {
  font-weight: bold;
}

.btn-primary,
.btn-secondary {
  border: none;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}

.btn-primary {
  background: #ffcc33;
  color: #000;
}

.btn-secondary {
  background: #0059d6;
  color: #fff;
}

.profile-edit-box {
  margin-top: 12px;
  font-size: 13px;
}

/* Contact table under profile */
.contact-box {
  background: #004a99;
  margin-top: 12px;
  padding: 0 8px 8px;
  border: 2px solid #0084c7;
  border-radius: 3px;
  font-size: 11px;
}

/* Header strip for "CONTACTING JOHN" */
.contact-box h3 {
    margin: 0 -8px 8px;
    padding: 6px 8px;
    background: #0084c7;           /* dark header strip like classic MySpace */
    border-bottom: 1px solid #0084c7;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}


/* Grid of contact buttons */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* Individual contact buttons */
/* Contact buttons (Add to Friends, Send Message, etc.) */
.contact-btn {
    display: inline-block;
    width: 90%;          /* two buttons per row */
    margin: 2px 1%;      /* little gap between them */
    padding: 8px 0;      /* vertical padding inside button */
    background: #0050aa; /* MySpace-y blue */
    border: 1px solid #002a5c;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    box-sizing: border-box;
}


/* Hover effect for contact buttons */
.contact-btn:hover {
  background: #0060ff;
  border-color: #ffffff;
  text-decoration: underline;
  cursor: pointer;
}

/* About Me / Who I'd Like to Meet boxes */
.info-box {
  background: #004a99;
  border-radius: 3px;
  margin-top: 12px;
  padding: 0 8px 8px;
  border: 2px solid #0084c7;
  font-size: 12px;
}

/* Section titles (About Me, Who I'd Like to Meet) */
/* Section titles (About Me, Who I'd Like to Meet) */
.info-box h3 {
  margin: 0 -8px 8px;
  padding: 6px 8px;
  background: #0084c7;
  border-bottom: 1px solid #0084c7;
  font-size: 13px;         /* bigger than body text */
  font-weight: bold;       /* make it pop like other headers */
  color: #ffffff;          /* bright white like “Music Player” */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Text inside those sections */
.info-content {
  line-height: 1.4;
}


.profile-edit-box label {
  display: block;
  margin-bottom: 8px;
}

.profile-edit-box input {
  width: 100%;
  padding: 4px;
  border: none;
  border-radius: 2px;
}

/* Center column */
.status-box textarea {
  width: 100%;
  min-height: 60px;
  margin: 6px 0;
  padding: 6px;
  border-radius: 3px;
  border: none;
}

.status-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.post {
  margin-top: 16px;
}

.post-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.post-avatar {
  width: 40px;
  height: 40px;
  background: #002b66;
  border-radius: 3px;
}

.post-author {
  font-weight: bold;
}

.post-time {
  font-size: 11px;
  color: #c7dcff;
}

.post-text {
  margin: 8px 0;
  font-size: 14px;
}

.post-photo {
  width: 100%;
  height: 200px;
  background: #002b66;
  border-radius: 4px;
  margin-bottom: 8px;
}

.post-footer button {
  background: transparent;
  border: none;
  color: #ffcc33;
  cursor: pointer;
  margin-right: 12px;
}

/* Right column */
.top-friends {
    background: #004a99;
    padding: 0 8px 8px;
    border: 2px solid #0084c7;
    border-radius: 3px;
        margin-bottom: 40px;


}

.top-friends h3 {
    margin: 0 -8px 8px;
    padding: 6px 8px;
    background: #0084c7;
    border-bottom: 1px solid #0084c7;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.top-friends ul {
  list-style: none;
  margin-top: 6px;
  font-size: 13px;
}

.top-friends li {
  margin-bottom: 4px;
}

.music-player {
  margin-top: 0px;
      background: #004a99;
    padding: 0 8px 8px;
    border: 2px solid #0084c7;
    border-radius: 3px;
}

.music-player h3 {
    margin: 0 -8px 8px;
    padding: 6px 8px;
    background: #0084c7;
    border-bottom: 1px solid #0084c7;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.track-info {
  font-size: 13px;
  margin-bottom: 8px;
}

.player-controls button {
  background: #0059d6;
  border: none;
  border-radius: 3px;
  padding: 4px 6px;
  margin-right: 4px;
  cursor: pointer;
}

.music-player input[type="range"] {
  width: 100%;
  margin-top: 8px;
}
/* Top Friends “Friend Space” style */
.friend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

/* Individual friend photos */


}
/* Friend card container (base style) */
.friend-card {
  background: #003b88;
  border-radius: 3px;
  padding: 4px;
  text-align: center;
  font-size: 11px;
  transition: all 0.2s ease-in-out;
}

/* Hover glow + lift effect */
.friend-card:hover {
  background: #0044aa;
  transform: translateY(-3px);
  box-shadow: 0 0 6px #66aaff;
  cursor: pointer;
}

.friend-photo {
  width: 100%;
  height: 70px;
  background-color: #001f4f;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  margin-bottom: 4px;
}
.friend-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  transition: transform 0.2s ease-out;
}
/* Zoom the photo when you hover a friend card */
.friend-card:hover .friend-photo img {
  transform: scale(1.07);
}



.friend-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-link {
    text-decoration: none;
}

/* Make Top Friends names readable + hover color */
.friend-link .friend-name {
  color: #ffffff;
  text-decoration: none;
          /* normal = white */
}

.friend-link:hover .friend-name {
  color: #ffcc33;          /* hover = yellow like buttons */
  text-decoration: underline;
}
/* Online status badge under profile name */
.online-status {
  margin-top: 6px;
  font-size: 11px;
  color: #a9ffa9;        /* soft green text */
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff4c;    /* bright green dot */
  box-shadow: 0 0 6px rgba(0, 255, 76, 0.8);  /* glow effect */
  animation: online-pulse 1.4s ease-in-out infinite;
}

@keyframes online-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(0, 255, 76, 0.6);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 12px rgba(0, 255, 76, 1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(0, 255, 76, 0.6);
  }
}

/* Equalizer container */
.eq-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin: 6px 0 8px 0;
  padding: 3px 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

/* Individual bars */
.eq-bar {
  flex: 1;
  max-width: 8px;
  height: 20%;
  background: linear-gradient(to top, #00ff99, #00ccff);
  border-radius: 4px 4px 0 0;
  opacity: 0.5;
  transition: height 0.08s linear, opacity 0.08s linear;
}