@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&display=swap');



:root {

  /* Modular scale */

  --ratio: 1.5;

  --s-5: calc(var(--s-4) / var(--ratio));

  --s-4: calc(var(--s-3) / var(--ratio));

  --s-3: calc(var(--s-2) / var(--ratio));

  --s-2: calc(var(--s-1) / var(--ratio));

  --s-1: calc(var(--s0) / var(--ratio));

  --s0: 1rem;

  --s1: calc(var(--s0) * var(--ratio));

  --s2: calc(var(--s1) * var(--ratio));

  --s3: calc(var(--s2) * var(--ratio));

  --s4: calc(var(--s3) * var(--ratio));

  --s5: calc(var(--s4) * var(--ratio));



  /* Typesetting */

  --font-base: 'Caveat', sans-serif;

  --font-titles: 'Cabin Sketch', sans-serif;



  --font-size\:base: calc(1rem + 0.5vw);

  --font-size\:biggish: 1.5rem;

  --font-size\:big: 2.25rem;

  --font-size\:biggest: 3.375rem;



  --measure: 70ch;



  /* Color palette */

  --color-background: #fff;

  --color-background_shadow: #eee;

  --color-foreground: #000;

  --color-foreground_light: #666;

  --color-foreground_shadow: #66666666;

  --color-accent: #083b66;

  --color-accent_light: #083c6633;

  --color-accent_translucid: #c6e3fa;



  --color-info: #2aa52a;

  --color-warning: #a5a52a;

  --color-error: #a52a2a;

  --color-error-background: #a52a2a33;



  --color-highlight: #ffff0055;

}



*,

*::before,

*::after {

  font-family: var(--font-base);

  font-size: calc(1rem + 0.4vmin);

  font-weight: 400;

  max-width: var(--measure);

  orphans: 3;

  widows: 3;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html,

body,

div,

header,

nav,

main,

footer,

form {

  max-width: none;

}

html {

  font-size: var(--font-size\:base);

  line-height: var(--s1);

  background-color: var(--color-background);

  color: var(--color-foreground);

}



/* Text emphasis */

strong {

  font-weight: 600;

}

em {

  color: var(--color-foreground_light);

}

mark {

  background-color: var(--color-highlight);

}

abbr {

  font-variant: small-caps;

}

blockquote {

  width: 80%;

  margin-left: auto;

  margin-right: 0;

  padding-top: var(--s1);

  padding-bottom: var(--s2);

  padding-left: 2ch;

  padding-right: 2ch;

  color: var(--color-accent);

  text-align: right;

  color: var(--color-foreground_light);

  line-height: 1;

}

blockquote > footer {

  color: var(--color-foreground);

  margin-top: var(--s-1);

}

.example {

  width: 90%;

  margin-left: auto;

  margin-right: auto;

  box-sizing: content-box;

  color: var(--color-accent);

}



/* Headings */

h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--color-accent);

}

h1,

h2 {

  font-family: var(--font-titles);

  font-weight: 600;

  text-shadow: 4px 4px 8px var(--color-accent_light);

}

h3,

h4 {

  font-family: var(--font-titles);

  font-weight: 400;

  text-shadow: 3px 3px 6px var(--color-accent_light);

}

h5,

h6 {

  font-family: var(--font-base);

  text-shadow: 2px 2px 4px var(--color-accent_light);

  position: relative;

}

h5::after,

h6::after {

  content: ' ';

  width: 6ch;

  height: 2px;

  position: absolute;

  bottom: 0;

  left: 0;

  background-color: var(--color-accent);

  box-shadow: 2px 2px 4px var(--color-accent_light);

}

h1 {

  font-size: var(--font-size\:biggest);

  line-height: 1;

}

h2 {

  font-size: var(--font-size\:big);

  line-height: 1;

  padding-top: var(--s2);

}

h3 {

  font-size: var(--font-size\:big);

  line-height: 1;

}

h4 {

  font-size: var(--font-size\:biggish);

  line-height: 1;

}

h5 {

  font-size: var(--font-size\:base);

  font-variant: small-caps;

  line-height: 1;

}

h6 {

  font-size: var(--font-size\:base);

  line-height: 1;

}



/* Links */

a {

  text-decoration: none;

  display: inline-block;

  font-family: var(--font-family\:300);

}

main a {

  display: inline;

  text-decoration: underline;

  color: inherit;

  color: var(--color-accent);

}

main a:hover,

main a:active {

  background-color: var(--color-highlight);

}



/* Lists */

main ul,

main ol {

  margin-left: 4ch;

}

main ul li {

  list-style-type: '—';

}



main dt {

  font-family: var(--font-titles);

  text-shadow: 3px 3px 6px var(--color-accent_light);

  color: var(--color-accent);

}

main dt:after {

  content: ':';

  font-family: inherit;

}

main dd {

  margin-left: var(--s2);

}



/* Navigation menu */

nav ul {

  list-style: none;

}

nav ul a {

  padding-left: 2ch;

  padding-right: 1ch;

  color: var(--color-accent);

  background-color: transparent;

  width: 100%;

}

nav ul a:active,

nav ul a:hover {

  color: var(--color-background);

  background-color: var(--color-accent);

}

nav a:active > *,

nav a:hover > * {

  font: inherit;

  color: inherit;

  background-color: inherit;

}

.menu__title {

  padding-left: 1ch;

  color: var(--color-accent);

  font-size: var(--font-size\:biggish);

  line-height: 1;

  font-family: var(--font-titles);

  text-shadow: 3px 3px 6px var(--color-accent_light);

}



/* Tables */

thead tr:nth-of-type(2) {

  background-color: var(--color-accent);

  color: var(--color-background);

}

td {

  vertical-align: top;

  padding-left: var(--s-1);

  padding-right: var(--s-1);

}

tbody tr:nth-of-type(even) {

  background-color: var(--color-accent_light);

}

tbody tr:hover {

  background-color: var(--color-highlight);

}

button,

.button {

  display: inline-block;

  width: max-content;

  padding-left: var(--s0);

  padding-right: var(--s0);

  padding-top: var(--s-2);

  padding-bottom: var(--s-2);

  border: none;

}

button:hover,

.button:hover {

  box-shadow: 4px 4px 8px var(--color-accent_light);

}

button:active,

.button:active {

  transform: scale(0.95) translateY(2px);

}



/* Forms */

form {

  box-sizing: content-box;

  max-width: var(--measure);

  width: 90%;

  padding-left: var(--s1);

  padding-right: var(--s1);

  padding-bottom: var(--s1);

  border: 1px solid var(--color-accent_light);

}

form > div,

form > p {

  display: flex;

  flex-direction: column;

  width: 100%;

}



form > * + * {

  margin-top: 1rem;

}

label {

  color: var(--color-accent);

}

label[required] {

  color: var(--color-error);

}

input,

textarea {

  background-color: var(--color-accent_light);

  border: none;

  padding-left: var(--s-2);

  padding-right: var(--s-2);

}

.help,

.helptext {

  font-size: 0.8em;

  color: var(--color-foreground_light);

  width: 100%;

}

.message {

  background-color: var(--color-highlight);

  padding-top: var(--s1);

  padding-bottom: var(--s1);

  padding-left: var(--s0);

  padding-right: var(--s0);

  box-shadow: 3px 3px 12px var(--color-accent_light);

}



/* Semantic sections */

main > *,

footer > * {

  margin-left: auto;

  margin-right: auto;

}

footer.stack {

  padding-top: var(--s3);

  text-align: center;

  position: relative;

}

footer.stack::before {

  content: ' ';

  width: 12ch;

  height: 2px;

  position: absolute;

  top: var(--s2);

  left: calc(50% - 6ch);

  background-color: var(--color-foreground);

  box-shadow: 2px 2px 4px var(--color-accent_light);

}



/* Layout components */

.stack {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

}

.stack > * {

  margin-top: 0;

  margin-bottom: 0;

}

.stack > * + * {

  margin-top: var(--s1);

}

.stack:only-child {

  height: 100%;

}

.stack > :nth-child(3) {

  margin-bottom: auto;

} /*splits after 3rd child */



.stack-h > * {

  display: flex;

  flex-direction: row;

  justify-content: center;

  margin-left: 0;

  margin-right: 0;

}

.stack-h > * > * {

  margin-left: 0;

  margin-right: 0;

  list-style: none;

}

.stack-h > * > * + * {

  margin-left: var(--s-1);

}

.stack-h a {

  display: block;

  padding-left: var(--s-1);

  padding-right: var(--s-1);

}



.with-sidebar {

  overflow-x: hidden;

}

.with-sidebar > * {

  display: flex;

  flex-wrap: wrap;

  margin: calc(var(--s1) / 2 * -1);

}

.with-sidebar > * > * {

  margin: calc(var(--s1) / 2);

  flex-grow: 1;

}

.with-sidebar > * > :last-child {

  flex-basis: 0;

  flex-grow: 999;

  min-width: calc(40ch - var(--s1));

}

.with-sidebar > * > :last-child > * > *.admin {

  overflow-x: scroll;

}



.switcher > * {

  display: flex;

  flex-wrap: wrap;

  margin: calc((var(--s1) / 2) * -1);

}

.switcher > * > * {

  flex-grow: 1;

  flex-basis: calc((50% - (100% - var(--s1))) * 999);

  margin: calc(var(--s1) / 2);

}

.switcher > * > :nth-last-child(n + 3),

.switcher > * > :nth-last-child(n + 3) ~ * {

  flex-basis: 100%;

}



.box {

  padding: var(--s1);

}



.cluster > * {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

  align-items: center;

  margin: calc(var(--s-1) / 2 * -1);

}

.cluster-center > * {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-evenly;

  align-items: center;

  margin: calc(var(--s-1) / 2 * -1);

}

.cluster > * > *,

.cluster-center > * > * {

  margin: calc(var(--s-1) / 2);

}



.reel::-webkit-scrollbar {

  height: 1rem;

}

.reel::-webkit-scrollbar-track {

  background-color: var(--color-accent);

}

.reel::-webkit-scrollbar-thumb {

  background-color: var(--color-accent);

  background-image: linear-gradient(

    var(--color-accent) 0,

    var(--color-accent) 0.25rem,

    var(--color-accent_translucid) 0.25rem,

    var(--color-accent_translucid) 0.75rem,

    var(--color-accent) 0.75rem

  );

}

.reel > * {

  flex: 0 0 auto;

}

.reel > img {

  height: 100%;

  flex-basis: auto;

  width: auto;

}

.reel > * + * {

  margin-left: var(--s5);

}

.reel.overflowing {

  padding-bottom: var(--s5);

}



.cover {

  display: flex;

  flex-direction: column;

  min-height: 83vh;

  padding: var(--s1);

}

.cover > * {

  margin-top: var(--s1);

  margin-bottom: var(--s1);

}

.cover > :first-child {

  margin-top: 0;

}

.cover > :last-child {

  margin-bottom: 0;

  flex-basis: 1;

}

.cover > :nth-child(2) {

  flex-basis: 2;

  margin-top: auto;

  margin-bottom: auto;

}



/* Custom styles */

.brand {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-items: center;

  justify-content: start;

}

.brand__img {

  max-width: 100px;

  height: auto;

  object-fit: cover;

}

.brand > div {

  margin-left: 1ch;

}

.brand__name {

  padding-top: 0.5rem;

}

.brand__motto {

  font-size: 0.8rem;

  color: #999;

}



.metadata {

  font-size: 0.8em;

  color: var(--color-foreground_light);

}

.metadata::before {

  content: '[';

}

.metadata + .metadata::before {

  content: '; [';

}

.metadata::after {

  content: ']';

}



/* Utility classes */

.overflow-x {

  overflow-x: scroll;

}

.center {

  box-sizing: content-box;

  margin-left: auto;

  margin-right: auto;

}

.center-text {

  text-align: center;

}

.right {

  margin-left: auto;

  margin-right: 0;

}

.right-text {

  text-align: right;

}



.color__accent {

  color: var(--color-accent);

}

.bgcolor__accent {

  background-color: var(--color-accent);

  color: var(--color-background);

}

.color__ok,

.is_info {

  color: var(--color-info);

}

.color__ko,

.is_error {

  color: var(--color-error);

}

.bgcolor__ko {

  background-color: var(--color-error);

  color: var(--color-background);

}



/* Media queries */

@media print {

  :root {

    --font-size\:base: 12pt;

    line-height: 1.2;

  }



  *,

  *:before,

  *:after {

    page-break-inside: avoid;

  }



  .with-sidebar > * > :first-child {

    display: none;

  }

  .with-sidebar > * > :last-child {

    max-width: 70ch;

    margin-left: auto;

    margin-right: auto;

  }

}



.subject > * + h2 {

  margin-top: -1.5rem;

  text-align: center;

  margin-bottom: 3rem;

}



.subject > object {

  max-height: 3rem;

  color: var(--color-accent);

  margin-top: 3rem;

  margin-bottom: 0;

}



.resources {

  justify-content: flex-start;

  align-items: flex-start;

}



.resource {

  padding: 1rem;

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: flex-start;

  box-shadow: 0 0 5px var(--color-foreground_shadow);

}



.icon object {

  max-height: 1.5rem;

  max-width: 1.5rem;

  color: var(--color-accent);

  margin-right: 0.25rem;

}



.favicon {

  width: 4rem;

  padding-right: 0.5rem;

}



.favicon img {

  width: 100%;

  object-fit: contain;

}



.row {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

}



.row * + * {

  margin-right: 1ch;

}



ul.errorlist {

  color: var(--color-error);

}



.errorlist li {

  list-style: none;

  margin-left: -4ch;

  margin-bottom: 0;

  border-left: 4px solid var(--color-error);

}



.avatar {

  width: 4rem;

  height: 4rem;

  margin-right: 1ch;

}



.avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  border-radius: 50%;

}



.hidden {

  visibility: none;

  height: 0;

  width: 0;

}