:root{
  --p:20px;
  --c1:#eee;
  --c2:#222;
  --c3:navy;
  --c4:#d3ff00;
  --clink:navy;
  --bw:10px;
  --font:25px/1.4em MetaAccanthis,arial, sans-serif;
  --small: 14px/1.2em "Flexi IBM VGA false", monospace;
  --asideW:20%;
  --playerH:40px;
  --headerH:120px;
  --textShadow:-1px -1px 1px #ffffffcc, 0px 1px 1px black, 0px 0px 10px black;
  --btnbg:color-mix(in hsl, color-mix(in hsl, var(--c3), black), transparent);
}

html{
  &.is-changing .transition-fade {
    transition: opacity 0.2s;
    opacity: 1;
  }
  &.is-animating .transition-fade {
    opacity: 0;
  }
}
body{
  font:var(--font);
  padding: var(--p);
  background: var(--c2);
  min-height: 100vh;
  color: var(--c1);
  letter-spacing: .08em;
  &:before{ /* blurry background, see header.php */
    content:'';
    left:0; top:0;
    width: 100%;
    min-height: 100%;
    display: block;
    position: fixed;
    filter: blur(30px);
    background-size: cover;
    z-index: -1;
  }
  main{
    padding-top:calc(var(--p) * 10);
    padding-bottom:calc(var(--p) * 5);
    margin-left:calc(var(--asideW) + var(--p));
  }
}
header{
  position: fixed;
  right: 0;
  height:var(--headerH);
  top:0;
  width:29%;
  z-index: 5;
  padding: var(--p);
  display:flex;
  justify-content:flex-end;
  font-size: 1.2rem;
  h1{display: none;}
  nav{
    width:100%;
    display: flex;
    justify-content: space-between;
    gap:var(--p);
    align-content: center;
    a{
      /* transition:all .2s ease; */
      height: 4em;
      width: 5em;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      box-shadow: -1px -1px 1px #fff4,1px 1px 1px #0008;
      &:hover{
      box-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
        img{
          opacity:1;
        }
      }
      &.active{
        box-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;
      }
      img{
        filter: drop-shadow(-1px -1px 1px #fff) drop-shadow(1px 1px 1px black);
        opacity: .7;
        height: 50%;
        object-fit: contain;
        width: 60%;
      }
    }
  }
}

.project-list{
  .home-image-ctn{
    filter: drop-shadow(0px 1px 1px black) drop-shadow(0px -2px 1px color-mix(in hsl, var(--c1) 50%, transparent));
    padding-top: 2vh;
    &:has(.home-image:active){
      margin-top:2px;
      filter: drop-shadow(0px -1px 1px black) drop-shadow(0px 2px 1px color-mix(in hsl, var(--c1) 50%, transparent));
    }
    .home-image{
      height:50vh;
      margin: 0 auto;
      width: auto;
      cursor: url("../img/play.png") 0 0, pointer;
      &.pause{
        cursor: url("../img/pause.png") 0 0, pointer;
      }
    }
  }
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  gap:var(--p);
  .project{
    .project-link{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    h1{
      padding:var(--p);
      text-shadow: var(--textShadow);
      letter-spacing: .03em;
      color:color-mix(in hsl, white 40%, var(--c3));
      transition: all .2s ease;
      &:hover{
        color:color-mix(in hsl, white 80%, var(--c3));
        text-shadow: none;
        position: relative;
        top: 0px;
        left: 0px;
      }
    }
    img{
      height:calc(2em);
      border-radius: 100%;
      padding-inline: var(--p);
    }
    &.selected{
      display: block;
    }
    .category-list{
      margin-top: calc(var(--p)/2);
      .keyword{
        color:var(--c1);
        font:var(--small);
        text-transform: uppercase;
        font-weight: 500;
        display: inline;
        padding:.3em .4em;
        border-radius: .4em;
        background: var(--btnbg);
        border:1px solid #ffffff66;
      }
    }
  }
}

.filter-list{
  --c3:#333;
  position: fixed;
  display: flex;
  height:calc(100vh - (var(--p) * 2) - var(--playerH));
  flex-direction: column;
  justify-content:stretch;
  align-content: stretch;
  left:var(--p);
  top:var(--p);
  width: var(--asideW);
  padding: var(--p);
  gap: var(--p);
  line-height:1.2em;
  z-index: 3;
  button, .button{
    display: flex;
    flex-direction: column;
    gap: var(--p);
    flex: auto;
    margin: 0;
    text-shadow: var(--textShadow);
    color:color-mix(in hsl, white 20%, var(--c3));
    img{
      height: 40%;
      filter: drop-shadow(-1px -1px 1px #fffc) drop-shadow(0px 1px 1px black);
      &.mobile{
        display: none;
      }
    }
  }
  h2{
    text-align: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    color:color-mix(in hsl, white 80%, var(--c3));
  }
}

/* Project pages */
.project-container{
  display: flex;
  gap:var(--p);
  align-items: flex-start;
  justify-content: center;
  .item-list{
    padding:calc(var(--p) * 2) var(--p) var(--p) var(--p);
    width:100%;
    position: sticky;
    top:var(--headerH);
    .thumbnail{
      margin-bottom: calc(var(--p)*2);
      max-width: 400px;
      margin-inline: auto;
    }
    .icon-list{
      gap:var(--p);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      img, span{
        width:100%;
        height:100%;
        object-fit:contain;
        transition:all .2s ease;
        &:hover{
          filter: drop-shadow(0 0 30px var(--c4));
        }
      }
    }
    .item{
      width:300px;
      aspect-ratio:1/1;
      line-height: 1.2em;
      position: relative;
      color:unset;
      letter-spacing: -.03em;
      font-size: .8em;
      margin-bottom: var(--p);
      &.file{
        width: 100px;
        height: auto;
        text-align: center;
        font-family:"iosevka";
        font-size:.6em;
        overflow-wrap: break-word;
        margin-inline: var(--p);
              span{
          border-top: 2px solid color-mix(in hsl, var(--c1) 50%, transparent);
          border-bottom: 2px solid black;
          border-radius: 0 8px 0 0;
          text-align:left;
          background:color-mix( in hsl,var(--c1) 70%, transparent);
          color:var(--c3);
          padding:5px;
          font-size: .7em;
          letter-spacing:normal;
          text-transform: uppercase;
          position: relative;
          width: 100%;
          height: 100%;
          display: block;
          margin-bottom: calc(var(--p) / 4);
        }
      }
    }
  }
}

/* Basic page and typography */

article{
  --c3:#eee;
  /* background-image:none; */
  padding:var(--p);
  color: var(--c2);
  width: 100%;
  button,.button{
    background:var(--c4);
    margin-bottom: 0;
    &:hover{box-shadow:0 0 50px var(--c4); background:var(--c4);}
  }
  h1, h2{
    text-shadow: 0 0 5px var(--c3),0 0 10px var(--c3), 0 0 10px var(--c3);
  }
  h1{
    font-size: 1.3em;
    line-height: 1.2em;
    margin: 0 0 calc(var(--p) * 3) 0;
    line-break: 3em;
    text-shadow: -1px -1px 1px #ffffffcc, 0px 1px 1px black, 0px 0px 5px white;
  }
  h2:not(:first-child){margin-top:var(--p);}
  .text{
    background:var(--c3);
    font-family:"iosevka";
    padding:var(--p);
    font-size: 18px;
    line-height: 1.4em;
    letter-spacing: normal;
    border-top:1px solid color-mix(in hsl, var(--c3) 40%, var(--c2));
    border-left:1px solid color-mix(in hsl, var(--c3) 70%, var(--c2));
    &.twocols{
      display: flex;
      gap:var(--p);
      justify-content: space-between;
      align-content: flex-start;
      img{width:min(50%,500px);border: 2vw solid #ddd;}
      .description{width:50%;}
}
    a{
      text-decoration: underline;
    }
    li{
      line-height:1.3em;
      position:relative;
      padding-left: calc(var(--p)*2);
      margin-bottom: calc(var(--p)/2);
    }
    li:before{
      content:"➜";
      position: absolute;
      top:0;
      left:0;
    }
    ol li {
      counter-increment: nb;
    }
    ol li:before {
      content: counter(nb) ". ";
    }
    ol {
      list-style: none;
      counter-reset: nb;
    }
    .email-box{
      padding-block: var(--p);
      text-align: center;
      background-image:radial-gradient(color-mix(in hsl,var(--c4), transparent), transparent 90%);
    }
  }
}

/* Home page */
footer{
  position: fixed;
  left:0;
  bottom:0;
  height:var(--playerH);
  width:100%;
  #player{
    height:var(--playerH);
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .track-title{
    font-size: .5em;
    text-transform: uppercase;
    bottom:calc(var(--playerH) * 1);
    right:0;
    /*! background:var(--c3); */
    padding:calc(var(--p) / 2) var(--p);
    border-radius:var(--p) 0 0 0;
    position: fixed;
    mix-blend-mode: color;
    /*! width: 100%; */
    /*! height: var(--playerH); */
    background: var(--c3) url(../img/rock.png);
    font-weight: bold !important;
    font: var(--small);
    box-shadow: inset 0 -5px 10px color-mix(in srgb, var(--c3), black);
  }
  &:after{
    content:"";
    position: absolute;
    pointer-events:none;
    left:0;
    mix-blend-mode: color;
    width:100%;
    height: var(--playerH);
    background: var(--c3) url(../img/rock.png);
  }
}
/* Chrome */
@supports (not (-moz-appearance: none)) {
  footer{
    &:after{
      mix-blend-mode: color-burn;
    }
    #player{
      filter:invert(1);
      &::-webkit-media-controls-enclosure {
        border-radius: 0;
        background-color: #222;
      }
      &::-webkit-media-controls-mute-button{
        color: white;
      }
    }
  }
}

/* Search */
.search-form{
  width:100%;
  display: flex;
  gap:var(--p);
  label{display: none;}
  input,button{  padding:var(--p)}
}
input{
  width:100%;
  height: auto;
  color:var(--c2);
}

button, .button{
  display:flex;
  align-items:center;
  text-align:center;
  justify-content:center;
  transition:all .2s ease;
  padding:calc(var(--p) /2 );
  margin-bottom:calc(var(--p) /2 );
  background:var(--btnbg);
  border-top:1px solid color-mix(in hsl, var(--c3), white);
  border-bottom:1px solid color-mix(in hsl, var(--c3), black 80%);
  border-radius: calc(var(--p)/2);
  &:hover{
    background:#00000066;
  }
  &:active, &.current{
    /* color:var(--c4); */
    background:color-mix(in hsl, color-mix(in hsl, var(--c3), black) 90%, transparent);
    border-bottom:1px solid color-mix(in hsl, var(--c3), white);
    border-top:1px solid color-mix(in hsl, var(--c3), black 80%);
  }
}

/* Project lists */
.b,.chocolat-overlay{
  background-color: var(--c3);
  background-image: url(../img/rock.png);
  border-radius:calc(var(--p)/1 ) 0;
  background-size: 281px;
  box-shadow: 5px 5px 10px #00000044, inset 2px 2px 2px #ffffff77, inset -2px -2px 2px #000000cc;
}
.b img:not(.back), .chocolat-image-wrapper img{
  /* border-top: 1px solid black;
  border-bottom: 1px solid color-mix(in hsl, var(--c1) 50%, transparent); */
  filter:drop-shadow(0px -1px 1px black) drop-shadow(0px 2px 1px color-mix(in hsl, var(--c1) 50%, transparent));
}

/* Recherche */


/* Typography */

p:not(:last-child){margin-bottom: var(--p);}
a{
  transition:all .2s ease;
  color:inherit;
  text-decoration:none;
  &:hover{
    color:var(--clink);
  }
}
a:active{
  color: #0003;
}
sup{
  vertical-align: top;
  position: relative;
  top: -0.4em;
}
sub{
  vertical-align: bottom;
  position: relative;
  top: 0.4em;
}
hr{
  margin-block: 30px;
  opacity: .2;
}
.edit-link{
  padding: 3px 10px;
  color: var(--c4);
  position: fixed;
  top: var(--p);
  z-index: 4;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-shadow: 0 0 4px black;
}

::selection {background:var(--c4);color: var(--c2)}
::-moz-selection {background:var(--c4);color: var(--c2);}

@media only screen and (max-width: 1100px) {
  :root{--asideW:0; --headerH:50px;}
  header{width:100%; position:static; padding-top:0;}
  .project-list .home-image{height: 50vh;}
  .filter-list{
    position: static;
    width:100%;
    height:15vh;
    flex-direction: row;
    flex-direction: row-reverse;
    align-items: center;
    margin-top:var(--headerH);
    h2{width: 100%;}
    .button{
      height:100%;
      padding:var(--p);
      img.desktop{
        display: none;
      }
      img.mobile{
        display: block!important;
        height: 100%;
      }
    }
  }
  body{main{padding-top:var(--p);}}
  .project-container{
    .item-list{
      position:static;
      width:50%;
    }
  }
}

@media only screen and (max-width: 900px) {
  .filter-list{
    flex-wrap: wrap;
    height: auto;
  }
}

@media only screen and (max-width: 800px) {
  .project-container{
    flex-wrap: wrap;
    article, .item-list{
      width: 100%;
    }
  }
  .twocols{
    flex-direction: column;
    img{width:100%!important;}
  }
}