body { font-family: Arial, sans-serif; background-color: #f0f8ff; /* Light pastel blue */ color: #333; margin: 0; padding: 0; } table { width: 100%; max-width: 800px; margin: 20px auto; border-collapse: collapse; background-color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } td { border: 2px solid #ccc; padding: 15px; } /* Header styling */ .header { background-color: #ffe4e1; /* Light pink */ text-align: center; border-bottom: 4px solid #ffa07a; /* Coral color */ } .header h1 { margin: 0; padding: 10px 0; color: #ff4500; /* Orange-red */ } /* Navigation */ .nav { text-align: center; background-color: #ffefd5; /* Light peach */ padding: 10px 0; } .nav a { margin: 0 15px; text-decoration: none; color: #4682b4; /* Steel blue */ font-weight: bold; } .nav a:hover { text-decoration: underline; color: #ff4500; /* Orange-red on hover */ } /* Sidebar styling */ .sidebar { width: 200px; vertical-align: top; background-color: #fafad2; /* Light goldenrod yellow */ color: #333; } .sidebar ul { padding-left: 20px; } .sidebar a { text-decoration: none; color: #4682b4; /* Steel blue */ } .sidebar a:hover { text-decoration: underline; } /* Main content area */ .content { width: 600px; vertical-align: top; } .login { width: 200px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background-color: #eeeeee; /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ } .login form { display: flex; flex-direction: column; width: 100%; align-items: center; } .login label, .login input { margin: 5px 0; width: 100%; } .controls { display: flex; justify-content: space-between; text-align: center; width: 100%; } .controls a { color: #4682b4; /* Steel blue */ text-decoration: none; } input[type="submit"] { width: auto; padding: 5px 10px; } h2 { color: #ff6347; /* Tomato color */ } /* Footer styling */ .footer { text-align: center; background-color: #ffe4e1; /* Light pink */ border-top: 4px solid #ffa07a; /* Coral */ padding: 10px 0; } .footer p { margin: 0; } /* Contact Section Styling */ .contact { text-align: left; padding: 20px; background-color: #fafad2; /* Light goldenrod yellow */ border: 2px solid #ccc; margin-top: 20px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .contact h2 { color: #ff6347; /* Tomato color */ } .contact p { margin: 10px 0; } .contact a { color: #4682b4; /* Steel blue */ text-decoration: none; } .contact a:hover { text-decoration: underline; color: #ff4500; /* Orange-red on hover */ } /* More About Monotremes Section Styling */ .more-about-monotremes { padding: 20px; background-color: #fafad2; /* Light goldenrod yellow */ border: 2px solid #ccc; margin-top: 20px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .more-about-monotremes h2 { color: #ff6347; /* Tomato color */ } .more-about-monotremes h3 { color: #4682b4; /* Steel blue */ } .more-about-monotremes p { margin: 10px 0; } /* Blog entry styling */ .blog-entry { background-color: #f9f9f9; /* Light gray background */ border-left: 4px solid #ffa07a; /* Coral border */ padding: 15px; margin: 20px 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .blog-date { color: #999; font-style: italic; margin-bottom: 10px; } .blog-img { max-width: 100%; height: auto; margin-top: 20px; }