/* styles.css - Personal presence page for CS412 assignment */

:root{
  --bg:#0f1724; /* dark navy */
  --card:#0b1a2b; /* slightly lighter */
  --accent:#7bd389; /* mint accent */
  --muted:#a8c0d8; /* muted foreground */
  --heading:#e6f7ff; /* light heading color */
  --link:#ffd166; /* warm link color */
}

html,body{
  height:100%;
  margin:0;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #071022 100%);
  color:var(--muted);
}

header{
  text-align:center;
  padding:30px 10px 10px 10px;
}

h1{
  color:var(--heading);
  font-size:2.4rem;
  margin:0;
  letter-spacing:0.5px;
}

main{
  max-width:1100px;
  margin:30px auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:24px;
  box-shadow:0 6px 20px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}

.profile-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:18px;
}

.photo-cell{
  width:420px;
  padding:10px;
  vertical-align:top;
}

.profile-photo{
  width:400px;
  height:auto;
  border-radius:8px;
  display:block;
  box-shadow:0 4px 10px rgba(0,0,0,0.5);
}

.info-cell{
  padding:18px;
  vertical-align:top;
}

.profile-name{
  color:var(--accent);
  font-size:1.8rem;
  margin:0 0 6px 0;
}

.profile-details{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.5;
}

.bio, .activities{
  margin-top:18px;
}

.bio h2, .activities h2{
  color:var(--heading);
  font-size:1.4rem;
  margin-bottom:8px;
}

.bio p{
  font-size:1.05rem;
  color:var(--muted);
  line-height:1.6;
  margin-top:0;
}

.activities-table{
  width:100%;
  border-collapse:separate;
  border-spacing:12px 18px;
}

.activities-table img.activity-img{
  width:300px;
  height:auto;
  border-radius:6px;
  display:block;
}

.activities-table h3{
  margin:0 0 6px 0;
  color:var(--accent);
}

.activities-table p{
  margin:0;
  color:var(--muted);
  max-width:480px;
}

.activities-table a{
  color:var(--link);
  text-decoration:none;
  font-weight:600;
}

.activities-table a:hover{
  text-decoration:underline;
}

footer{
  text-align:center;
  padding:14px;
  color:rgba(255,255,255,0.5);
  font-size:0.95rem;
}

/* Responsive tweaks */
@media (max-width:900px){
  .photo-cell{display:block;width:100%;}
  .profile-photo{width:100%;max-width:400px;margin:0 auto;}
  .activities-table img.activity-img{width:100%;max-width:300px}
  .activities-table td{display:block}
  .activities-table tr{display:block;margin-bottom:18px}
}