/* * Set up root-level styles using CSS variables for easy customization and theme switching. * color-scheme: Allows the browser to apply user-preferred color schemes (light/dark mode). */ :root { color-scheme: light dark; /* Light background color #f0f6fc */ --bg-color-l: #f0f6fc; /* Dark background color #0d1117 */ --bg-color-d: #0d1117; /* Light text color #1f2328 */ --highligth-color-l: #1f2328; /* Dark text color #f0f6fc */ --highligth-color-d: #f0f6fc; /* Small font size */ --sm: 3rem; /* Large font size */ --lg: 6rem; } /* * Apply styles to the element when the viewport width is at least 300px. Sets the base font size to 62.5%. This allows for easier calculation of rem units. 1rem = 10px if the browser's default font size is 16px. * --bg-color-l: Should define the background color for light mode. * --bg-color-d: Should define the background color for dark mode. * Uses @media for responsive styling, targeting a minimum width of 300px. */ html { font-family: sans-serif; font-size: 62.5%; background-color: light-dark(var(--bg-color-l),var(--bg-color-d)); @media (min-width:300px) { } } /* Styles the GitHub Sponsors section to center text and use the large font size */ .gh-sponsors { text-align: center; font-size: var(--lg); } /* * Style elements with the class 'gcalendar'. * Sets font size to the value of the --sm variable (small). */ .gcalendar { font-size: var(--sm); } /* * Styling for navigation links ( elements) within the