body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
    }
    a {
  color: orange; 
  text-decoration: underline;
}
    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    h1, h2, h3 {
      text-align: center;
    }

    .output {
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      padding: 20px;
      margin-bottom: 20px;
      white-space: pre-wrap;
      /* Untuk mempertahankan format teks */
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="number"],
    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
    }

    .copy-button {
      background-color: #4CAF50;
      /* Green */
      border: none;
      color: white;
      padding: 10px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 10px 0;
      cursor: pointer;
    }
#customDecimalInput1, #customDecimalInput2, #customDecimalInput3 {
  display: none; 
}
    /* Tambahan CSS untuk radio button */
    .radio-group {
      margin-bottom: 15px;
    }

    .radio-group label {
      display: inline-block;
      margin-right: 10px;
    }

    /* CSS untuk tab */
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    .tab button:hover {
      background-color: #ddd;
    }

    .tab button.active {
      background-color: #ccc;
    }

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    /* Night mode styles */
body.night-mode {
  background-color: #121212; /* Dark background */
  color: #f5f5f5; /* Light text color */
}

.night-mode .container {
  background-color: #1e1e1e; /* Slightly lighter background for container */
  border: 1px solid #333; /* Darker border */
}

.night-mode .output {
  background-color: #282828; /* Darker background for output */
  border-color: #444; /* Darker border */
  color: #f5f5f5; /* Light text color */
}

.night-mode label {
  color: #f5f5f5; /* Light text color for labels */
}

.night-mode input[type="number"],
.night-mode input[type="text"] {
  background-color: #282828; /* Darker background for input fields */
  color: #f5f5f5; /* Light text color for input fields */
  border-color: #444; /* Darker border */
}

.night-mode input[type="submit"] {
  background-color: #006600; /* Darker green for submit button */
}

.night-mode .copy-button {
  background-color: #006600; /* Darker green for copy button */
}

.night-mode .tab {
  background-color: #282828; /* Darker background for tabs */
  border-color: #444; /* Darker border */
}

.night-mode .tab button {
  background-color: inherit; /* Inherit from parent */
  color: #f5f5f5; /* Light text color for tab buttons */
}

.night-mode .tab button.active {
  background-color: #333; /* Slightly lighter background for active tab */
}

.night-mode .tabcontent {
  background-color: #1e1e1e; /* Slightly lighter background for tab content */
  border-color: #444; /* Darker border */
}