body { font-family: Arial, sans-serif; background-color: #f8f9fa; color: #343a40; margin: 0; padding: 0; } .container { max-width: 800px; margin: 50px auto; padding: 20px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } h1, h2 { color: #007bff; } nav { margin-bottom: 20px; } nav a { margin-right: 15px; text-decoration: none; color: #007bff; } nav a:hover { text-decoration: underline; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } form { display: flex; flex-direction: column; } label { margin-top: 10px; margin-bottom: 5px; } input[type="text"], input[type="number"], textarea, select { padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 16px; } button { margin-top: 20px; padding: 10px 15px; background-color: #007bff; border: none; color: white; border-radius: 4px; font-size: 16px; cursor: pointer; } button:hover { background-color: #0056b3; } pre { background-color: #f8f9fa; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; } /* Styles for tabs */ .tab { overflow: hidden; border-bottom: 1px solid #ccc; } .tab button { background-color: lightblue; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #0509e7; } .tab button.active { background-color: #0509e7; } .tabcontent { display: none; padding: 20px 0; border-top: none; } .tabcontent.active { display: block; } table { width: 100%; border-collapse: collapse; margin: 20px 0; } table, th, td { border: 1px solid #ddd; } th, td { padding: 10px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; } a { color: #007BFF; text-decoration: none; } a:hover { text-decoration: underline; }