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

    body {
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background: linear-gradient(120deg,#021,#010,#201);
      overflow:hidden;
      color:white;
      padding:20px;
      -webkit-user-select: none; 
      -moz-user-select: none;    
      -ms-user-select: none;  
      user-select: none;       
    }

    body::before {
      content:"";
      position:absolute;
      width:200%;
      height:200%;
      background: radial-gradient(circle at 20% 30%, rgba(0,255,150,0.1), transparent),
                  radial-gradient(circle at 80% 70%, rgba(150,0,255,0.1), transparent);
      animation: moveBg 10s infinite alternate ease-in-out;
    }

    @keyframes moveBg {
      from { transform: translate(-10%, -10%); }
      to { transform: translate(10%, 10%); }
    }

    .card {
      position:relative;
      width:100%;
      max-width:380px;
      padding:30px;
      border-radius:25px;
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(15px);
      text-align:center;
      animation: appear 0.8s ease;
      z-index: 2;
      position: relative;
    }

    @keyframes appear {
      from { transform: scale(0.8); opacity:0; filter:blur(10px);} 
      to { transform: scale(1); opacity:1; filter:blur(0);} 
    }

    .avatar {
      width:90px;
      height:90px;
      border-radius:50%;
      margin:auto;
      background:url('https://www.ismatrons.com/downloads/yticon.png') center/cover;
      animation: breathe 3s infinite;
    }

    @keyframes breathe {
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    h1 { font-size: clamp(28px,5vw,42px); margin:10px 0; }
    p { color:#ccc; font-size: clamp(14px,2.5vw,16px); }

    .youtube {
      background: linear-gradient(90deg,#ff0000,#ff4d4d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight:bold;
    }

    .java {
      color:#f89820;
      font-weight:bold;
      position:relative;
    }

    .java::after {
      content:"☕";
      margin-left:5px;
      font-size:0.9em;
    }

    /* BOTON */
    .btn {
      display:inline-block;
      margin-top:20px;
      padding:12px 24px;
      border-radius:25px;
      background: linear-gradient(90deg,#444,#222);
      color:white;
      text-decoration:none;
      transition:0.3s;
      position:relative;
      overflow:hidden;
    }

    .btn:hover {
      transform: scale(1.1);
    }

    .btn::after {
      content:"";
      position:absolute;
      width:120%;
      height:100%;
      top:0;
      left:-120%;
      background: linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
      transition:0.5s;
    }

    .btn:hover::after {
      left:120%;
    }

    /* NAVBAR */
    .nav {
      position:absolute;
      bottom:20px;
      display:flex;
      gap:15px;
      background: rgba(118, 118, 118, 0.5);
      padding:10px 20px;
      border-radius:30px;
      backdrop-filter: blur(10px);
      z-index: 3;
      position: fixed;
    }

    .nav img {
      width: 34px;          
      height: 34px;
      padding: 6px;          
      object-fit: contain;
      opacity: 0.7;
      cursor: pointer;
      transition: 0.3s;
      border-radius: 20%;    
      border: 1.5px solid transparent; 
    }

    .nav img:hover {
      opacity:1;
      transform: scale(1.2);
    }

    /* PORTFOLIO */
    .portfolio {
      position:absolute;
      inset:0;
      display:none;
      padding:20px;
      grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
      gap:15px;
      z-index: 2;
      position: relative;
    }

    .item {
      background:#111;
      border-radius:15px;
      height:140px;
      position:relative;
      overflow:hidden;
      cursor:pointer;
      transition:0.3s;
    }

    .item:hover {
      transform: scale(1.05);
    }

    .overlay {
      position:absolute;
      bottom:0;
      width:100%;
      background: rgba(0,0,0,0.7);
      padding:10px;
      transform: translateY(100%);
      transition:0.3s;
      font-size:12px;
    }

    .item:hover .overlay {
      transform: translateY(0);
    }

    body.dark::after {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(5px);
      z-index: 1;
    }

    .portfolio {
      z-index: 2;
    }

    .version {
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    color: #b0b0b0;
  }
  
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip {
  position: absolute;
  bottom: 45px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(5px);
  transition: 0.2s;
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}

.nav-item:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

.nav-item.active img {
  background: rgba(255, 255, 255, 0.15);
  border-color: white;
  opacity: 1;
}