:root{
  --bg:#0b1020;
  --surface:#0f162e;
  --card:#121b38;
  --text:#e9edf7;
  --muted:#a6b0c3;
  --brand:#7aa2ff;
  --ring:rgba(122,162,255,.25);
  --shadow:0 20px 60px rgba(2,6,23,.35), 0 1px 0 rgba(255,255,255,.03);
}

*{box-sizing:border-box}

body{
  font-family:Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(122,162,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(122,162,255,.10), transparent 60%),
    var(--bg);
  line-height:1.7;
  
}

header{
  text-align:center;
  padding:2rem 1rem 1.25rem;
  background:linear-gradient(180deg, rgba(16,27,58,.85), rgb(16, 27, 58));
  border-bottom:1px solid rgba(255,255,255,.06);
  position: sticky;
  top: 0;
  z-index: 1000;


}

#course-title{
  display:block;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--text);
  opacity:.95;
}

.nav{
  margin-top:1rem;
  display:flex;
  justify-content: space-evenly; 
  flex-wrap: wrap;
   
}


.nav a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: .5rem .8rem;
  border-bottom: 2px solid transparent; 
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.nav a:hover,
.nav a:focus-visible{
  color: var(--text);          
  border-bottom-color: var(--brand);
  transform: translateY(-1px);
}

.container{
  max-width:1100px;
  margin:2.25rem auto 2.5rem;
  padding:0 1.25rem;
}


h1{ 
  font-family: 'Satisfy', 'Inter', system-ui, sans-serif; 
  text-align:center;
  font-size:clamp(1.9rem, 3vw, 2.8rem);
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 2rem;
  color:#fff;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}

.grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:1.25rem;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem;
  box-shadow:0 20px 60px rgba(2,6,23,.35), 0 1px 0 rgba(255,255,255,.03);
  padding:1.25rem;
}

.card h2{

  margin:.25rem  1rem;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
}

.card p{
  margin:.25rem 0 0;
  color:var(--muted);
  font-weight:500;
  
}

.media{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin:.25rem  1rem;
}

.media p{
  flex:1;
  text-align:justify;
  margin: 1rem;
}


.avatar{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:block;
}

.side h2{margin-bottom:.75rem}
.links{
  list-style:none;
  display:grid;
  gap:.6rem;
  padding:0;
  margin:0;
}
a {color:white;
 
}

.links a{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  font-weight:600;
  padding:.6rem .75rem;
  border-radius:.7rem;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.links a::before{
  content:"↗";
  font-weight:800;
  color:var(--brand);
  margin-top:1px;
}

.links a:hover{
  transform:translateY(-1px);
  border-color:var(--ring);
  box-shadow:0 10px 30px rgba(122,162,255,.12), inset 0 1px 0 rgba(255,255,255,.1);
}


.divider{
  border:0;
  height:2px;
  margin:1rem 0 1.25rem;
  border-radius:999px;
  position:relative;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(122,162,255,.18) 20%,
    rgba(122,162,255,.55) 50%,
    rgba(122,162,255,.18) 80%,
    transparent
  );
  box-shadow:0 6px 18px rgba(122,162,255,.18);
}


.andes{
  margin:.25rem  1rem;
}

.andes img{
  width:100%;
  height:min(220px, 48vh);
  object-fit:cover;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 50px rgba(0,0,0,.45);
  display:block;
  margin-top:5rem;
}

.andes figcaption{
  text-align: center;
  margin:.25rem  1rem;
  font-size:1.5rem;
  color:var(--muted);
  font-family: 'Satisfy', 'Inter', system-ui, sans-serif; 
}

footer{
  max-width:1100px;
  margin:1.5rem auto 2rem;
  padding-top:1rem ;
  text-align:center;
  color:var(--text);
  font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:transparent;
}

footer p{margin:.25rem 0}

@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  
}


  @media (max-width: 640px){
  .media{ display: block; }
    .avatar{
    display: block;
    margin: 0 auto 1rem;     
    width: 140px; 
    height: 140px;
  }
  .media p{
    margin: 0;
    text-align: left;       
  }
}