:root {
  --background:#1f242d;
  --foreground:#fff;
  --primary:#868afc;
  --secondary:#686dfb;
  --muted:#fff;
  --card-bg:#212C36;
  --border:#3a3f47;
  --shadow:#686dfb;
  --navbar-height: 80px;
}

.project-card {
  background:linear-gradient(145deg,var(--card-bg),#2a2f38);
  border-top:2px solid 686dfb;
  border-radius:0 0 16px 16px;
  padding:2rem;
  margin:0 2rem;
  margin-bottom: 30px;
  position:relative;
  box-shadow:0 10px 30px -10px rgba(104,109,251,0.2);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  animation: fadeInDown 0.8s ease-out;
}

.project-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:16px 16px 0 0;
  pointer-events:none;
}

.project-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 40px -10px rgba(104,109,251,0.4);
}

.project-logo {
  width:180px;
  height:180px;
  background:var(--card-bg);
  border:2px solid var(--primary);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  font-weight:bold;
  color:var(--primary);
  flex-shrink:0;
  box-shadow:0 0 20px rgba(134,138,252,0.3);
  transition:all 0.3s ease;
  padding:0;
  overflow:hidden;
}
.project-logo img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
}
.project-logo:hover {
  transform:scale(1.05);
  box-shadow:0 0 30px rgba(134,138,252,0.5);
}

.tech-stack {
  color: var(--muted);
  margin-top: -25px;
  padding-bottom: 20px;
  opacity: 0.7;
  padding-left: 15px;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.publication {
    display: flex;
    flex-direction: row;
    align-items: center; 
    margin: 20px auto;
    width: 550px;
    height: 150px;
    background-color:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px 20px;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

.publication img{
    width: 150px;
    height: auto;
    border-radius: 10px;         
    object-fit: cover;         
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.publication p{
    padding-left: 10px;
}

.publication p em{
    opacity: 0.7;
}

#chat-logo {
  cursor: pointer;
}