152 lines
2.2 KiB
Text
152 lines
2.2 KiB
Text
@font-face {
|
|
font-family: 'Monocraft';
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(/monocraft.ttf);
|
|
}
|
|
|
|
:root {
|
|
--grey-100: #e2dcf2;
|
|
--grey-200: #cac3dc;
|
|
--grey-300: #b9b2ce;
|
|
--grey-400: #a79fbd;
|
|
--grey-500: #8c84a1;
|
|
--grey-600: #79718e;
|
|
--grey-700: #625a76;
|
|
--grey-800: #453f57;
|
|
--grey-900: #2e283d;
|
|
--grey-1000: #181425;
|
|
--violet-100: #ab8cff;
|
|
--violet-150: #9f7ff5;
|
|
--violet-200: #8d6ee3;
|
|
--violet-250: #7b5cd1;
|
|
--violet-300: #684aba;
|
|
--violet-350: #593da5;
|
|
--violet-400: #4e3494;
|
|
--violet-450: #452c88;
|
|
--violet-500: #3c257b;
|
|
--violet-550: #372170;
|
|
--violet-600: #301d64;
|
|
--violet-650: #271755;
|
|
--violet-700: #1f1345;
|
|
--violet-750: #170e34;
|
|
--violet-800: #120a28;
|
|
--violet-850: #0e0820;
|
|
--violet-900: #0b061a;
|
|
--violet-950: #090413;
|
|
--violet-1000: #07030d;
|
|
--black: #000;
|
|
}
|
|
|
|
:root {
|
|
font-size: 125%;
|
|
--fg-clr: var(--grey-500);
|
|
--heading-clr: var(--grey-100);
|
|
--bg-clr: var(--violet-900);
|
|
--link-clr: var(--violet-200);
|
|
--font-family: 'DM Sans', Helvetica, Arial, sans-serif;
|
|
--member-list-min-height: 20rem;
|
|
}
|
|
|
|
@media (min-width: 1900px) {
|
|
:root {
|
|
font-size: 137.5%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2200px) {
|
|
:root {
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2400px) {
|
|
:root {
|
|
font-size: 162.5%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2600px) {
|
|
:root {
|
|
font-size: 175%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 2800px) {
|
|
:root {
|
|
font-size: 187.5%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 3000px) {
|
|
:root {
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 3200px) {
|
|
:root {
|
|
font-size: 212.5%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 3400px) {
|
|
:root {
|
|
font-size: 225%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 3600px) {
|
|
:root {
|
|
font-size: 237.5%;
|
|
}
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
background-color: var(--bg-clr);
|
|
color: var(--fg-clr);
|
|
margin: 0;
|
|
min-width: 300px;
|
|
|
|
scrollbar-color: var(--violet-100) var(--violet-400);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
color: var(--heading-clr);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--link-clr);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|