* {
   box-sizing: border-box;
}
body {
   background-color: #082c6c;
   color: white;
   /* font-family: "Anton", sans-serif; */
}
.judul-container {
   text-align: center;
}
#header {
   color: rgb(192, 189, 189);
   text-shadow: 0.025em 0.025em 0 rgb(12, 12, 9),
      0.05em 0.05em 0 rgb(255, 255, 255), 0.075em 0.075em 0 rgb(255, 255, 255),
      0.1em 0.1em 0 rgb(255, 255, 255);
}
#container-header {
   padding: 5px;
   border-bottom: 1px outset white;
}
.input-form {
   display: flex;
   justify-content: center;
   margin: 5em 0;
}
.container-input {
   display: flex;
   flex-direction: column;
   width: 50%;
}
@media only screen and (max-width: 667px) {
   .container-input {
      width: 100%;
   }
}
.btn-input {
   display: flex;
}
#input-kegiatan {
   flex-grow: 1;
}
#btn-tambah {
   margin: 1em 0;
   padding: 10px 10px;
   border-radius: 4px;
   background-color: #1066b8;
   color: white;
   border: 1px solid rgba(0, 0, 0, 0.5);
}
input[type="text"] {
   margin: 1em 1em 1em 0;
   padding: 10px 10px;
   border-radius: 4px;
   font-size: 14px;
}
.container-table {
   width: 60%;
   margin: 0 auto;
}
@media only screen and (max-width: 667px) {
   .container-table {
      width: 100%;
   }
}
#todoList {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   border-collapse: collapse;
   text-align: center;
   width: 100%;
}
#todoList {
   border-collapse: collapse;
   margin: 25px 0;
   font-size: 0.9em;
   font-family: sans-serif;
   min-width: 400px;
   box-shadow: 0 0 20px rgba(1, 255, 99, 0.15);
}
#todoList th {
   background-color: #009879;
   color: #ffffff;
   text-align: left;
}
#todoList td {
   color: grey;
}
#todoList th,
#todoList td {
   padding: 12px 15px;
}
#todoList tbody tr {
   border-bottom: 1px solid #dddddd;
}
#todoList tr.active-row td:nth-child(2),
td:nth-child(3) {
   text-align: left;
}
#todoList tbody tr:nth-of-type(even) {
   background-color: #f3f3f3;
}

#todoList tbody tr:last-of-type {
   border-bottom: 2px solid #009879;
}
#todoList tbody tr.active-row {
   font-weight: bold;
   color: #0d2b25;
}
.btn {
   margin-left: 5px;
   margin-bottom: 5px;
   padding: 5px 10px;
   border-radius: 5px;
   border: 1px solid rgba(0, 0, 0, 0.4);
}
.btn.hapus {
   background-color: #c7003f;
   color: white;
}
.btn.edit {
   background-color: #16bd00;
   color: white;
}
#container-reset {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 3rem 0;
}
#container-reset #reset {
   border: 1px solid rgba(0, 0, 0, 0.6);
   border-radius: 5px;
   padding: 5px 15px;
   background-color: red;
   color: white;
}
#container-reset #reset:hover {
   transform: scale(1.2);
   transition: 150ms ease-in;
}
.dark-mode {
   margin: 0 auto;
   padding: 0.7em;
   background-color: white;
   width: fit-content;
   color: black;
   border-radius: 50%;
   position: fixed;
   bottom: 20px;
   right: 20px;
}
.dark-mode:hover {
   transform: rotate(45deg);
   transition: 500ms ease-in-out;
}