/* =========================================
   0) UNIVERSAL SELECTOR (Reset ringkas)
========================================= */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
   1) TYPE SELECTOR (body)
========================================= */
body{
  font-family: Arial, sans-serif;
  background-color: #f6f7fb;
  padding: 20px;
  color: #212529;
  line-height: 1.6;
}

/* =========================================
   2) ID SELECTOR (#container)
========================================= */
#container{
  width: 80%;
  margin: auto;
  background: #ffffff;
  border-radius: 8px;
  padding: 18px;
}

/* =========================================
   3) PANEL PETAK (Section Box)
   - visual grouping untuk student
========================================= */
.section{
  margin-bottom: 30px;
  padding: 16px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  background: #fcfcff;
}

/* =========================================
   4) CLASS SELECTOR (.highlight)
========================================= */
.highlight{
  color: #0d6efd;
  font-weight: bold;
}

/* =========================================
   5) CHILD SELECTOR (#header > h1)
========================================= */
#header > h1{
  color: #0d6efd;
  font-size: 28px;
  margin-bottom: 10px;
}

/* =========================================
   6) DESCENDANT SELECTOR (#header p a)
========================================= */
#header p a{
  text-decoration: none;
  color: #0d6efd;
  font-weight: bold;
}
#header p a:hover{
  text-decoration: underline;
}

/* =========================================
   7) ADJACENT SIBLING SELECTOR (h2 + p)
========================================= */
h2 + p{
  font-style: italic;
}

/* =========================================
   8) ATTRIBUTE SELECTOR (a[target="_blank"])
========================================= */
a[target="_blank"]{
  color: #198754;
}

/* =========================================
   9) COMBINED / NESTED SELECTORS
========================================= */
#education th{
  background: #0d6efd;
  color: #ffffff;
  padding: 10px;
}

#skills li{
  padding: 6px 0;
}

/* =========================================
   10) TABLE BASIC STYLING
========================================= */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

td{
  border: 1px solid #dee2e6;
  padding: 10px;
}

/* =========================================
   11) FOOTER
========================================= */
#footer{
  text-align: center;
  background: #f1f3f5;
  padding: 12px;
  border-radius: 8px;
}