/* Global styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Poppins', sans-serif; background-color: #f9f9f9; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } h1, h2, h3, h4 { font-weight: 600; margin: 20px 0; } ul { list-style: none; margin: 10px 0; } li { margin-bottom: 10px; } input[type="checkbox"] { margin-right: 10px; cursor: pointer; } /* Profile page styles */ .container { background-color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; } h1 { text-align: center; font-size: 48px; color: #4CAF50; margin-top: 40px; } h2 { font-size: 36px; color: #4CAF50; margin: 20px 0 10px; } h3 { font-size: 24px; color: #4CAF50; margin: 10px 0; } ul { padding-left: 20px; } input[type="checkbox"] { appearance: none; border-radius: 50%; width: 20px; height: 20px; border: 2px solid #4CAF50; vertical-align: middle; transition: border-color 0.3s ease-in-out; } input[type="checkbox"]:checked { background-color: #4CAF50; border-color: #4CAF50; } label { font-size: 18px; color: #4CAF50; cursor: pointer; display: flex; align-items: center; margin-bottom: 5px; } .awards { margin-top: 40px; width: 100%; background-color: #f9f9f9; padding: 40px; display: flex; flex-direction: column; align-items: center; } .award-category { font-size: 36px; color: #4CAF50; margin-bottom: 20px; } .award-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .award-item { background-color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); padding: 20px; display: flex; align-items: center; gap: 10px; } .award-name { font-size: 18px; color: #4CAF50; } .award-icon { color: #4CAF50; font-size: 24px; } @media screen and (max-width: 600px) { h1 { font-size: 36px; margin-top: 20px; } h2 { font-size: 28px; } h3 { font-size: 22px; } label { font-size: 16px; } .awards { padding: 20px; } .award-category { font-size: 28px; } .award-item { flex-direction: column; align-items: flex-start; text-align: left; } }