/* 1. Define Variables */
:root {
  --brand-orange: #FF9300;
  --brand-hover: #E68500;
  --text-dark: #404040;
  --border-light: #DDDDDD;
}

/* 2. Fix Grid Layouts */
body .portfolio-grid, 
body .index-grid { 
  display: flex !important; 
  flex-direction: column !important; 
  gap: 20px !important; 
  margin: 25px 0 !important;
  width: 100% !important;
}

/* Create the Desktop Grid */
@media (min-width: 768px) {
  body .index-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
  }
}

/* 3. Style the Cards */
body .project-card, 
body .skill-card { 
  background: #FFFFFF !important;
  padding: 18px 22px !important; 
  border: 1px solid var(--border-light) !important; 
  border-left: 6px solid var(--brand-orange) !important; 
  border-radius: 4px !important; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
  transition: all 0.2s ease-in-out !important;
  display: block !important;
  margin-bottom: 15px !important;
}

body .project-card:hover, 
body .skill-card:hover { 
  box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
  border-color: var(--brand-orange) !important;
}

/* 4. Typography inside Cards */
body .project-title { 
  margin: 0 0 10px 0 !important; 
  color: var(--text-dark) !important; 
  font-size: 1.25em !important; 
  font-weight: 800 !important;
  border-bottom: none !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

body .project-desc { 
  color: var(--text-dark) !important; 
  font-size: 0.95em !important; 
  line-height: 1.6 !important;
  margin-bottom: 15px !important;
}

/* 5. Skill Tags */
body .tag-container { 
  display: flex !important; 
  flex-wrap: wrap !important; 
  gap: 8px !important; 
  margin-bottom: 10px !important;
}

body .tag { 
  background: #FFF9F2 !important; 
  color: var(--text-dark) !important; 
  padding: 3px 10px !important; 
  border: 1px solid #FFE0B3 !important;
  border-radius: 3px !important; 
  font-size: 0.7em !important; 
  font-weight: 700 !important; 
  text-transform: uppercase !important;
  display: inline-block !important;
}

/* 6. Brand Buttons */
body .btn-link { 
  display: inline-block !important; 
  background: var(--brand-orange) !important; 
  color: #FFFFFF !important; 
  padding: 10px 22px !important; 
  border-radius: 4px !important; 
  font-size: 0.85em !important; 
  font-weight: bold !important; 
  text-decoration: none !important; 
  border: none !important;
  box-shadow: none !important;
}

body .btn-link:hover { 
  background: var(--brand-hover) !important;
  color: #FFFFFF !important;
}

/* 7. Section Dividers */
body .section-divider { 
  border: 0 !important;
  border-top: 2px solid var(--border-light) !important;
  margin: 40px 0 !important;
  display: block !important;
}

.profile-container {
  position: relative;
  float: right; /* Replaces align="right" */
  width: 150px;
  height: 150px;
  margin-left: 20px;
  cursor: pointer;
}

.profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark tint on hover */
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 14px;
}