body {
  background: url(background.jpg);
  background-size: cover;  
  background-attachment: fixed; 
  font-family: sans-serif;
  color:aliceblue
}

/* hello world */
.h2-hello{
  background: #004aad;
  margin: auto;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  display:flex;
  align-items: center;
  justify-content: center;
  max-width: 20%;
}

/* foto */
.div-img{
    margin-bottom: 15px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.img{
    border-radius: 15px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
}

/* nama dan kampus*/
.div-nama {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.h2-nama{
  background: #004aad;
  margin: 20px 0;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.h2-kampus{
  background: #004aad;
  margin: 20px 0;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* perkenalan */
.div-perkenalan{
    background: #004aad;
    margin: 20px 0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.h2-perkenalan{
    display:flex;
    align-items: center;
    justify-content: center;
}
/* hobi*/
.div-hobi{
    background: #004aad;
    margin: 20px 0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.h2-hobi{
    display:flex;
    align-items: center;
    justify-content: center;
}

/* kegiatan*/
.div-kegiatan{
    background: #004aad;
    margin: 20px 0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.h2-kegiatan{
    display:flex;
    align-items: center;
    justify-content: center;
}

.table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse; 
  font-size: 16px;
  color: white; 
}

th, td {
  border: 1px solid white; 
  padding: 12px;
  text-align: center;
}

th {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* youtube dan maps */
.h2-ytdmps {
  background: #004aad;
  margin: 20px 0;
  padding: 20px;
  border: 2px solid #004aad;   /* garis biru */
  border-radius: 12px;
  color: white;                /* biar teks tetap putih */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


.iframe-container {
  border-radius: 5px;
  display: flex;
  justify-content: center; 
  gap: 20px;               
  margin-top: 20px;
}

.iframe-box {
  display: flex;
  flex-direction: column;  
  align-items: center;
  margin-bottom: 10px;
}

/* garis perpisahan pens lamomgan dengan perkenalan */
.hr-header{
  max-width: 40%;
}

/* garis perpisahan */
.hr{
  border: none;
  border-top: 3px solid #000e38;
  margin: 20px;
}

/* audio */
.div-audio{
  background: #004aad;
  margin: 20px 0;
  padding: 20px;
  border: 2px solid #004aad;   /* garis biru */
  border-radius: 12px;
  color: white;                /* biar teks tetap putih */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.h2-audio{
  display:flex;
  align-items: center;
  justify-content: center;
}

.audio{
  display:flex;
  align-items: center;
  justify-content: center;
}

/* pendaftaraan */
.div-pendaftaraan {
  background: #004aad; /* biru tua sama kayak section lain */
  margin: 20px 0;
  padding: 20px;
  border-radius: 12px;
}

.h2-pendaftaraan {
  margin-bottom: 15px;
  color: white;
}

.input-nama, .input-email {
  width: 80%; /* biar panjangnya seragam */
  padding: 12px;
  margin: 10px 0;
  border: none;
  border-radius: 8px;
  outline: none;
  font-size: 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.input-nama:focus, .input-email:focus {
  border: 2px solid #ffffff; /* putih kalau aktif */
  background-color: rgba(255,255,255,0.1);
  color: white;
}

.kirim {
  background: white;
  color: #004aad;
  border: none;
  padding: 12px 20px;
  margin-top: 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: 0.08s;
}

.kirim:hover {
  background: #002b66; /* biru lebih gelap saat hover */
  color: white;
}

/* lokasi */
.footer {
  background: #004aad;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  border-radius: 12px;
}

.btn-lokasi {
  background: white;
  color: #004aad;
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: 0.08s;
}

.btn-lokasi:hover {
  background: #002b66;
  color: white;
}

.notif {
  position: fixed;
  top: -60px; /* sembunyi di atas */
  left: 50%;
  transform: translateX(-50%);
  background: #28a745;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: top 0.5s ease;
  z-index: 9999;
}