body { display: flex; flex-flow: column; max-width: 980px; margin: 24px auto 0; background: linear-gradient(30deg, white, #b5b5b5d4), url(../img/background.png); background-size: contain; background-attachment: fixed; }

header { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; color: whitesmoke; background-color: rgba(100, 100, 100, 0.95); height: 56px; display: flex; align-items: center; padding: 8px 24px; }
header .header { display: flex; flex-flow: row; flex-grow: 1; align-items: center; }
header .header span { flex-grow: 1; }
header .header a { color: inherit; width: 18%; text-align: center; }
header .header a:hover { color: black; background-color: whitesmoke; }

footer { flex-grow: 1; display: flex; padding: 16px 0 0; align-items: flex-end; }
footer .footer { flex-grow: 1; }
footer .footer div { display: flex; text-align: center; }
footer .footer div span { flex-grow: 1; }
footer .footer div a { display: inline-flex; align-items: center; text-align: start; padding-right: 4px; }
footer .footer div a img { margin-left: 4px; margin-right: 4px; }
footer .footer a:hover { color: #0366d6; }

section { padding-top: 128px; margin: -80px 24px 24px; }
section h1 { margin-bottom: 24px; }

section#principal { z-index: 200; }
section#principal img { max-width: 128px; margin: auto; }

/* section#themes { z-index: 180;  h1 { text-align: center; overflow: hidden; }
 h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 10%; }
 h1:before { right: 24px; margin-left: -10%; }
 h1:after { left: 24px; margin-right: -10%; }  .themes { display: flex; align-items: flex-end; flex-wrap: wrap;  article { z-index: 10; flex: 20%; flex-grow: 0; min-width: 120px; margin: 24px auto 0; padding: 0 4px; align-self: baseline;
 .titre { text-align: center; margin-bottom: 16px; }
 img { opacity: 0.85; transition: all .25s ease; box-shadow: 3px 3px 12px grey; border-radius: 50%; padding: 4px; background-color: whitesmoke; object-fit: cover; height: 112px; width: 100%; }  img:hover { opacity: 1; transform: scale(1.3); } } article:hover { z-index: 20; } }
}*/
section#galerie { z-index: 180; }
section#galerie h1 { text-align: center; overflow: hidden; }
section#galerie h1:before, section#galerie h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 10%; }
section#galerie h1:before { right: 24px; margin-left: -10%; }
section#galerie h1:after { left: 24px; margin-right: -10%; }
section#galerie .content { display: flex; flex-flow: column; }
section#galerie #animated-thumbnails { column-count: 5; column-gap: 0; height: 320px; overflow: hidden; -webkit-transition: all 1s ease-in-out !important; -moz-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; }
section#galerie #animated-thumbnails a { display: flex; break-inside: avoid; }
section#galerie #animated-thumbnails a img { object-fit: cover; width: 100%; border: whitesmoke 0.5px solid; }
section#galerie #animated-thumbnails .very-small { height: 72px; }
section#galerie #animated-thumbnails .small { height: 88px; }
section#galerie #animated-thumbnails .medium { height: 120px; }
section#galerie #animated-thumbnails .large { height: 192px; }
section#galerie #animated-thumbnails .very-large { height: 288px; }
section#galerie #animated-thumbnails.full { height: 880px; }
section#galerie button.expand-button { width: fit-content; align-self: flex-end; margin-right: 16px; }

section#description { z-index: 160; }
section#description h1 { text-align: center; }
section#description .content { border-left: 1px solid grey; padding-left: 12px; }

section#contact { z-index: 140; }
section#contact .content form { display: flex; align-items: center; }
section#contact .content form .contact-img { flex-grow: 1; }
section#contact .content form .contact-img img { width: 75%; max-width: 80px; opacity: 0.6; margin: auto; }
section#contact .content form .contact-form { flex-grow: 4; margin: auto; max-width: 580px; }
section#contact .content form .contact-form fieldset { border: transparent; }
section#contact .content form .contact-form fieldset input, section#contact .content form .contact-form fieldset select, section#contact .content form .contact-form fieldset textarea, section#contact .content form .contact-form fieldset button { width: 100%; padding: 8px; box-shadow: 3px 3px 12px grey; }

section#aPropos { z-index: 120; }
section#aPropos .content { text-align: justify; }
section#aPropos .signature { text-align: end; margin-top: 2em; }

@media only screen and (max-device-width: 560px) { body { background: linear-gradient(30deg, white, #00000024), url(../img/background.png); background: -webkit-linear-gradient(30deg, white, #00000024), url(../img/background.png); background-size: contain; background-attachment: fixed; }
  header { height: 48px; padding: 4px 4px; }
  header .header a { width: unset; min-width: unset; flex-grow: 1; }
  section { padding-top: 96px; margin: -56px 12px 12px; }
  section#galerie #animated-thumbnails { column-count: 3; }
  section#galerie #animated-thumbnails.full { height: 1440px; }
  /*section#themes { .themes { article { img { height: 96px; } } } }*/ }
/* Helpers */
.text-align-end { text-align: end; }

body { font-family: Source Sans Pro, system-ui; }
body a, body a:hover { text-decoration: none; color: inherit; }
body header { font-family: 'Oswald', sans-serif; text-transform: uppercase; }
body header a { text-shadow: 0px 0px 2px black; }
body header a:hover { text-shadow: unset; }
body footer { font-size: 80%; }
body section h1 { text-shadow: 0px 0px 12px white; font-weight: normal; font-family: 'Oswald', sans-serif; font-size: 2rem; text-transform: uppercase; }
body section article .titre { font-style: italic; line-height: 1.2; }
body section fieldset { font-style: italic; }
body section fieldset button { font-style: normal; }

@media only screen and (min-device-width: 720px) { body { font-size: 120%; }
  body section h1 { font-size: 2rem; } }
@media only screen and (max-device-width: 560px) { body header { font-size: small; }
  body footer { font-size: 75%; }
  body section h1 { font-size: 1.6rem; } }