/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'font1', 'Arial Black', sans-serif;
}

@font-face {
  font-family: 'font1';
  src: url('Web437_EagleSpCGA_Alt2.woff') format('woff');
}

body {
  background-color: #050811;
  color: #ffffff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(5,8,17,0.9) 30%, rgba(5,8,17,0.2) 100%), url('cj.jpg');
  background-size: cover;
  background-position: center;
}

  /* Top Stats Bar */
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }

    .stats-pill {
      background: linear-gradient(180deg, #122152 0%, #080d24 100%);
      border: 2px solid #3c6cd4;
      border-radius: 20px;
      padding: 6px 20px;
      display: flex;
      gap: 20px;
      font-size: 14px;
      color: #7da5ff;
    }

    .stats-pill span {
      color: #ffffff;
    }

    .online-friends {
      font-size: 14px;
      color: #cccccc;
    }


    /* logo container */
    .main-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }


    /* Logo Placeholder */
    .logo-container {
      margin-bottom: 10px;
      padding-left: 0px;
      gap: 0px;
    }
    
.logo-container img {
  width: 100%;
  max-width: 80%;
  height: 250px;
  display: block;
}


    /* Navigation List */
    .menu-nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .menu-item {
      font-size: 60px;
      color: #d0d8e8;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      padding-left: 35px;
    }

    .menu-item:hover, .menu-item.active {
      color: #ffffff;
      transform: translateX(10px);
      text-shadow: 0 0 8px #ffffff;
    }

    /* 1. Shows the arrow on hover AND on active item */
.menu-item:hover::before,
.menu-item.active::before {
  content: '➤ ';
  margin-right: 8px;
  font-size: 20px;
}

/* 2. Hide arrow from active item when hovering over another menu link */
.menu-nav:hover .menu-item.active:not(:hover)::before {
  content: '';
}

    .badge {
      font-size: 11px;
      background: #111;
      border: 1px solid #444;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 10px;
      color: #00ff66;
    }

    /* Bottom Bar & Music Widget */
    .bottom-bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 20px 40px;
    }

    .music-widget {
      background: rgba(15, 20, 35, 0.85);
      border: 1px solid #2a3a60;
      border-radius: 8px;
      padding: 8px 15px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .vinyl-icon {
      width: 30px;
      height: 30px;
      background: #111;
      border-radius: 50%;
      border: 2px solid #444;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vinyl-inner {
      width: 10px;
      height: 10px;
      background: #e63946;
      border-radius: 50%;
    }

    .track-info {
      font-size: 12px;
      font-family: sans-serif;
    }

    .track-label {
      color: #e2a84b;
      font-style: italic;
      display: block;
    }

    .controls-guide {
      display: flex;
      gap: 15px;
      font-size: 12px;
      font-family: sans-serif;
      color: #aaaaaa;
    }

    .key {
      color: #fff;
      font-weight: bold;
    }