:root
{
 font-size:1rem;
 line-height:1.25;
 font-family:arial, sans-serif;

 --font-size-bigger:1.5rem;
 --font-size-big:1.25rem;
 --font-size-regular:1rem;
 --font-size-small:0.85rem;
 --font-size-tiny:0.75rem;

 --message-color:var(--grey8);
 --message-border-color:var(--grey2);
 --message-background-color:var(--white);


 --font-size-header:1rem;
 --line-height-header:1.25;
 --font-size-title:1.25rem;
 --line-height-title:1.25;
 --font-size-sub-title:1rem;
 --line-height-sub-title:1.25;
 --font-size-text:0.9rem;
 --line-height-text:1.25;
 --font-size-small-text:0.75rem;
 --line-height-small-text:1;
 --UI-padding:4px 8px;
 --UI-header-padding:var(--UI-padding);
 --UI-footer-padding:var(--UI-padding);
 --UI-small-border-radius:4px;
 --UI-big-border-radius:8px;
 --box-shadow:0 1px 1px hsl(0 0% 0% / 0.075),
             0 2px 2px hsl(0 0% 0% / 0.075),
             0 4px 4px hsl(0 0% 0% / 0.075)
}

*,
*::before,
*::after
{
 box-sizing:border-box
}

html,
body
{
 margin:0;
 padding:0;
 height:100dvh
}

.hidden
{
 display:none !important
}

.warnings,
.errors,
.infos,
.success
{
 margin:1em;
 padding:0.5em;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text);
 border-width:1px;
 border-style:solid;
 border-left-width:var(--UI-small-border-radius);
 border-radius:var(--UI-small-border-radius);
 border-color:var(--message-border-color);
 background-color:var(--message-background-color);
 color:var(--message-color)
}

.errors
{
 --message-background-color:var(--error-background-color);
 --message-border-color:var(--error-border-color);
 --message-color:var(--error-color)
}

.infos
{
 --message-background-color:var(--info-background-color);
 --message-border-color:var(--info-border-color);
 --message-color:var(--info-color)
}

.success
{
 --message-background-color:var(--success-background-color);
 --message-border-color:var(--success-border-color);
 --message-color:var(--success-color)
}

.warnings
{
 --message-background-color:var(--warning-background-color);
 --message-border-color:var(--warning-border-color);
 --message-color:var(--warning-color)
}

:is(a, a:visited, a:link)
{
 color:var(--link);
 text-decoration:underline;
 cursor:pointer
}

:is(a:hover, a:visited:hover, a:link:hover)
{
 color:var(--link-hover);
 text-decoration:none
}

body
{
 display:flex;
 flex-direction:column;
 background:var(--body-background-color)
}

body > main,
body > header > nav
{
 /* TODO : is width:100% really useful ? */
 width:100%;
 max-width:1024px;
 margin:auto
}

body > header
{
 padding:var(--UI-header-padding);
 background-color:var(--header-background-color);
 background-image:var(--header-background-gradient);
 color:var(--header-background-text)
}

body > header > nav
{
 display:flex;
 flex-direction:row
}

body > header > nav > ul
{
 list-style-type:none;
 margin:0;
 padding:0;
 display:flex;
 flex-direction:row;
 align-items:center;
 flex-wrap:wrap;
 color:var(--header-color)
}

body > header > nav > ul > li
{
 margin:0 0.5em 0 0;
 padding:0;
 display:inline;
 white-space:nowrap
}

body > header > nav > ul > li:not(.noChevron)::before
{
 content:">";
 margin-right:0.2em
}

body > header > nav > ul > li > :is(a, a:visited, a:link)
{
 color:var(--header-link)
}

body > header > nav > ul > li > :is([aria-current=page], [aria-current=page]:visited, [aria-current=page]:link)
{
 text-decoration:none
}

body > header > nav > ul > li > :is(a:hover, a:visited:hover, a:link:hover, a[aria-current=page]:hover, a[aria-current=page]:visited:hover, a[aria-current=page]:link:hover)
{
 color:var(--header-link-hover)
}

body > main
{
 flex:1;
 overflow:auto;
 padding:0;
 background-color:var(--main-background-color);
 color:var(--main-color)
}

body > main > section
{
 margin:0.5em 0.25em;
 padding:0
}

body > main > section > header > h1
{
 margin:0;
 padding:0.5em;
 font-size:var(--font-size-title);
 line-height:var(--line-height-title);
 background-color:var(--section-header-background-color);
 color:var(--section-header-color);
 border-radius:var(--UI-big-border-radius);
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 align-items:center;
 box-shadow:var(--box-shadow)
}

body > main > section > header > h2
{
 margin:0.5em;
 padding:0;
 font-size:var(--font-size-sub-title);
 line-height:var(--line-height-sub-title);
 color:var(--header-sub-title-color)
}

body > main > section > header > h1 > :not(.badges)
{
 flex:1
}

body > main > section > header > h1 > .badges
{
 margin-left:auto;
 text-align:right
}

body > main > section > header > h1 > .badges > .badge
{
 margin:0 0 0 0.5em
}

body > main > section > header > h1 > :is(a, a:visited, a:link)
{
 color:var(--section-header-link);
 white-space:nowrap
}

body > main > section.cards > div > article
{
 margin:0 0 0.5em 0;
 padding:0.5em
}

body > main > section.cards > div > article > header > h2
{
 margin:0;
 padding:0;
 font-size:var(--font-size-sub-title);
 line-height:var(--line-height-sub-title);
 color:var(--card-header-color)
}

body > main > section.cards > div > article > header > h2 > :is(a, a:visited, a:link)
{
 color:var(--card-header-link)
}

body > main > section.cards > div > article > header > h3
{
 margin:0;
 padding:0.5em 0;
 text-align:right
}

body > main > section.cards > div > article > :is(p, ul > li)
{
 margin:0;
 padding:0;
 text-align:justify;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text)
}

body > main > section.cards > div > article > ul
{
 margin:0.5em;
 list-style-type:disc
}

body > footer
{
 padding:var(--UI-footer-padding);
 display:flex;
 flex-direction:row;
 align-items:center;
 background-color:var(--footer-background-color);
 color:var(--footer-color);
 border-top:1px solid var(--footer-border-color)
}

body > footer > div
{
 flex:1
}

body > footer > div:first-child
{
 text-align:left
}

body > footer > div:last-child
{
 text-align:right
}

body > footer > div:not(:first-child):not(:last-child)
{
 text-align:center
}

.switch-language > img
{
 margin:0 0.5em 0 0;
 width:25px;
 vertical-align:middle;
 cursor:pointer
}

.switch-language[aria-selected=false]
{
 opacity:0.25
}

.switch-language[aria-selected=false]:hover
{
 opacity:0.75
}

nav.documentationLinks
{
 margin:0.25em 0.5em;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text)
}

nav.documentationLinks.apple
{
 padding-left:1em
}

nav.documentationLinks.apple > :first-child
{
 margin-left:-1em
}

body > main > section.cards > div > article > ul.moviesLatest
{
 margin:0;
 padding:0
}

body > main > section.cards > div > article > ul.moviesLatest > li
{
 margin:0.5em;
 margin-left:1em;
 font-size:var(--font-size-small-text);
 line-height:var(--line-height-small-text)
}

body > main > section.cards.changelog > div > ul
{
 margin:0;
 padding:0;
 list-style-type:none
}

body > main > section.cards.changelog > div > ul > li
{
 margin:0;
 padding:0.5em 0 0 0.5em;
 font-size:var(--font-size-small-text);
 line-height:var(--line-height-small-text)
}

@media (min-width:40rem)
{
 body > main > section.cards:not(.changelog) > div
 {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  grid-gap:0.5em
 }

 body > main > section.cards.changelog > div > ul
 {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(calc(50% - 0.5em), 1fr));
  grid-gap:0.25em
 }

 body > main > section.cards > div > article
 {
  margin:0 0 1.5em 0
 }
}