african-trading-challenge.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
  2. /* variable */
  3. :root {
  4. --alt-font: "Poppins", sans-serif;
  5. --primary-font: "Poppins", sans-serif;
  6. --base-color: #e32326;
  7. --dark-gray: #101a1d;
  8. --medium-gray: rgba(255, 255, 255, 0.5);
  9. --extra-medium-gray: #223035;
  10. --light-gray: #19272b;
  11. --very-light-gray: #181924;
  12. --red: #f62424;
  13. --green: #1fcb4f;
  14. }
  15. .poppins-regular {
  16. font-family: "Poppins", sans-serif;
  17. font-weight: 400;
  18. font-style: normal;
  19. }
  20. .poppins-semibold {
  21. font-family: "Poppins", sans-serif;
  22. font-weight: 600;
  23. font-style: normal;
  24. }
  25. /* reset */
  26. body {
  27. font-size: 17px;
  28. }
  29. /* header */
  30. .header-button .btn.btn-base-color:hover, .header-button .btn.btn-base-color {
  31. background-color: rgb(254 0 7 / 30%);
  32. border-color: var(--base-color);
  33. color: var(--white) !important;
  34. }
  35. .header-button .btn.btn-base-color:hover {
  36. color: var(--white) !important;
  37. }
  38. header.sticky.sticky-active .header-reverse.header-dark.glass-effect {
  39. background-color: rgba(13, 21, 23, .6) !important;
  40. }
  41. .navbar .navbar-nav .nav-link {
  42. font-size: 17px;
  43. }
  44. /* highlight separator */
  45. .highlight-separator[data-shadow-animation] span {
  46. bottom: -5px;
  47. z-index: -1;
  48. height: 100%;
  49. }
  50. /* button */
  51. .btn.btn-transparent-base-color:active, .btn.btn-transparent-base-color:hover {
  52. background-color: transparent;
  53. border-color: var(--base-color);
  54. color: var(--base-color);
  55. }
  56. .btn {
  57. font-weight: 700;
  58. border-width: 1px;
  59. letter-spacing: 0px;
  60. }
  61. /* transparent background color */
  62. .bg-medium-gray-transparent {
  63. box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  64. backdrop-filter: blur(15px);
  65. background: radial-gradient(100% 447.27% at 100% 0%, #17192066 0%, #10121759 100%);
  66. border-radius: 20px !important;
  67. border: 1px solid rgba(255, 255, 255, 0.12) !important;
  68. background-color: transparent !important;
  69. }
  70. .bg-gradient-dark-transparent {
  71. background-image: linear-gradient(to top, #203034 12%, #1B282C 100%);
  72. }
  73. .bg-gradient-gray-light-dark-transparent {
  74. background-image: linear-gradient(to right, #38464a 27%, transparent 150%);
  75. }
  76. .bg-gradient-black-bottom-transparent {
  77. background: linear-gradient(to top, #0D1517 100%, #0D1517 0%)
  78. }
  79. /* border color */
  80. .border-color-very-light-gray {
  81. border-color: rgba(56, 70, 74, 0.4) !important;
  82. }
  83. .border-color-green {
  84. border-color: #1fcb4f !important;
  85. }
  86. /* review style 04 */
  87. .review-star-icon i {
  88. color: var(--base-color);
  89. }
  90. /* feature box style */
  91. .feature-box.feature-box-left-icon-middle .feature-box-icon {
  92. margin-right: 18px;
  93. }
  94. /* footer */
  95. footer {
  96. font-size: 16px;
  97. line-height: 28px;
  98. padding-top: 90px;
  99. }
  100. footer .footer-logo img {
  101. max-height: 74px;
  102. }
  103. footer .input-small {
  104. font-size: 15px;
  105. }
  106. footer ul li {
  107. margin-bottom: 0px;
  108. }
  109. .scroll-progress.scroll-simple {
  110. left: 50px;
  111. right: auto;
  112. }
  113. /* newsletter style 02 */
  114. .newsletter-style-02 input {
  115. padding-right: 100px !important;
  116. }
  117. .theme-demos .theme-demos-main {
  118. background-color: var(--white);
  119. }
  120. @media (max-width: 1399px) {
  121. header .container-fluid {
  122. padding-left: 45px;
  123. padding-right: 45px;
  124. }
  125. }
  126. @media (max-width: 1199px) {
  127. .crypto-data-scroll {
  128. overflow-x: auto;
  129. overflow-y: hidden;
  130. }
  131. .crypto-data-min-width {
  132. min-width: 1160px;
  133. }
  134. }
  135. .boujee-text {
  136. --bg-size: 400%;
  137. --color-one: hsl(358.35deg 100% 50%);
  138. --color-two: hsl(34.82deg 98.19% 56.67%);
  139. font-family: sans-serif;
  140. background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
  141. color: transparent;
  142. background-clip: text;
  143. }
  144. @media (prefers-reduced-motion: no-preference) {
  145. .boujee-text {
  146. animation: move-bg 8s linear infinite;
  147. }
  148. @keyframes move-bg {
  149. to {
  150. background-position: var(--bg-size) 0;
  151. }
  152. }
  153. }
  154. .gratient-text {
  155. background: -webkit-linear-gradient(-90deg, #fe5924 5%, #ed1f25 53%, #ed1f25 91%);
  156. -webkit-background-clip: text;
  157. -webkit-text-stroke: 4px transparent;
  158. color: #000;
  159. }
  160. tbody, td, tfoot, th, thead, tr {
  161. padding: 10px !important;
  162. }