@charset "UTF-8"; /********************************************************************* * CSS file for job `apunts' *********************************************************************/ /* Variables for lengths of different magnitude */ @media only screen and (min-width: 0px) { /* Small screens or larger */ :root { --xsmall-length: 0.125em; --small-length: 0.25em; --medium-length: 0.50em; --large-length: 1.00em; --xlarge-length: 1.50em; --xxlarge-length: 2.00em;}} @media only screen and (min-width: 361px) { /* Medium screens or larger */ :root { --xsmall-length: 0.25em; --small-length: 0.50em; --medium-length: 1.00em; --large-length: 1.50em; --xlarge-length: 2.00em; --xxlarge-length: 3.00em;}} @media only screen and (min-width: 641px) { /* Large screens or larger */ :root { --xsmall-length: 0.50em; --small-length: 1.00em; --medium-length: 1.50em; --large-length: 2.00em; --xlarge-length: 3.00em; --xxlarge-length: 4.00em;}} /* Colors for hoverable elements */ :root { --hoverable-fgcolor: var(--color-A-dark); --hoverable-bgcolor: var(--color-A-light);} .duskmode { --hoverable-fgcolor: var(--color-A-black); --hoverable-bgcolor: var(--color-A-gray);} /* Set some CSS variables */ @media only screen and (min-width: 0px) { /* Small screens or larger */ :root { --font-size: 16px; --text-align: left; --body-width: 100%;}} @media only screen and (min-width: 641px) { /* Large screens or larger */ :root { --font-size: 2.5vw; --text-align: justify;}} @media only screen and (min-width: 1025px) { /* Xlarge screens or larger */ :root { --font-size: 26px; --body-width: 1024px;}} /* Some CSS reset */ * {outline: 0; padding: 0; margin: 0; border: 0;} /* Directive for roman medium upright font */ @font-face{ font-family: "MLModern Serif"; src: url("fonts/mlmr10.woff2") format("woff2"); font-weight: normal; font-style: normal; } /* Custom styling of scroll bars */ :root {--scrollbar-foreground: var(--hoverable-fgcolor); --scrollbar-background: var(--hoverable-bgcolor); --scrollbar-padding: 5px;} * { /* Works with Firefox */ scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);} *::-webkit-scrollbar-thumb { /* Foreground (Chrome, Edge, and Safari) */ background: var(--scrollbar-foreground);} *::-webkit-scrollbar-track { /* Background (Chrome, Edge, and Safari) */ background: var(--scrollbar-background);} *::-webkit-scrollbar { /* Width of bars (Chrome, Edge, and Safari) */ width: 10px; height: 10px;} /* Custom properties for ‘A’ color shades (day/dusk/night modes) */ :root { /* Day mode */ --color-A-white: white; --color-A-transparent: hsla(345,100%,100%,0.2); /* transparent white */ --color-A-light: hsl(345,100%,78.2%); /* light crimson */ --color-A-gray: hsl(345,100%,46.0%); /* gray crimson */ --color-A-dark: hsl(345,100%,27.5%); /* dark crimson */ --color-A-black: black;} .duskmode { /* Dusk mode */ --color-A-white: hsl(345,100%,46.0%); /* gray crimson */ --color-A-transparent: hsla(345,100%,46.0%,0.2); /* transparent crimson */ --color-A-light: hsl(345,100%,46.0%); /* gray crimson */ --color-A-gray: white; --color-A-dark: white; --color-A-black: black;} .nightmode { /* Night mode */ --color-A-white: black; --color-A-transparent: hsla(345,100%,0%,0.2); /* transparent black */ --color-A-light: hsl(345,100%,27.5%); /* dark crimson */ --color-A-gray: hsl(345,100%,46.0%); /* gray crimson */ --color-A-dark: hsl(345,100%,78.2%); /* light crimson */ --color-A-black: white;} /* and elements rules */ html {background-color: var(--color-B-gray);} body {width: var(--body-width); margin: 0 0 0 calc(100% - var(--body-width)); text-indent: 1em; word-spacing: 0.6em; text-align: var(--text-align); font-family: "MLModern Serif", "Latin Modern Roman", "Times New Roman", serif; font-weight: normal; font-style: normal; font-variant: normal; font-size: var(--font-size); text-decoration: none; background-color: var(--color-A-white);} /*

,