@font-face { font-family: FONT1; src: url(batmfa__.ttf); } body { background-color: #EEF7FF; font-family: "Poetsen One"; margin: 0; padding: 0; color: #344955; } .header { text-align: center; margin-top: 20px; color: #2c3e50; } .table { width: 80%; margin: 20px auto; border-collapse: collapse; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .table th, .table td { padding: 12px 15px; text-align: left; } .table thead tr { background-color: #344955; color: #ffffff; } .table tbody tr { border-bottom: 1px solid #dddddd; } .table tbody tr:nth-of-type(even) { background-color: #f3f3f3; } .table tbody tr:last-of-type { border-bottom: 2px solid #344955; } form { width: 80%; margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .row { display: flex; justify-content: space-between; } .col { flex: 1; margin: 0 10px; } .col label { display: block; margin-bottom: 5px; color: #344955; } .col input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } .btn { display: block; width: 100%; padding: 10px; background-color: #344955; border: none; color: #fff; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .btn:hover { background-color: #344955; } h1 { text-align: center; margin-top: 20px; color: #4D869C; } h2 { color: #4D869C; } h3 { color: #4D869C; } p { line-height: 1.6; margin: 10px 0; } td { line-height: 1.6; color: #344955; } .weather-container { width: 50%; margin: 40px auto; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .weather-container p { font-size: 1.2em; margin: 10px 0; } .container { width: 80%; margin: auto; overflow: hidden; } .header { margin-top: 20px; } .team-member { background: #CDE8E5; margin: 20px 0; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } .team-member p { margin: 5px 0; } .team-member1{ background: linear-gradient(135deg, #CDE8E5 0%, #4D869C 100%); color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin-top: 20px; text-align: center; font-size: 1.2em; animation: fadeIn1 2s ease-in-out; } .team-member2{ background: linear-gradient(135deg, #CDE8E5 0%, #4D869C 100%); color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin-top: 20px; text-align: center; font-size: 1.2em; animation: fadeIn2 2s ease-in-out; } @keyframes fadeIn1 { from { opacity: 0; transform: translateX(220px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn2 { from { opacity: 0; transform: translateX(-220px); } to { opacity: 1; transform: translateY(0); } }