/* General Styles */
 body {
     font-family: 'Arial', sans-serif;
     margin: 0;
     padding: 0;
     transition: background-color 0.3s, color 0.3s;
 }

 .container {
     max-width: 60%;
     margin: 50px auto;
     padding: 20px;
     text-align: center;
     border-radius: 10px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     transition: background-color 0.3s, box-shadow 0.3s;
 }

 .btn01 {
     display: inline-block;
     padding: 12px 24px;
     margin: 10px;
     font-size: 1rem;
     font-weight: bold;
     text-align: center;
     text-decoration: none;
     color: white;
     background-color: #28a745;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s, transform 0.2s;
 }

 .btn01:hover {
     background-color: #218838;
     transform: translateY(-2px);
 }

 h1 {
     font-size: 2rem;
     margin-bottom: 20px;
 }

 input[type="text"] {
     width: 80%;
     padding: 10px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 1rem;
     transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 }

 button {
     padding: 10px 20px;
     background-color: #28a745;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1rem;
     transition: background-color 0.3s;
 }

 button:hover {
     background-color: #218838;
 }

 .message {
     margin-top: 20px;
     font-weight: bold;
     font-size: 1.2rem;
     transition: color 0.3s;
 }

 .theme-toggle {
     position: fixed;
     top: 20px;
     right: 20px;
     background-color: #28a745;
     color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     transition: background-color 0.3s;
 }

 .theme-toggle:hover {
     background-color: #218838;
 }

 /* Light Mode */
 body.light-mode {
     background-color: #f9f9f9;
     color: #333;
 }

 .light-mode .container {
     background-color: #fff;
 }

 .light-mode input[type="text"] {
     background-color: #fff;
     color: #333;
     border-color: #ccc;
 }

 .light-mode .message {
     color: #333;
 }

 /* Dark Mode */
 body.dark-mode {
     background-color: #121212;
     color: #e0e0e0;
 }

 .dark-mode .container {
     background-color: #1e1e1e;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }

 .dark-mode input[type="text"] {
     background-color: #2c2c2c;
     color: #e0e0e0;
     border-color: #444;
 }

 .dark-mode .message {
     color: #e0e0e0;
 }

 /* Responsive Design */
 @media (max-width: 50%) {
     .container {
         margin: 20px;
         padding: 15px;
     }

     h1 {
         font-size: 1.5rem;
     }

     input[type="text"] {
         width: 90%;
     }
 }