styles.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /* styles.css */
  2. body {
  3. font-family: Arial, sans-serif;
  4. text-align: center;
  5. background-image: url('background.png'); /* Replace with your image path */
  6. background-size: cover; /* Ensures the image covers the entire background */
  7. background-position: contain; /* Centers the image both horizontally and vertically */
  8. background-repeat: no-repeat; /* Prevents the image from repeating */
  9. background-color: #000; /* Fallback color in case image doesn't cover the entire screen */
  10. margin: 0;
  11. padding: 0;
  12. color: #fff; /* Adjust text color for contrast */
  13. }
  14. .content {
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. background: rgba(0, 0, 0, 0.5); /* Add transparency to make the text more readable */
  20. padding: 20px;
  21. border-radius: 10px;
  22. }
  23. h3 {
  24. color: #bada55; /* Adjusted color for better visibility */
  25. }
  26. h1 {
  27. font-size: 2.5em;
  28. }
  29. p {
  30. color: #ddd;
  31. }
  32. .buttons {
  33. margin-top: 20px;
  34. }
  35. .button {
  36. display: inline-block;
  37. padding: 10px 20px;
  38. margin: 5px;
  39. border-radius: 25px;
  40. text-decoration: none;
  41. font-size: 1em;
  42. color: white;
  43. transition: background-color 0.3s ease;
  44. }
  45. .button.blue {
  46. background-color: #4285f4;
  47. }
  48. .button.black {
  49. background-color: #333;
  50. }
  51. .button.green {
  52. background-color: #34a853;
  53. }
  54. .button.teal {
  55. background-color: #00bcd4;
  56. }
  57. .button.altstore {
  58. background-color: #13b0a9;
  59. }
  60. .button.red {
  61. background-color: #E4080A;
  62. }
  63. .button:hover {
  64. opacity: 0.8;
  65. }