* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased; 
  -moz-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  font-smooth: never;
  -moz-font-smooth: never;
}

@font-face {
  font-family: 'Narrow';
  src: url('../fonts/Axo-NarrowBold.woff') format('woff'),
      url('../fonts/Axo-NarrowBold.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Wide';
  src: url('../fonts/Axo-WideBold.woff') format('woff'),
      url('../fonts/Axo-WideBold.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
  }

html {
  min-height: 0vw;
  text-size-adjust: 100%;
}

@media screen and (min-width: 700px)  {
html {
  font-size: calc(4px + .9vw);
}
}
@media screen and (max-width: 699px)  {
html {
  font-size: calc(4px + .75vw);
}
}

:root {
  --leadings-image:url("../svg/leadings-regular.svg") 30% round;

  /* Hover */
  --text-fill-color: #FFF;
  --text-stroke-large: calc(.12 * var(--text-large)) #FFF;
  --text-stroke-medium: calc(.2 * var(--text-medium)) #FFF;
  --text-stroke-small: calc(.12 * var(--text-small)) #FFF;

  --text-blur-large: calc(.012 * var(--text-large));
  --text-blur-medium: calc(.022 * var(--text-medium));
  --text-blur-small: calc(.03 * var(--text-small));

  /* color */

  --black: #000;

}

@media screen and (min-width: 700px){
  :root {
    /* Typesettings */
    --text-small: 1.1rem;
    --line-height-small: 1.1;
    --letter-spacing-small: calc(-.02 * var(--text-small));
    --text-medium: calc(var(--text-small) * 45 / 22);
    --line-height-medium: 1;
    --letter-spacing-medium: calc(-.02 * var(--text-medium));
    --text-large: calc(var(--text-small) * 70 / 22);
    --line-height-large: 0.83;
    --letter-spacing-large: calc(-.04 * var(--text-large));
    --leadings-size: .25rem dotted; 
    

    /* gaps */
    --margin: 1rem;
  }
}

@media screen and (max-width: 699px)  {
  :root {
    /* Typesettings */
    --text-small: 2.2rem;
    --line-height-small: 1.2;
    --text-medium: calc(var(--text-small) * 30 / 20);
    --line-height-medium: 1;
    --letter-spacing-medium: -.1rem;
    --text-large: calc(var(--text-small) * 55 / 20);
    --line-height-large: 0.87;
    --letter-spacing-large: calc(-.04 * var(--text-large));
    --leadings-size : .45rem solid;

    /* gaps */
    --margin: 1.5rem;
  }
}

/* scroll bar */

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-width: thin;
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgb(63, 63, 63);
  --scrollbar-size: .4rem;
  --scrollbar-minlength: 1.5rem;
}
* {
  scrollbar-width: var(--scrollbar-width); 
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
}

*::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
}
*::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
*::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}
*::-webkit-scrollbar-corner { 
  background: rgba(0,0,0,0); 
  display: none;
  opacity: 0;
  visibility: hidden;
}



html {
  height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: "Narrow";
  font-size: var(--text-small);
  line-height: var(--line-height-small);
  background-color: var(--black);
  color: #FFF;
  min-height: 100%;
  --entrance-duration: 3500ms;
}

.background-image, 
.background-player {
  user-select: none;
  pointer-events: none;
  z-index: -10;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100dvw !important;
  height: 100dvh !important;
}
.background-image img, 
.background-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hidden {
  display: none !important;
}

a {
  color: #FFF;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

button {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  text-align: left;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
  width: 100%;
  display: block;
}

video {
  display: block;
  isolation: isolate;
}

p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}


.menu {
  font-family: "Wide";
  font-size: var(--text-medium);
  letter-spacing: var(--letter-spacing-medium);
  line-height: var(--line-height-medium);
  text-align: right;
  z-index: 100;
  position: fixed;
  right: var(--margin);
}

body[data-currentview="about"] .menu, body[data-currentview="default"] .menu {
  display: none;
}

.projects-menu {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  padding: var(--margin);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu-sort, 
.menu-filters-header 
{
  display: flex;
  flex-direction: row;
}

.menu-sort li {
  flex: none
}

.menu-filters {
  text-align: right;
  display: flex;
  flex-direction: column;
  position: relative;
}

.menu-filters-header {
  justify-content: end;
}

.menu-filters-inner {
  display: none;
  flex-direction: column;
  align-items: end;
  position: absolute;
  right: 0;
  bottom: 0;
  align-items: end;
  justify-content: end;
  width: max-content;
}

.menu-filters.active .menu-filters-inner  {
  display: flex;
}

.menu-filters .toggle-menu-filters::before {
  content:"+ ";
}

.menu-filters.active .toggle-menu-filters::before {
  content:"× ";
}

.filter.active::before {
  content: "x ";
}

.filter.active:hover {
  background-color: transparent;
  color: #FFF;
  box-shadow: 0 0 0 calc(.1 * var(--text-small)) #FFF;
}

.button {
  background-color: #FFF;
  color: var(--black);
  user-select: none;
  display: inline-block;
  width: fit-content;
  line-height: 1.55;
}

.button.active {
  background-color: var(--black);
  color: #FFF;
}

.logo-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: .3;
  z-index: -1;
}

.logo .st0{
  fill:#FFFFFF;
}

.menu {
  transform-origin: top left;
}

.load-animation-from-back {
  animation: loadAnimationFromBack var(--entrance-duration);
}

.load-animation-from-top {
  animation: loadAnimationFromTop calc(var(--entrance-duration) / 1.5);
}

@keyframes loadAnimationFromBack {
  0%, 20% {
    opacity: 0;
    scale: .8;
    filter: blur(.75rem);
  }
}

@keyframes loadAnimationFromTop {
  0%, 70% {
    scale: 1.2;
    filter: blur(.75rem);
    opacity: 0;
    rotate: 10deg;
  }
}

.logo-container {
  animation: entrance2 var(--entrance-duration) forwards;
  transition: 400ms;
}
@keyframes entrance2 {
  0%, 20% {
    scale: .92;
  }
}

body:not([data-currentview="projects"]) .logo-container
{
  transform: scale(.9);
}

.projets .section-projects li:hover {
  position: relative;
  z-index: 10;
}

.projects .section-projects {
  display: none;
}

.projects section.active .section-projects {
  display: block;
}

.projects .section-title {
  font-size: var(--text-large);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-large);
  position: relative;
}

.projects .row {
  position: relative;
  display: grid;
  align-items: end;
}

.projects .row:hover .cell,
.projects .row.locked .cell {
  opacity: .5;
}

.projects .cell {
  display: flex;
  flex-direction: row;
  min-width: 0;
  height: calc(var(--text-small) * var(--line-height-small));
}

.projects .cell#title {
  z-index: 1;
}

.projects .row a::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
}

.projects .cell .text {
  flex-grow: 0;
  overflow: hidden;
  text-overflow: "..";
  white-space: nowrap;
}

.projects .cell:not(#title):not(#year)::before,
.projects .cell:not(#year)::after 
{
  content: " ";
  display: block;
  flex-grow: 1;
  border-bottom: var(--leadings-size);
  border-image: var(--leadings-image);
}

.projects .row.sorted-by-fields .cell#clients::after, 
.projects .row.sorted-by-years .cell#field::after, 
.projects .row.sorted-by-clients .cell#field::after {
  border-bottom: none;
}

.projects video {
  width: 20rem;
  height: auto;
  position: absolute;
  z-index: 20;
  right: -21rem;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: center;
  user-select: none;
}

.projects video.enter {
  animation: videoEnter 400ms forwards ease-in-out;
  visibility: visible;
}

.projects video.exit {
  animation: videoExit 300ms forwards ease-in-out;
  visibility: visible;
}

@keyframes videoEnter {
  from {
    transform: translateY(-35%);
    opacity: 0;
    filter: blur(.25rem);
  }
  to {
    transform: translateY(-50%);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes videoExit {
  from {
    transform: translateY(-50%);
    opacity: 1;
    filter: blur(0);
  }
  to {
    transform: translateY(-50%);
    opacity: 0;
    filter: blur(.5rem);
  }
}


.projects .row .new-project {
  position: absolute;
  right: 0;
  transform: translateX(100%);
}

.new-project#section-title-new {
  position: relative;
  display: inline-block;
  margin-left: -1rem;
}

.morph-auto {
  padding: 0 calc(.4 * var(--text-large)) 0 calc(.4 * var(--text-large));
}

.view {
  width: 100%;
}


.view
{
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
}


.view#project
{
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--black);
}


.view#project .column-details {
  padding: var(--margin);
}

.view#project .column-media {
  display: flex;
  flex-direction: column;
}

.view#project .column-media::after {
  content: "";
  display: block;
  background: rgb(33,33,33);
  flex-grow: 1;
}

.project-open-details {
  display: block;
}

.view#project .project-open-details::before {
  content: "+ ";
}

.view#project .project-open-details::before {
  content: "x ";
}

.project-infos {
  display: none;
  margin-top: .8rem;
  --margin-block: calc(3 * var(--margin));
}

.view#project .project-infos {
  display: block;
}

.project-infos a {
  text-decoration: underline;
}

.project-skills {
  display: flex;
  flex-flow: row wrap;
}

.project-skills li {
  width: fit-content;
  display: inline-block;
  line-height: 1.55;
}

.project-data {
  margin: var(--margin) 0 var(--margin) 0;
  font-family: "Wide";
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-medium);
}

.project-list {
  margin: var(--margin) 0 var(--margin) 0;
}

.project-metadatas {
  margin: var(--margin-block) 0  var(--margin-block);
}

.project-list h2 {
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
  letter-spacing: var(--letter-spacing-medium);
}
.project-list .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.project-list a {
  text-decoration: none;
}

.project-list a .cell:first-child .text::after {
  content: " (↗) ";
}

.project-list .cell {
  display: flex;
  flex-direction: row;
  height: calc(var(--text-small) * var(--line-height-small));
}

.project-list .cell .text {
  flex-grow: 0;
  text-overflow: ".";
  overflow: hidden;
}

.project-list .cell:last-child::before,
.project-list .cell::after {
  content: " ";
  display: block;
  flex-grow: 1;
  border-bottom: var(--leadings-size);
  border-image: var(--leadings-image);
}

.project-list .cell:last-child::after {
  border-bottom: none;
}

.project-list .cell:last-child .text::before {
  content: "( ";
}
.project-list .cell:last-child .text::after {
  content: " )";
}


.view#project img {
  width: 100%;
  height: auto;
  display: block;
}

.player, 
.gif {
  width: 100%;
  height: auto;
  position: relative;
}

.player .video,
.gif .video
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player[data-fullscreen="true"] .video {
  object-fit: contain;
}


.player.main-player {
  width: 100dvw;
  height: 100dvh;
}

.view#project .player.main-player {
  height: auto;
  width: 100%;
}

.player .controls {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: var(--margin);
  display: flex;
  flex-direction: row;
  gap: var(--margin);
  align-items: center;
}

.player .controls li {
  display: flex;
}

.player .controls #play-pause {
  width: calc(2.5 * var(--text-small));
  text-align: center;
}

.player .controls #mute-unmute {
  width: calc(3.5 * var(--text-small));
  text-align: center;
}

.player .controls .progress-container {
  gap: calc(var(--margin) / 2);
}
.player .controls #progress {
  cursor: pointer;
  width: 15rem;
  border-bottom: var(--leadings-size);
  border-image: var(--leadings-image);
  position: relative;
  height: 1rem;
}

.player .controls #progress-current {
  --width: 0%;
  width: var(--width);
  text-align: right;
}

.player .controls #progress-current::after {
  content: '↓';
  font-family: "Wide";
  transform: translate(-50%, -.4rem);
  position: absolute;
}

.player figcaption {
  position: fixed;
  font-size: var(--text-large);
  font-family: "wide";
  letter-spacing: var(--letter-spacing-large);
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;  
  transform: translateY(-50%);
}


.project-header h1 {
  font-size: var(--text-large);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-large);
}

.project-header span {
  font-family: "Wide";
  letter-spacing: var(--letter-spacing-small);
}

.project-header span:not(:first-of-type){
  margin-left: var(--margin);
}

.project:not(.details) .column-details {
  padding: 0;
}

.close-button {
  font-family: "Wide";
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
  position: fixed;
  letter-spacing: var(--letter-spacing-medium);
  z-index: 10;
}

.view.enter {
  position: fixed;
  top: 0;
  left: 0;
}

.view#project.enter {
  animation: projectEnter 600ms;
}
.view#project.exit {
  animation: projectExit 600ms;
}
@keyframes projectEnter {
  from {
    scale: 1.2;
    filter: blur(.75rem);
    opacity: 0;
    rotate: 10deg;
  }
  to {
    scale: 1;
    filter: blur(0);
    opacity: 1;
    rotate: 0;
  }
}
@keyframes projectExit {
  to {
    scale: 1.2;
    filter: blur(.75rem);
    opacity: 0;
    rotate: 10deg;
  }
  from {
    scale: 1;
    filter: blur(0);
    opacity: 1;
    rotate: 0;
  }
}

.view#about.enter, .view#default.enter {
  animation: aboutEnter 600ms forwards;
}
.view#about.exit, .view#default.exit {
  animation: aboutExit 600ms forwards;
}

@keyframes aboutEnter {
  from {
    scale: 1.2;
    filter: blur(.75rem);
    opacity: 0;
    rotate: 10deg;
  }
}
@keyframes aboutExit {
  to {
    scale: 1.2;
    filter: blur(.75rem);
    opacity: 0;
    rotate: 10deg;
  }
}

.view#projects.enter {
  animation: projectsEnter 600ms forwards;
}
.view#projects.exit {
  animation: projectsExit 600ms forwards;
}
@keyframes projectsEnter {
  from {
    scale: .8;
    filter: blur(.75rem);
    opacity: 0;
  }
}
@keyframes projectsExit {
  to {
    scale: .8;
    filter: blur(.75rem);
    opacity: 0;
  }
}


.view#about {
  padding: var(--margin);
}

.view#about h2 {
  font-size: var(--text-large);
  line-height: var(--line-height-large);
  letter-spacing: var(--letter-spacing-large);
  margin-bottom: var(--margin);

}

.about-headline {
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
  text-align: center;
}

.about-infos {
  display: flex;
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
  margin-top: calc(2* var(--margin));
}

.about-infos h3 {
  font-family: "Wide";
  font-size: var(--text-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
}

.about-infos span:not(:last-of-type) a::after{
  content: ", "
}

.about-infos span {
  letter-spacing: var(--letter-spacing-medium);
}

.about-skills .columns {
  column-gap: var(--margin);
}

.about-skills .skill {
  break-after: always;
  break-inside: avoid;
}


.about-skills .skill p:first-of-type {
  margin-top: 0;
}
.about-skills .skill p:last-child {
  margin-bottom: calc(var(--text-small) * var(--line-height-small));
}

.about-address, 
.about-section {
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
}

.about-address h2 {
  margin-bottom: 0;
}

.about-footer {
  margin-top: calc(10 * var(--margin));
  display: flex;
}

.about-footer h3 {
  font-size: var(--text-small);
  line-height: var(--text-small);
}

.view#default {
  width: 100%;
  padding: 6rem var(--margin) var(--margin) var(--margin);
}

.default {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  width: 50rem;
  text-align: center;
  
}

.default h1 {
  font-size: var(--text-large);
  line-height: var(--line-height-large);
  letter-spacing: var(--line-height-large);
  margin-bottom: calc(5 * var(--margin));
}

.default h2 {
  font-size: var(--text-medium);
  line-height: var(--line-height-medium);
  letter-spacing: var(--line-height-medium);
}
.default h3 {
  font-family: "Wide";
  font-size: var(--text-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--line-height-small);
}

.default a:not(.close-button) {
  text-decoration: underline;
}



@media screen and (min-width: 700px)  {
  
  .menu {
    bottom: var(--margin);
  }

  .menu-sort, .menu-filters-header {
    gap: .5rem;
  }

  .menu-filters,
  .menu-filters-inner {
    gap: .45rem;
  }

  .menu-filters-inner {
    transform: translateY(calc(100% + .45rem));
  }

  .button {
    border-radius: .6rem;
    padding: .1rem .4rem .1rem .4rem;
  }

  .logo {
    width: 45%;
  }

  .projects {
    min-height: calc(100dvh - 7rem);
    width: calc(100% - 38rem); /* 55% */
    margin-left: var(--margin);
    padding-bottom: 10rem;
  }

  .projects li.line-break:not(:first-of-type) {
    margin-top: 1rem;
  }

  .projects .row {
    margin-left: 3rem;
  }

  .projects .row.sorted-by-fields {
    grid-template-columns: 0.5fr 2.5fr 3fr;
  }
  .projects .row.sorted-by-years {
    grid-template-columns: 2.5fr 2fr 1.5fr;
  }
  .projects .row.sorted-by-clients {
    grid-template-columns: 0.5fr 2.5fr 3fr;
  }

  .projects .cell::before,
  .projects .cell::after,
  .project-list .cell::before,
  .project-list .cell::after
  {
    height: 59%;
  }


  .projects ul {
    margin-bottom: 1rem;
  }

  .view#project {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .view#project .column-details {
    position: sticky;
    top: 0;
    height: fit-content;
    z-index: 1;
  }
  
  .view#project .column-details {
    height: 100dvh;
    overflow-y: scroll;
    z-index: 0;
  }

  .project-header {
    width: calc(50% - calc(3*var(--text-medium)));
  }

  .view#project .project-header {
    width: calc(100% - calc(3*var(--text-medium)));
  }


  .project-header h1 {
    margin-bottom: .15rem;
  }

  .project-open-details {
    margin-top: .4rem;
    position: absolute;
  }

  .project-skills {
      gap: .5rem;
  }
  .project-skills li {
    border-radius: .6rem;
    padding: .1rem .4rem .1rem .4rem;
    border: .1rem solid #FFF;
  }

  .project-list li {
    margin-left: 3rem;
  }
  
  .project-infos-expand {
    display: none;
  }

  .close-button {
    top: var(--margin);
    left: 50vw;
    transform: translateX(-50%);
  }

  .player .controls {
    width: 100%;
    justify-content: center;
  }

  .about-headline {
    margin-top: 3.5rem;
  }

  .view#about >*:nth-child(n+5){
    width: calc(100% - 14rem);
  }


  .about-infos {
    flex-direction: row;
    gap: var(--margin);
    text-align: center;
  }

  .about-infos > * {
    width: 33.333%;
  }

  .about-infos > *:nth-child(2){
    order: 2;
  }

  .about-skills .columns {
    columns: 3;
  }

  .about-skills .skill .button {
    margin-bottom: .2rem;
  }

  .about-footer {
    flex-direction: row;
    gap: var(--margin);
  }

  .about-footer > div {
    flex-grow: 1;
  }

  .about-address, 
  .about-section,
  .about-skills {
    margin-top: calc(6 * var(--margin));
  }


}

@media screen and (max-width: 699px)  {
  
  .menu {
    bottom: var(--margin);
  }

  .projects-menu {
    gap: 1rem;
  }
  
  .menu-sort,
  .menu-filters-header
  {
    gap: 1rem;
  }

  .menu-filters-header .filter {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 40rem);;
  }

  .menu-filters.active::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    backdrop-filter: blur(.3rem);
    background-color: var(--black)00052;
    z-index: -10;
  }

  .menu-filters,
  .menu-filters-inner
  {
    gap: .8rem
  }

  .menu-filters-inner {
     transform: translateY(calc(100% + .8rem));
  }


  .button {
    border-radius: 1.5rem;
    padding: .25rem 1rem .25rem 1rem;
  }

  .logo {
    width: 70%;
  }

  .projects {
    width: 100%;
    padding: 0 var(--margin) 15rem var(--margin);
  }

  .projects li.line-break {
    margin-top: 1.5rem;
  }

  .projects .row.sorted-by-fields {
    grid-template-columns: 1fr 3fr 3fr;
  }
  .projects .row.sorted-by-years {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .projects .row.sorted-by-clients {
    grid-template-columns:  1fr 3fr 3fr;
  }


.projects ul {
  margin-bottom: 3rem;
}

  .projects .cell::before,
  .projects .cell::after,
  .project-list .cell::before,
  .project-list .cell::after
  {
    height: 65%;
  }

  .projects video {
    display: none;
  }

  .new-project {
    display: none;
  }

  .view#project {
    display: flex;
    flex-direction: column;
  }

  .view#project .column-media {
    flex-grow: 1;
  }
  
  .project-header {
    width: calc(100vw - 6 * var(--text-medium));
  }

  .view#project .column-details{
    padding-bottom: calc(2 * var(--margin));
  }

  .project-header h1 {
    line-height: .75;
    margin-bottom: .6rem;
  }

  .project-open-details {
    margin-top: .6rem;
  }

  .project-skills {
      gap: 1rem;
  }

  .project-skills li {
    border-radius: 1.5rem;
    padding: .25rem 1rem .25rem 1rem;
    border: .2rem solid #FFF;
  }

  .project-list li {
    margin-left: 3rem;
  }
  
  .project-infos-expand {
    display: none;
  }

  .project-infos-expand:not(:nth-child(2)):not(:nth-child(3)) {
    position: relative;
    margin: 0 auto;
    display: block;
  }

  .project-infos .project-infos-expand::before {
    content: "+ ";
  }

  .project-infos.active .project-infos-expand::before {
    content: "x ";
  }

  .project-infos >*:nth-child(n+3):not(:last-child){
    display: none;
  }

  .project-infos.active > * {
    display: block !important;
  }

  .view#project .close-button {
    right: var(--margin);
    top: var(--margin);
    transform: translateX(0);
  }

  .close-button {
    top: var(--margin);
    right: 50%;
    transform: translateX(50%);
  }

  .player .controls {
    width: 50%;
    justify-content: start;
    left: 0;
  }

  .player .controls .progress-container {
    display: none;
  }

  .about-headline {
    margin-top: 5rem;
  }

  .about-infos {
    flex-direction: column;
    text-align: center;
    gap: calc(2* var(--margin));
  }

  .about-skills .columns {
    columns: 2;
  }

  .about-skills .skill .button {
    margin-bottom: .6rem;
  }

  .about-footer {
    flex-direction: column;
    gap: calc(2* var(--margin));
    text-align: center;
    margin-bottom: calc(2* var(--margin));
  }

  .about-address, 
  .about-section,
  .about-skills {
    margin-top: calc(3 * var(--margin));
  }


  .default {
    padding-top: 15rem;
  }

}

@media screen and (max-width: 429px) {

 
}

@media screen and (min-width: 430px) and (max-width: 699px) {
 
}


@media not (hover: none) {


.section-title.hovered + .new-project#section-title-new
{
  display: none;
}

.morph-auto {
  white-space: nowrap;
  mix-blend-mode: screen;
  font-family: "Wide";
  letter-spacing: calc(var(--letter-spacing-large) * 0.5) ;
  color: rgba(255,255,255,0);
  opacity: 1;
  transition: 500ms ease-in-out;
}

.morph-auto.hided {
  opacity: 0;
  transition: 0ms ease-in-out;
}

.morph-auto .morph-text::before {
  font-family: "Narrow";
  left: 50%;
  transform: translateX(-50%);
}
.morph-auto .morph-text::after {
  font-family: "Wide";
  letter-spacing: calc(var(--letter-spacing-large) * 0.5) ;
}

.morph-auto .morph-text {
  width: 100%;
  filter: brightness(1) contrast(100);
  background-color: var(--black);
  --blur: .4rem;
  position: absolute;
  left: 0;
  top: 0;
  color: #FFF;
  padding: calc(.4 * var(--text-large));
  top: calc(-.4 * var(--text-large));
  bottom: calc(-.4 * var(--text-large));
}
  
  .morph-auto .morph-text::before,
  .morph-auto .morph-text::after {
    content: attr(data-text);
    position: absolute;
    opacity: 0;
    --duration: 3.5s;
  }

  .morph-auto .morph-text::before {
    animation: morph-auto-narrow calc(var(--duration) + 500ms) ease-out infinite;
  }
  .morph-auto .morph-text::after {
    animation: morph-auto-wide calc(var(--duration) + 500ms) ease-out infinite;
  }

  @keyframes morph-auto-narrow {
    0%, 10%, 90%, 100% {
      filter: blur(0);
      opacity: 1;
    }
    40%, 60% {
      filter: blur(var(--blur));
      opacity: 0;
    }
  }
  @keyframes morph-auto-wide {
    40%, 60%  {
      filter: blur(0);
      opacity: 1;
    }
    0%, 10%, 90%, 100% {
      filter: blur(var(--blur));
      opacity: 0;
    }
  }
  
  .morph-on-hover {
    white-space: nowrap;
  }
  .morph-on-hover.hovered {
    z-index: 1;
  }

  .morph-on-hover.to-wide {
    font-family: "Narrow";
    letter-spacing: var(--letter-spacing-large);
  }
  .morph-on-hover.to-narrow {
    font-family: "Wide";
    letter-spacing: calc(var(--letter-spacing-medium) * 1.5);
    padding-left: calc(.4 * var(--text-large));
    padding-right: calc(.4 * var(--text-large));
  }
  .morph-on-hover.to-narrow {
    padding-left: calc(.4 * var(--text-large));
    padding-right: calc(.4 * var(--text-large));
  }
  .morph-on-hover.to-wide.hovered {
    font-family: "Wide";
    letter-spacing: calc(var(--letter-spacing-large) * 1.5);
    padding-right: var(--text-large);
  }

  .morph-on-hover.enter,
  .morph-on-hover.exit
  {
   color: rgba(255, 255, 255, 0);
   mix-blend-mode: screen;
  }

  .morph-on-hover.to-wide .morph-text::before {
    font-family: "Narrow";
    letter-spacing: var(--letter-spacing-large);
  }
  .morph-on-hover.to-wide.hovered .morph-text::after {
    font-family: "Wide";
    letter-spacing: calc(var(--letter-spacing-large) * 1.5) ;
  }
  .morph-on-hover.to-narrow .morph-text::after {
    font-family: "Narrow";
    letter-spacing: var(--letter-spacing-medium);
  }
  .morph-on-hover.to-narrow .morph-text::before {
    font-family: "Wide";
    letter-spacing: calc(var(--letter-spacing-medium) * 1.5) ;
  }

  .morph-on-hover.enter .morph-text,
  .morph-on-hover.exit .morph-text
  {
    width: 100%;
    filter: brightness(1) contrast(100);
    background-color: var(--black);
    --blur: .4rem;
  }
  .morph-on-hover .morph-text {
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    padding: calc(.4 * var(--text-large));
    top: calc(-.4 * var(--text-large));
    bottom: calc(-.4 * var(--text-large));
  }

  .section-title .morph-text {
    pointer-events: none;
  }

  .morph-on-hover.to-wide .morph-text {
    left: calc(-.4 * var(--text-large));
  }
  .morph-on-hover.to-narrow .morph-text {
    left: 0;
    right: 0;
  }
  .morph-on-hover.to-narrow .morph-text::before,
  .morph-on-hover.to-narrow .morph-text::after 
  {
    left: calc(.4 * var(--text-large));
    right: calc(.4 * var(--text-large));
    text-align: center;
  }
  
  .morph-text::before,
  .morph-text::after {
    content: attr(data-text);
    position: absolute;
    opacity: 0;
    --durationEnter: 800ms;
    --durationExit: 400ms;
  }

  .morph-on-hover.to-narrow.hovered .morph-text::after {
    opacity: 1;
    color: #FFF;
  }

  .morph-on-hover.to-narrow.hovered {
    color: rgba(255, 255, 255, 0);
  }

  .morph-on-hover.enter .morph-text::before {
    animation: morph-out var(--durationEnter) ease-out forwards;
  }
  .morph-on-hover.exit .morph-text::before {
    animation: morph-in var(--durationExit) ease-out;
  }
  .morph-on-hover.enter .morph-text::after {
    animation: morph-in var(--durationEnter) ease-out forwards;
  }
  .morph-on-hover.exit .morph-text::after {
    animation: morph-out var(--durationExit) ease-out;
  }

  @keyframes morph-out {
    from {
      filter: blur(0);
      opacity: 1;
    }
    100% {
      filter: blur(var(--blur));
      opacity: 0;
    }
  }
  @keyframes morph-in {
    to {
      filter: blur(0);
      opacity: 1;
    }
    from {
      filter: blur(var(--blur));
      opacity: 0;
    }
  }

  .projects .row.sorted-by-fields.unlocked:hover .cell#clients::after, 
  .projects .row.sorted-by-years.unlocked:hover .cell#field::after, 
  .projects .row.sorted-by-clients.unlocked:hover .cell#field::after {
    border-bottom: var(--leadings-size);
    border-image: var(--leadings-image);
  }

  .project-infos a:hover {
    text-decoration: underline;
  }


  .button {
    transition: transform .1s ease-in-out;
  }

  /* .button:hover {
    transform: scale(.9);
  } */

  .button:hover, .button.active {
    background-color: var(--black);
    color: #FFF;
  }
  
  .details .button:hover {
    box-shadow: 0 0 0 calc(.1 * var(--text-small)) #FFF;
  }

  .project-list a:hover {
    opacity: .5;
  }

  .default a:hover {
    opacity: .5;
  }


  .player .controls button:hover {
    opacity: .5;
  }
  
  .about-infos a:hover {
    text-decoration: underline;
  }
  
  .about-footer a:hover {
    text-decoration: underline;
  }

}