* {
box-sizing: border-box; /*mengatur semua elemen agra ukuran lebar/ tinggi mencangkup padding dan border*/
margin: 0; /*Menghilangkan margin default di semua elemen*/
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Membuat kolom sejajar satu ma lain */
.column {
float: left; /*elemen dengan class "column" akan melayang ke kiri, bisa berdampingan dengan kolom lain */
}

/* Menghapus efek float setelah baris kolom*/
.row:after {
content: ""; /*Menyisipkan konten kosong setelah elemn */
display: table; /*Menjadikan konten sebagai elemen table untuk kebutuhan clearfix*/
clear: both; /*Menghapus float agar kontainer(row) bisa memuat kolom dengan benar*/
}

.navbar{
width: 100%; /*Navbar(menu navigasi) memiliki lebar penuh*/
overflow: auto; /*Mengatasi masalah jika konten navbar terlalu besar, agar bisa di-scroll*/
}

.navbar a{
float: left; /* Link di dalam navbar akan berjajar ke kiri*/
padding: 12px;  /*Memberikan ruang dalma (padding) di semua sisi link*/
color: rgb(255, 251, 251); /* Warna teks link abu terang*/
text-decoration: none; /*Ukuran teks link 17 piksel*/
font-size: 15px; /*ukuran teks link 17px*/
}

.navbar a:hover, .dropdown:hover .dropbtn {
  color: lightblue;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: rgb(160, 160, 160);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}