@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins&family=Rubik+Mono+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); :root { --primary-dark: #001945; --primary-light: wheat; --secondary-light: #FCF1DB; --secondary-dark: black; --frosted-glass: rgba(255, 255, 255, 0.5); --default-corner-radius: 25px; } body { padding: 15px; padding-top: 0; box-sizing: border-box; margin: 0; background: linear-gradient(180deg, #001945 35.94%, #000011 100%); background-attachment: fixed; background-color: black; font-family: 'Poppins', sans-serif; height: 100vh; width: 100vw; background-repeat: no-repeat; } body::-webkit-scrollbar { display: none; } .glass-pane { background-color: var(--frosted-glass); border-radius: 20px; } input { font-family: 'Poppins', sans-serif; font-size: 15px; } ::placeholder { color: var(--secondary-light); opacity: 1; /* Firefox */ } ::-ms-input-placeholder { /* Edge 12 -18 */ color: var(--secondary-light) } button { font-family: 'Poppins', sans-serif; border: none; cursor: pointer; font-size: 15px; } h2 { margin: 0; } p { margin: 0; } @media (max-width: 700px) { body { margin-bottom: 100px; height: auto; } .desktop-only { display: none !important; } .mobile-only { display: inherit; } } @media (min-width: 700px) { .desktop-only { display: inherit; } .mobile-only { display: none !important; } } h1 { font-family: 'Rubik Mono One', sans-serif; } ::-webkit-scrollbar { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--primary-light); border-radius: 10px; } /* CUSTOM RULES */ .single-page-view { /* Applied to - allows the use of flex: 1; below the header to fill the remaining space */ display: flex; flex-direction: column; gap: 15px; }