* { box-sizing: border-box; border: 0px solid var(--bdcoll); margin: 0%; padding: 0%; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } :root { color-scheme: normal; --primary_container_height: 100%; /* dark theme */ --bgcold: rgb(21, 27, 35); /* dark background */ --txcoll: rgb(240, 246, 252); /* white text */ --bdcoll: rgb(61, 68, 77); /* border colors */ --bgocold: rgb(33, 40, 48); /* dark background offset */ } html, body { height: 100%; } label { -webkit-text-size-adjust: none; } fieldset { padding: 0.25rem 2% 0.5rem; margin: 0.25rem; } body { background-color: var(--bgcold); color: var(--txcoll); /*font-family: Arial, sans-serif;*/ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; -webkit-text-size-adjust: none; } .f { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .c { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .cr { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .r { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; gap: 2vw; } .rr { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; gap: 2vw; } /* even centred */ .re {justify-content: space-between; align-items: center} .ac {align-items: center} /* need to tidy up navlinks - too much repetition */ /* button container div */ .bc { display: flex; justify-content: center; width: 100%; height: 75%; gap: 5vw; } /* box style - buttons, input boxes */ .bxclr { color: var(--txcoll); border: 1px solid var(--bdcoll); border-radius: 0.5rem; background-color: var(--bgocold); } .rnavtag { margin-left: 2px; margin-right: 5px; } .nav_link { display: flex; align-items: center; text-decoration: none; color: var(--txcoll); } .nav_link_emb_ul_b { text-decoration: underline; font-weight: bold; color: var(--txcoll); } .nav_svg { fill: var(--txcoll); } .nav_r { float: right; } .nav_ol li { display: inline-block; } #primary_container { height: var(--primary_container_height); justify-content: flex-start; align-items: center; border-bottom: 1px solid var(--bdcoll); } /* Banner */ #banner { height: 10%; width: 90%; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; } button { font-size: 16px; cursor: pointer; flex-shrink: 0; width: 25vw; } #navigation { height: 5%; width: 90%; flex-grow: 0; flex-shrink: 0; } #nav_spacer { height: 1%; } .underline { height: 0; width: 50%; border-bottom: 1px solid var(--bdcoll); }