:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 
                 "Apple Color Emoji", "Segoe UI Emoji", 
                 "Segoe UI Symbol", "Noto Color Emoji";
    
    --font-serif: ui-serif, Georgia, Cambria, 
                  "Times New Roman", Times, serif;
    
    --font-mono: ui-monospace, SFMono-Regular, Menlo, 
                 Monaco, Consolas, "Liberation Mono", 
                 "Courier New", monospace;
}

/* Apply defaults to your site */
body {
    font-family: var(--font-sans);
}

/* Optional utility classes */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

.flex-r { display: flex; flex-direction: row; }
.flex-r > * { flex: 1 1; }

/* High density screen specific */
@media screen and (-webkit-min-device-pixel-ratio: 2) {

}

/* HD standard laptop to 4K to 8K */
@media screen and (min-width: 1900px) {

}

/* Current standard laptop */
@media screen and (min-width: 1200px) and (max-width: 1899px) {

}

/* 800px to tablet to old laptop */
@media screen and (min-width: 800px) and (max-width: 1199px) {

}

/* Small Mobile to 800px */
@media screen and (min-width: 240px) and (max-width: 799px) {

.flex-r { flex-direction: column; }
.flex-r > * { margin:0; padding:0; flex: 1 1; }

}