style.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. body {
  2. font-family: Arial, sans-serif;
  3. background: #f4f6f9;
  4. margin: 0;
  5. padding: 30px;
  6. }
  7. .container {
  8. max-width: 900px;
  9. margin: auto;
  10. }
  11. h1 {
  12. text-align: center;
  13. margin-bottom: 30px;
  14. }
  15. .card {
  16. background: white;
  17. padding: 20px;
  18. border-radius: 10px;
  19. margin-bottom: 20px;
  20. box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  21. }
  22. textarea {
  23. width: 100%;
  24. height: 150px;
  25. padding: 10px;
  26. margin-top: 10px;
  27. margin-bottom: 10px;
  28. }
  29. button {
  30. padding: 10px 20px;
  31. font-size: 15px;
  32. cursor: pointer;
  33. }
  34. .section {
  35. margin-top: 20px;
  36. }
  37. .hidden {
  38. display: none;
  39. }
  40. ul {
  41. padding-left: 20px;
  42. }
  43. li {
  44. margin-bottom: 5px;
  45. }
  46. .score-container {
  47. margin-top: 20px;
  48. padding: 10px;
  49. background: #f8f9fa;
  50. border-radius: 8px;
  51. }
  52. .score-label {
  53. font-weight: bold;
  54. margin-bottom: 8px;
  55. }
  56. .score-bar-bg {
  57. width: 100%;
  58. height: 24px;
  59. background-color: #ddd;
  60. border-radius: 12px;
  61. overflow: hidden;
  62. }
  63. .score-bar {
  64. height: 100%;
  65. width: 0%;
  66. background-color: green;
  67. transition: width 0.8s ease;
  68. border-radius: 12px;
  69. }
  70. .score-text {
  71. margin-top: 8px;
  72. font-size: 15px;
  73. font-weight: bold;
  74. }