style.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. html,
  2. body {
  3. margin: 0;
  4. padding: 0;
  5. height: 100%;
  6. font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  7. overflow: scroll;
  8. display: flex; /* This makes the html and body containers flex containers */
  9. align-items: center; /* Vertically center content */
  10. justify-content: center; /* Horizontally center content */
  11. color: floralwhite;
  12. }
  13. #background {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. height: 100%;
  18. width: 100%;
  19. background-size: cover;
  20. background-position: center;
  21. z-index: 1;
  22. filter: blur(3px) brightness(0.8); /* Apply blur and dimming */
  23. opacity: 1;
  24. transition:
  25. opacity 1s ease-in-out,
  26. background-image 1s ease-in-out;
  27. }
  28. .container {
  29. position: relative;
  30. z-index: 2; /* Ensure container stays on top of background */
  31. background-color: rgba(0, 0, 0, 0.6);
  32. padding: 2em;
  33. border-radius: 10px;
  34. max-width: 800px;
  35. width: 90%;
  36. margin: auto;
  37. box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  38. display: flex;
  39. flex-direction: column;
  40. align-items: start;
  41. justify-content: start;
  42. min-height: 50vh;
  43. /* Optional: Use min-height for responsiveness or switch to a fixed height */
  44. }
  45. header {
  46. text-align: center;
  47. margin-bottom: 2em;
  48. }
  49. h1 {
  50. font-size: 3em;
  51. margin: 0.2em 0;
  52. }
  53. section {
  54. margin-bottom: 2em;
  55. }
  56. ul {
  57. list-style: none;
  58. padding-left: 0;
  59. }
  60. h2 {
  61. font-size: 1.5em;
  62. }
  63. li {
  64. font-size: 1.25em;
  65. }
  66. p {
  67. font-size: 1.25em;
  68. }
  69. .green {
  70. color: limegreen;
  71. }
  72. .gold {
  73. color: gold;
  74. }