@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=New+Amsterdam&display=swap");
* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
  background-image: url("logo.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
}
.container {
  width: 350px;
  display: flex;
  flex-direction: column;
  padding: 0 15px 0 15px;
  background-color: #7575754f;
  backdrop-filter: blur(8px);
  border-radius: 15px;
  box-shadow: 0px 0px 10px 2px #8d8d8db4;
}
.kon {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
}
span {
  color: #ffffff;
  font-size: medium;
  display: flex;
  justify-content: center;
  padding: 10px 0 15px 0;
  font-family: "Bubblegum Sans", cursive;
}
header {
  color: #ffffff;
  font-size: 30px;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  padding: 10px 0 15px 0;
  font-family: "Bubblegum Sans", cursive;
}
.input-field {
  position: relative; /* Menjadikan ikon bisa diatur posisinya */
  display: flex;
  flex-direction: column;
  margin: 15px;
}
.input-field .input {
  height: 45px;
  width: 100%; /* Lebar input sesuai dengan container */
  border: none;
  outline: none;
  border-radius: 30px;
  color: #fff;
  padding-left: 45px; /* Memberi ruang untuk ikon di sisi kiri */
  padding-right: 15px;
  background: rgba(121, 121, 122, 0.363);
  text-align: left; /* Ikon di kiri, teks dimulai setelah ikon */
}
.input-field i {
  position: absolute;
  left: 15px; /* Posisi ikon di kiri */
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 20px; /* Atur ukuran ikon sesuai kebutuhan */
}
::-webkit-input-placeholder {
  color: rgb(0, 0, 0);
}
.submit {
  border: none;
  border-radius: 30px;
  font-size: 15px;
  height: 45px;
  outline: none;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: 0.3s;
}
.submit:hover {
  box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}