*{ box-sizing: border-box; margin: 0px; } b{ color: #007AFF } a{ color: #41b6e8; } .topbar{ position: fixed; top: 0px; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.4); width: 100%; } body{ background-color: #f2f2f2; color: #222222; font-family: system-ui; height: 100%; } p{ font-size: 20px; padding-left: 20px; padding-right: 20px; } h1{ font-size: 45px; font-weight: 750; padding-top: 0px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; position: fixed; } h2{ font-size: 35px; font-weight: 300; padding-top: 0px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; } h3{ font-size: 25px; font-weight: 200; padding-top: 0px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; } @media (prefers-color-scheme: dark) { body { background-color: #1C1C1E; color: #f2f2f2; } .topbar{ box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.25); -webkit-box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.25); } #transaction { background-color: #222222; } p{ color: #e6e6e6; } } @media screen and (max-width: 600px) { *{ width: 100%; } }