/*──────────────────
      logo
──────────────────*/
.logo {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 80px;
  height: 80px;
}

/* Contoh gaya untuk logo */
.logo img {
  width: 100%;
  height: 100%;
}

/*──────────────────
      navbar
──────────────────*/
.smooth {
  margin: 0 auto;
  padding: 0 4px;
  padding-left: 8px;
  height: 100%;
}

header {
  position: relative;
  padding: 2em 3em;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

header {
  height: 10vh;
  background-color: rgb(20, 20, 18); color: white;
}

header h3 {
  position: relative;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1,5rem;
  color: white;
  text-decoration: none;
}

header ul {
  list-style-type: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
}

header ul li {
  display: flex;
  align-items: center;
}

header ul li a {
  display: flex;
  align-items: center;
  gap: 5px; /* Menentukan jarak antara ikon dan teks */
  text-decoration: none;
  color: white;
}

header ul li a:hover {
  color: yellow;
}

header ul li:first-child {
  margin-right: 30px; /* Menambahkan margin kanan pada elemen li pertama */
}

.navbar .navbar-brand {
  color: white;
}

.navbar .navbar-brand:hover {
  color: white;
}



/*──────────────────
      card games
──────────────────*/

.work{
	display: flex; 
	flex: 1;
  flex-wrap: wrap;
  justify-content:center;
	align-items: center;
	padding: 20px;
}

.card{
	display: flex;
	flex-direction: column;
	margin: 20px;
	width: 200px;
	height:250px;
  cursor: pointer;
	border-radius:12px;
  background:var(--main-decor-color);
}

.card img{
	width: 100%;
	height:70%;
	border-radius:10px 10px 0px 0px;
}

.card .work-content{
	text-align: center;
	padding: 10px 5px;
	font-size: 1rem;
  background-color: rgb(20, 20, 18);
	color: white;
	font-family: var(--main-font-family);
  border-radius: 0px 0px 8px 8px;
}

.card a{
	text-decoration: none;
}

.card:hover{
	box-shadow: 0 0 1.5rem rgb(7, 124, 249);
}

/* Style untuk pop up */
.popup {
  border: 2px solid white;
  background-color: rgb(20, 20, 18);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  cursor: pointer;
  border-radius: 8px 8px 8px 8px;
}

.popup p {
  background-color: yellow;
  color: black; /* Warna teks akan menjadi hitam */
}

/* Style untuk tombol silang */
.popup .close {
  color: white;
  font-size: 65px; /* Nilai baru untuk ukuran font */
  position: absolute;
  top: -20px;
  right: 10px;
}

/* Style untuk gambar di dalam pop up */
.popup .content {
  width: 1180px;
  height: 380px;
  margin: auto;
  display: block;
}

/*──────────────────────
      tampilan mobile
───────────────────────*/
@media (max-width: 768px) {
  .navbar .navbar-brand {
    order: 2;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
  }

  .navbar .navbar-brand:hover {
  color: white;
  }

  .navbar .container-fluid {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
  
  .navbar form {
    order: 1;
    margin-right: 10px;
    color: white;
  }
  
  .work {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .card {
    width: calc(33.33% - 20px); /* Mengatur lebar card menjadi 33.33% dari lebar kontainer dengan jarak 20px antar card */
    margin: 10px; /* Mengatur jarak antar card menjadi 10px */
    height: auto; /* Mengatur tinggi card menjadi otomatis agar menyesuaikan dengan konten */
  }
  
  .card .work-content {
/*work content menjadi terlihat dan dapat di-scroll*/
    overflow: hidden;
/*untuk memotong teks yang melebihi lebar work content dan menampilkan tanda elipsis (...) untuk menunjukkan bahwa ada teks yang terpotong.*/
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .card:hover .work-content {
    overflow: auto;
    white-space: normal;
  }

  /* Style untuk gambar di dalam pop up */
  .popup .content {
    width: 350px;
    height: 150px;
    margin: auto;
    display: block;
  }

  .popup .close {
    top: -20px;
    font-size: 40px;
    }

}