body {
  font-family: 'CooperHewittHeavy';
  margin: 0;
  background-color: white;
  color: black;
}
section div.contents,
.site-footer div.contents {
  max-width: 90em;
  margin: 0 auto;
  padding-left: 6em;
  padding-right: 2em;
}
section#welcome div.contents {
  padding-left: 2em;
  max-width: min(90em, 140vh);
}
section#welcome div.contents,
section.category div.contents {
  min-height: 100vh;
}
section#welcome div.contents {
  display: flex;
  flex-direction: column;
  max-height: 50
}
h1 {
  font-family: 'CooperHewittBook';
}
section#welcome h1 {
  font-size: clamp(2em, 8vw, min(5em, 9vh));
  margin: 0;
  font-weight: normal;
  white-space: nowrap;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex: 0.6;
  margin-bottom: -1em;
}
#M, #V /*, section.category h2::first-letter*/ {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
#M, #V {
  font-family: 'CooperHewittHeavy';
  font-size: 3.5em;
  background-size: cover;
}
#M {
  background-image: url(img/lettrines/maria.jpg);
  margin-right: -0.05em;
}
#V {
  position: relative;
  background-image: url(img/lettrines/vasilyeva.jpg);
  left: -0.22em;
  margin-right: -0.38em;
  margin-left: 0.15em;
}
section#welcome ul {
  padding: 0;
  margin: 0;
  margin-top: 3vh;
  list-style: none;
  display: flex;
}
section#welcome li {
  flex: 1 1 auto;
  color: #777;
  text-align: center;
}

section#welcome li:nth-child(2) a {
  margin: 0 auto;
}

section#welcome li:nth-child(3) a {
  margin-left: auto;
}

section#welcome li div.label {
  font-size: clamp(1em, 4vw, min(3em, 5vh));
  height: 1.5em;
  white-space: nowrap;
  font-family: 'CooperHewittBook';
}
section#welcome li a {
  --square-size: min(25.2em, min(30vw, 40vh));
  display: block;
  width: var(--square-size);
}
section#welcome li div.image {
  width: 100%;
  height: var(--square-size);
  border: solid #777 0.2em;
  box-sizing: border-box;
}
div.image, div.work {
  position: relative;
}
div.image img, div.work img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  object-position: top;
}
section#welcome img {
  object-fit: cover;
  height: 100%;
}
section#project img, #gallery img {
  object-fit: contain;
  height: 100%;
}
section.category img {
  object-fit: contain;
  object-position: left top;
}
a {
  color: inherit;
  text-decoration: none;
}
input.image-lighter {
  display: none;
}
a img.light {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
}
a:hover img.light, input.image-lighter:checked + div.image img.light {
  opacity: 1;
}
section#welcome footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  font-size: 1.5em;
  margin-top: min(4em, 7vh);
  font-family: 'CooperHewittBook';
}
section#welcome footer .contact {
  flex: auto;
  color: #444;
}
.phone {
  display: inline-block;
}
section#welcome footer .about {
  font-family: 'CooperHewittHeavy';
  flex: auto;
  color: #449;
  text-align: right;
}
section#welcome footer .about a {
  transition-property: color;
  transition-duration: 0.5s;
}
section#welcome footer .about a:hover {
  color: #88F;
}

section.category h2 {
  margin: 0;
  padding-top: 0.5em;
  color: #bbb;
  font-size: 4em;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}

section.category h2#illustrations {
  color: #666;
}

/*
section.category h2::first-letter {
  font-family: 'CooperHewittHeavy';
  text-transform: uppercase;
  font-size: 2em;
  background-position: bottom left;
  background-size: cover;
}
#section-illustrations h2::first-letter {
  background-image: url(img/lettrines/illustrations.jpg);
}

#section-web-design h2::first-letter {
  background-image: url(img/lettrines/web-design.jpg);
}

#section-motion-design h2::first-letter {
  background-image: url(img/lettrines/motion-design.jpg);
}
*/
section {
  position: relative;
}

section.category ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: min(1em,1vw);
  grid-auto-rows: min(2.5em, 2.5vw);
  padding: 0;
  margin: 0;
}

section.category li {
  position: relative;
}

section.category div.image {
  height: 100%;
}

#section-illustrations {
  /*background-color: #555;*/
}
#section-illustrations svg.diagonal {
  width: 100%;
}

svg.upper-background {
  position: absolute;
  width: 100%;
  z-index: -1;
}

body.index nav {
  opacity: 0;
}

nav {
  position: fixed;
  mix-blend-mode: difference;
  color: #888;
  transform: translateX(-100vh) rotate(270deg);
  transform-origin: top right;
  z-index: 1;
  font-size: clamp(1.5em, 4vh, 2em);
  padding-top: 1em;
  transition-property: opacity;
  transition-duration: 0.5s;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vh;
}

nav li {
  flex: 1 1 auto;
  text-align: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

nav #MV {
  flex: 0 0 auto;
  margin-right: 1em;
  color: white;
}

nav a {
  display: block;
  transition-property: color;
  transition-duration: 0.5s;
}

nav a:hover {
  color: #ddd;
}

#project #works, #supplementary-material .images {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: min(1em,1vw);
}

#works h1 {
  font-family: 'CooperHewittBook';
  font-size: 4em;
  color: #717578;
  margin-top: 0;
  margin-bottom: 0;
}

body.with_supplementary_material {
  background-color: #6b6c70;
  height: 100%;
}

section#project main {
  padding-top: 2em;
  background-color: white;
  padding-bottom: 4em;
}

#supplementary-material {
  position: relative;
}

#supplementary-material h2 {
  color: white;
  font-family: 'CooperHewittLight';
  font-size: 2em;
  margin: 0;
  padding-top: 2em;
}

#supplementary-material h2 strong {
  font-family: 'CooperHewittBold';
}

#works .description {
  position: relative;
}

#works .description-text {
  font-family: 'CooperHewittLight';
  font-size: 1.2em;
}

#works .description-text strong {
  font-family: 'CooperHewittBold';
  font-weight: normal;
}

#works .social {
  position: absolute;
  top: 2em;
  left: -2em;
  list-style: none;
  color: #717578;
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}

#works .social a:hover {
  color: #999;
}

#works img, #supplementary-material img {
  position: initial;
  display: block;
  height: initial;
}

#works #teletravail img,
#works #ankabyanka-site img,
#works #ankabyanka-logo img,
#works #catalog-2 img,
#works #catalog-3 img,
#works #catalog-4 img,
#works #catalog-5 img,
#works #catalog-6 img,
#works #catalog-7 img,
#works #catalog-8 img,
#works #catalog-9 img,
#works #catalog-10 img,
#works #catalog-11 img,
#gallery-catalog-2 img,
#gallery-catalog-3 img,
#gallery-catalog-4 img,
#gallery-catalog-5 img,
#gallery-catalog-6 img,
#gallery-catalog-7 img,
#gallery-catalog-8 img,
#gallery-catalog-9 img,
#gallery-catalog-10 img,
#gallery-catalog-11 img {
  filter:
  /* Each shadow becomes part of the image and the next filter
     adds a shadow beneath it, so we have to be very careful. */
    drop-shadow(0 -0.1em 0 gray)
    drop-shadow(0 0.1em 0 gray)
    drop-shadow(-0.1em 0 0 gray)
    drop-shadow(0.1em 0 0 gray);
}

#supplementary-material #mockup1 img,
#supplementary-material #mockup2 img,
#supplementary-material #mockup3 img {
  width: initial;
  height: clamp(12em, 21vw, 26em);
}

#works #les_bons_voisins {
  align-self: end;
}

section#project .contents .legend {
  font-family: 'CooperHewittBook';
  margin-top: 0.5em;
  flex: 0;
}

section#project .contents .work {
  display: flex;
  flex-direction: column;
  transition-property: opacity;
  transition-duration: 0.5s;
}

body.not-editing section#project .contents .work {
  cursor: pointer;
}

section#project .contents .image:hover, section#project .contents .auto-video:hover {
  opacity: 0.7;
}

.site-footer ul {
  display: flex;
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 2em;
  padding-bottom: 0.4em;
  margin: 0;
  font-size: clamp(1.5em, 3vw, 2em);
  font-family: 'CooperHewittHeavy';
}

body.index .site-footer {
  background: black;
  color: white;
}

.site-footer ul li {
  flex: 1 1 auto;
  text-align: center;
}

.site-footer ul li:first-child,
.site-footer ul li:last-child {
  flex: 0;
  white-space: nowrap;
}

body.with_supplementary_material .site-footer ul,
section#about .site-footer ul {
  color: white;
}

body.with_supplementary_material .site-footer ul a:hover,
section#about .site-footer ul a:hover,
body.index .site-footer ul a:hover {
  color: #ddd;
}

.site-footer div.contact-about {
  background-color: black;
  color: #727679;
  font-family: 'CooperHewittLight';
  padding-top: 1em;
  padding-bottom: 2em;
}

body.index .site-footer div.contact-about {
  background-color: #727679;
  color: black;
}

.site-footer div.contact-about div.contents {
  display: flex;
  flex-direction: row-reverse;
}

.site-footer div.contact-about div.contact {
  flex: 1 1 auto;
}

.site-footer div.contact-about div.about {
  font-family: 'CooperHewittHeavy';
}

.site-footer div.contact-about div.about a {
  transition-property: color;
  transition-duration: 0.5s;
}

.site-footer div.contact-about div.about a:hover {
  color: #444;
}

#gallery {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  overflow-x: scroll;
  overflow-y: clip;
  transition-property: opacity;
  transition-duration: 0.5s;
  display: none;
  opacity: 0;
}

#gallery ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

#gallery li {
  flex: 0 0 100vw;
  height: 100vh;
}

#gallery .image {
  height: 100%;
  background-color: white;
}

#gallery .image .legend {
  position: absolute;
  left: 1em;
  bottom: 1em;
  font-family: 'CooperHewittLight';
}

#scroll-previous,
#scroll-next,
#close {
  position: fixed;
  z-index: 4;
  font-family: 'CooperHewittLight';
  font-size: clamp(1em, 2vw, 2em);
  padding: 1em;
  cursor: pointer;
  user-select: none;
}

#scroll-previous:hover,
#scroll-next:hover,
#close:hover {
  color: #aaa;
}

#scroll-previous,
#scroll-next {
  line-height: 100vh;
  top: 0;
  bottom: 1em;
}

#scroll-previous {
  left: 0;
}

#scroll-next {
  right: 0;
}

#close {
  top: 0;
  right: 0;
}

section#project {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
}

video {
  width: 100%;
  height: 100%;
}

.image video {
  position: absolute;
  left: 0;
  top: 0;
}

.background {
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

section#about {
  font-family: 'CooperHewittLight';
}

section#about .banner-up-mobile,
section#about .banner-experience-mobile,
footer.site-footer-mobile {
  display: none;
}

section#about .banner-up,
section#about .banner-experience {
  display: block;
}

section#about .banner-up,
section#about .banner-up-mobile,
section#about .banner-experience {
  width: 100%;
}

section#about .presentation-contents {
  position: relative;
  display: flex;
  padding-left: 5%;
}

section#about .presentation-contents .body h2 {
  position: absolute;
  left: 3em;
  top: 0;
}

section#about .presentation-contents h2,
section#about .presentation-contents h3 {
  font-family: 'CooperHewittBook';
  color: #6b6c70;
  font-size: 1.8vw;
  margin: 0;
} 

section#about .presentation-contents h3 {
  padding-top: 1.3em;
}

section#about .presentation .body {
  flex: auto;
  display: flex;
  flex-direction: column;
  padding-left: 30em;
}

section#about .presentation-contents h1 {
  font-size: 1.4vw;
  margin-top: -1vw;
  margin-bottom: 0;
}

section#about .presentation-contents .text {
  flex: 1 1 auto;
  font-size: 1.1vw;
  margin-right: 4vw;
}

section#about .presentation-contents .text p {
  margin: 0;
}

section#about .presentation-contents .contact {
  font-size: 1.4vw;
  color: #9a92ff;
  flex: 1 1 auto;
}

section#about .presentation-contents .contact strong {
  font-family: 'CooperHewittBook';
}

section#about .presentation-contents .tools {
  flex: 0 0 22%;
}

section#about .presentation-contents .tools ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 0.8vw;
}

section#about .presentation-contents .tools ul li {
  display: flex;
  align-items: center;
  height: 3em;
}

section#about .presentation-contents .tools ul li img {
  width: 3em;
  height: 3em;
}

section#about .presentation-contents .tools ul li#vscode {
  position: absolute;
  flex-direction: column;
  justify-content: center;
  top: 1.5em;
  left: 13em;
}

section#about .presentation-contents .tools ul li.pen {
  padding-left: 3em;
  height: 10em;
}

section#about .presentation-contents .tools ul img.pen {
  height: 10em;
}

.about-contents {
  margin-left: 25%;
  margin-right: 25%;
}

section#about .experience {
  padding-bottom: 5em;
}

section#about .experience h2 {
  margin-top: -5vw;
}

section#about .experience h2,
section#about .formation h2 {
  font-size: 3.5vw;
  margin-left: -15vw;
  margin-bottom: 0;
}

#trotro {
  position: absolute;
  right: 8vw;
  width: 12vw;
}

section#about dl,
section#about p {
  margin: 0;
  font-size: 1vw;
}

section#about dt {
  font-family: 'CooperHewittHeavy';
}

section#about dd {
  margin-left: 0;
  margin-bottom: 1em;
}

section#about .formation {
  position: relative;
  color: white;
}

section#about .formation h2 {
  margin-top: 0;
  padding-top: 0.5em;
}

section#about .formation .text {
  margin-top: 4em;
  margin-bottom: 6em;
}

#edit-bar {
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 1.5em;
  color: white;
  background-color: black;
  border-bottom: solid 1pt white;
  z-index: 10;
  padding: 0.5em;
}

#edit-bar input {
  margin-left: 2em;
}

.editable[contentEditable="true"] {
  box-shadow: 0 0 1pt gray;
  min-height: 1em;
}

.resize-grip {
  position: absolute;
}

.resize-grip-rect {
  position: absolute;
  background-color: #eee;
}

body.editing .moveable {
  cursor: move;
}

body.editing .editable {
  cursor: text;
}

#works #teletravail {
  margin-right: 2em;
}

.project-sukha #description-block {
  margin-left: 2em;
}

@media (max-width : 50em) and (orientation : portrait) {
  section#welcome ul {
    flex-direction: column;
  }
  section#welcome h1 {
    justify-content: center;
  }

  section#welcome div.contents {
    padding-left: 0;
    padding-right: 0;
  }

  section.category div.contents {
    padding-left: 1em;
    padding-right: 1em;
  }

  section#welcome li a {
    width: 100%;
    position: relative;
  }

  section#welcome li div.label {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  section#welcome li div.image {
    border: solid #777 0.15em;
  }

  section#welcome li .dark {
    opacity: .3;
  }

  section#welcome li .light {
    display: none;
  }

  section#welcome footer, section#welcome footer .contact {
    flex: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  section#welcome footer .about {
    flex: auto;
    text-align: center;
  }

  section#welcome .contact a,
  section#welcome .contact .phone {
    display: block;
    text-align: center;
  }

  .contact .bullet {
    display: none;
  }

  nav {
    display: none;
  }

  svg.diagonal {
    position: absolute;
    top: 0;
    z-index: 2;
  }

  section.category ul {
    display: flex;
    flex-direction: column;
  }

  section.category h2 {
    font-size: clamp(2em, 9vw, 4em);
    text-align: center;
  }

  section.category img.dark {
    display: none;
  }

  section.category img.light {
    position: initial;
    opacity: initial;
  }

  .site-footer ul, .site-footer div.contact-about div.contents {
    flex-direction: column;
    text-align: center;
  }

  section div.contents,
  .site-footer div.contents {
    padding: 0;
  }

  #project #works, #supplementary-material .images {
    display: flex;
    flex-direction: column;
  }

  #project .description,
  #project #supplementary-material .contents,
  #project .legend {
    padding-left: 1em;
    padding-right: 1em;
  }

  #works .social {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row; 
  }

  section#about .banner-up,
  section#about .banner-experience,
  footer.site-footer {
    display: none;
  }

  section#about .banner-up-mobile,
  section#about .banner-experience-mobile,
  footer.site-footer-mobile {
    display: block;
  }

  section#about .presentation-contents {
    flex-direction: column;
    padding-left: 0;
    margin-top: -3vw;
  }

  section#about .presentation .body,
  section#about .presentation .tools {
    padding-left: 14.5vw;
    padding-right: 14.5vw;
  }

  section#about .presentation .body {
    text-align: center;
  }

  section#about .presentation .body h1 {
    font-size: 5vw;
  }

  section#about .presentation .body h2 {
    position: relative;
    left: 0;
    font-size: 4.6vw;
    margin-top: -4vw;
    margin-bottom: 2vw;
    font-family: 'CooperHewittBold';
  }

  section#about .presentation .body h2 div {
    display: inline;
  }

  section#about .presentation .body .text {
    margin-right: 0;
  }

  section#about .presentation .body .text p {
    text-align: left;
    font-size: 2.5vw;
  }

  section#about .presentation .body .contact {
    margin-top: 2vw;
    text-align: left;
    font-size: 3vw;
  }

  section#about .contact .bullet {
    display: inline;
  }

  section#about .presentation .tools h3 {
    font-size: 4.6vw;
    font-family: 'CooperHewittBold';
  }

  section#about .presentation .tools ul {
    font-size: 2.3vw;
    flex-direction: row;
    flex-wrap: wrap;
  }

  section#about .presentation .tools ul li {
    flex: 1 1 50%;
    height: 4em;
  }

  section#about .presentation .tools ul li img {
    width: 4em;
    height: 4em;
  }

  section#about .presentation .tools ul li span {
    margin-left: 0.5em;
  }

  section#about .presentation .tools ul li.pen {
    flex-direction: row-reverse;
    align-items: flex-end;
  }

  section#about .presentation .tools ul li.pen span {
    margin-left: -1em;
    margin-bottom: 2em;
  }

  section#about .presentation-contents .tools ul li#vscode {
    position: initial;
    flex-direction: row;
    top: initial;
    left: initial;
    justify-content: initial;
  }

  section#about .about-contents {
    margin-left: 15%;
    margin-right: 15%;
  }

  section#about .experience h2,
  section#about .formation h2 {
    margin-left: 0;
    font-size: 5vw;
    margin-bottom: 0.3em;
  }

  section#about .formation h2 {
    padding-top: 1em;
  }

  section#about dl,
  section#about .text p {
    font-size: 2.5vw;
  }

  section#about .formation .text {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  #trotro {
    right: 3vw;
  }

  section#about .experience {
    padding-bottom: 1em;
  }

  .site-footer-mobile {
    background-color: black;
    color: #727679;
    padding-top: 1em;
    padding-bottom: 2em;
  }

  .site-footer-mobile ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'CooperHewittBold';
  }

  .site-footer-mobile ul li {
    text-align: center;
    margin-left: 0.5em;
    margin-right: 0.5em;
  }

  .site-footer-mobile ul li a {
    transition-property: color;
    transition-duration: 0.5s;
  }

  .site-footer-mobile ul li a:hover {
    color: #999;
  }

  .site-footer-mobile .contact {
    font-size: 3.7vw;
    text-align: center;
  }
}