/* LINKS */

ul li a {
    text-decoration: none;
    color: rgb(12, 12, 12);  
    display: inline-block; 
    transition: transform 0.1s ease; 
    font-size: 35px;
    margin-top: 2px;  
    
}

ul {
      list-style-type: none;
}


/* Link Behavior - HOME */
a.home:hover {
  color: #9e4b50;
  text-shadow: 2px 4px 6px rgba(210, 28, 28, 0.2);    
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;
}
ul li a.home:active {
  color: #7c3237;
  text-shadow: 2px 4px 6px rgba(147, 15, 15, 0.2); 
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - ABOUT */
a.about:hover {
  color: #4160a2;
  text-shadow: 2px 4px 6px rgba(0, 119, 255, 0.2); 
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;       
}
ul li a.about:active {
  color: #2b4888; 
  text-shadow: 2px 4px 6px rgba(0, 85, 182, 0.2); 
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - PROJECTS */
a.projects:hover {
  color: #7a9977;
  text-shadow: 2px 4px 6px rgba(56, 200, 77, 0.2);   
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;        
}
ul li a.projects:active {
  color: #4f7b4c;   
  text-shadow: 2px 4px 6px rgba(26, 123, 41, 0.2); 
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - BLOG */
a.blog:hover {
  color: #7a5c89;     
  text-shadow: 2px 4px 6px rgba(122, 14, 254, 0.2); 
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;          
}
ul li a.blog:active {
  color: #5e426c;     
  text-shadow: 2px 4px 6px rgba(84, 7, 180, 0.2); 
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - SKILLS */
a.skills:hover {
  color: #d1a21e;   
  text-shadow: 2px 4px 6px rgba(255, 196, 0, 0.28);   
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;         
}
ul li a.skills:active {
  color: #bc8e10;    
  text-shadow: 2px 4px 6px rgba(182, 106, 0, 0.28); 
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - RESUME */
a.resume:hover {
  color: #88a5d7;
  text-shadow: 2px 4px 6px rgba(61, 128, 217, 0.28); 
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;           
}
ul li a.resume:active {
  color: #7c8ace;   
  text-shadow: 2px 4px 6px rgba(48, 96, 191, 0.28); 
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - Transcript */
a.transcript:hover {
  color: #6c9d9a;    
  text-shadow: 2px 4px 6px rgba(21, 198, 128, 0.28);    
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;       
}
ul li a.transcript:active {
  color: #4d7b78;    
  text-shadow: 2px 4px 6px rgba(15, 167, 106, 0.28);  
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - CONTACT */
a.contact:hover { 
  color: #f5a689;
  text-shadow: 2px 4px 6px rgba(255, 140, 0, 0.359);
  transform: scale(1.1) translateY(-2px);
  font-weight: 520;      
}
ul li a.contact:active { 
  color: #f08f6c;
  text-shadow: 2px 4px 6px rgba(217, 119, 0, 0.359);
  transform: scale(0.9) rotate(-1deg);
}

/* Link Behavior - UMass Boston Class Links (In Transcript) */
a.school:hover {
  color: #547ed9;
  text-shadow: 2px 4px 6px rgba(0, 85, 255, 0.359);
  transform: scale(1.1) translateY(-1px);
  font-weight: 520;      
}
ul li a.school:active {
  color: rgb(196, 24, 24);
  text-shadow: 2px 4px 6px rgba(0, 10, 85, 0.359);
  transform: scale(0.9) rotate(0.2deg);
}






.horizontal-menu {
  list-style: none;       
  padding: 0;             
  margin: 0;              
  display: flex;          
  gap: 50px;              
  margin-left: 10px;
  flex-wrap: nowrap;      /* Stay in one row by default */
}

.horizontal-menu li {
  display: flex;
  align-items: center;
}

.horizontal-menu li a {
  text-decoration: none;
  color: #000;
  font-size: 20px;
}



@media (max-width: 600px) {
  .horizontal-menu {
    flex-wrap: wrap;   /* Allow wrapping onto multiple lines */
    gap: 0;            /* Remove large gaps between items */
    margin-left: 15px;    /* Remove extra left margin if desired */
  }

  .horizontal-menu li {
    width: 30%;        /* Each link takes half the container width */
    box-sizing: border-box;
    padding: 5px 0;    /* Space between rows */
  }
}