:root { --font-dark: #000; --font-regular: #5f5f5f; --font-medium: #767676; --font-light: #868686; --font-lighter: #868686; --gattlin-grey: #a9a9a9; --ultra-light-accent: #e4e4e4; --barely-there-accent: #f9f9f9; --accent-orange: #f27300; --accent-orange-light: #ffd7b1; --background-blue: rgb(240, 247, 250); --bluest-blue: #003858; --haq-blue: rgb(242, 248, 255); } html { height: 100vh; } body { height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } .main-container { display: flex; flex-direction: column; min-height: 700px; margin-top: 15px; padding-right: 0.5rem; padding-left: 0.5rem; } h1, h2, h3, p, div, button { color: var(--font-regular); font-family: "Roboto"; } p { margin-bottom: 0rem; } .app-divider { border-bottom: 1px solid #d2d2d2; } .tos-container { margin: 20px 10px; padding: 5px 20px; } .tos-para { margin: 10px 0px; } /*** Media Queries **/ @media only screen and (max-width: 430px) { .mobile-content-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 18px 2px 0px 2px; padding: 2px 2px; border-radius: 18px; } .lower-foo { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; background-color: var(--background-blue); border-radius: 15px; } .mobile-divider { height: 8px; width: 88%; margin: 2px 0px 16px 0px; padding: 6px 0px; border-bottom: 1px solid var(--accent-orange-light); } .mobile-info-heading { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 28px 6px 2px 6px; text-align: justify; font-size: 15px; line-height: 21px; } .mobile-info-heading-dashboard { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 2px 6px 2px 6px; text-align: justify; font-size: 15px; line-height: 21px; } .mobile-text-dashboard { margin-bottom: 6px; padding: 0px 6px; } }