body {
  background: #000;
  color: #00ff9c;
  font-family: "Courier New", monospace;
  margin: 0;
}

#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: black;
}
    

.terminal {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  animation: boot 0.5s ease;

 
}

.input-line {
  display: flex;
}

input {
  background: transparent;
  border: none;
  color: #00ff9c;
  outline: none;
  width: 100%;
  font-family: "Courier New", monospace;
}

.line {
  margin-bottom: 5px;
}

.repo-card {
  background: #0a0a0a;
  border: 1px solid #00ff9c33;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  transition: 0.2s;
}

.repo-card:hover {
  border-color: #00ff9c;
  background: rgba(0, 255, 156, 0.1);
  transform: scale(1.02);
}

.repo-title {
  font-weight: bold;
  color: #00ff9c;
}

.repo-desc {
  color: #aaa;
  font-size: 13px;
  margin: 5px 0;
}

.repo-info {
  font-size: 12px;
  color: #00ff9c;
  margin: 5px 0;
}

.repo-link {
  font-size: 12px;
  color: #00ff9c;
  text-decoration: underline;
}

.socials {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
}

.socials a {
  font-size: 20px;
  color: #00ff9c;
  text-decoration: none;
  transition: 0.2s;
}

.socials a:hover {
  transform: scale(1.2);
}

.fade-in {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: fadeIn 0.4s ease forwards;
}

.cursor {
  position: relative;
}

.cursor::after {
  content: "_";
  margin-left: 5px;
  animation: blink 1s infinite;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes boot {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}