/* ==========================================
   COLOR PALETTE & VARIABLES
   ========================================== */
:root {
  --bg-main: #F8F9FA;
  --text-dark: #222222;
  --text-light: #FFFFFF;
  
  /* Your Palette */
  --blue-primary: #336699;
  --blue-secondary: #537F99;
  --orange-autumn: #7c3e00;
  --yellow-ochre: #8f7614;
  
  /* Gradients derived from your colors */
  --hero-gradient: linear-gradient(135deg, #336699, #1F3E5C);
  --about-gradient: linear-gradient(135deg, #8f7614, #7c3e00);
}


body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px;
  background-color: var(--bg-main);
  color: var(--text-dark);
}

.hero {
  border-radius: 10px;
  border: 4px solid var(--blue-primary); 
  margin: 10px;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.20);
  
  display: flex;
  justify-content: space-between; 
  align-items: center;
  gap: 30px; 
  
  background-image: var(--hero-gradient); 
  color: var(--text-light); 
}

.hero img {
  max-width: 300px;
  max-height: 200px;
  object-fit: cover;
}

.hero h1 {
  font-size: 2.5rem;    
  padding: 10px;     
  margin: 0;                
  flex: 1;    
  text-align: left; 
  color: var(--yellow-ochre); /* Accent color for the main title */
}

.image-collage {
  position: relative;
  width: 600px;      
  height: 500px;
  margin-top: 20px;   
  margin-right: 20px;
}

.collage-img {
  position: absolute;
  width: 180px;       
  height: auto;
  border: 5px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
  border-radius: 8px;

  top: 10%;
  left: 60%;
  --random-angle: 0deg;
  transform: rotate(var(--random-angle));
  
  transition: transform 0.3s ease, z-index 0.2s ease;
}

.collage-img:hover {
  z-index: 99 !important;
  transform: rotate(var(--random-angle)) scale(1.05);
}

.about-me {
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.20);
  padding: 20px;
  margin: 10px;
  
  background-image: var(--about-gradient); 
  color: var(--text-light);
}

.tests {
  border-radius: 10px;
  border: 2px solid var(--blue-secondary);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.20);
  padding: 20px;
  margin: 10px;
  background-color: #FFFFFF;
}

.navbar {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
  background-color: var(--blue-primary);
  border-radius: 8px;
  margin: 10px;
}

.nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 5px;
  transition: background 0.2s ease;
}

.nav-link:hover {
  background-color: var(--orange-autumn);
}