/* compressed by CompreSS */body,
html {
  background:#000;
  font-family:tahoma,arial,helvetica,sans-serif;
}
img {
  border:none;
}
@font-face {
  font-family:"Snippet";
  font-display:swap;
  src:url("https://portfolio.thomas-daveluy.fr/Snippet-Regular.ttf");
}
#chrono {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  overflow-x:auto;
  scrollbar-width:thin;
  scroll-behavior:smooth;
}
#chrono::-webkit-scrollbar {
  width:8px;
  height:8px;
}
#chrono::-webkit-scrollbar-track {
  background:#000000;
  width:8px;
  height:8px;
}
#chrono::-webkit-scrollbar-thumb {
  background-color:#828282;
  border-radius:0px;
  border:0px none #ffffff;
  width:8px;
  height:8px;
}
#chrono .entry {
  position:absolute;
  display:inline-block;
  top:0;
  bottom:0;
  left:0px;
  width:19%;
  height:100%;
  margin-left:0;
  overflow:hidden;
  vertical-align:top;
  z-index:1;
  -webkit-transition:margin 0.5s;
  transition:margin 0.5s;
}
#chrono .entry-date,
#chrono .entry-cat,
#chrono .entry-name {
  position:absolute;
  display:none;
  top:5px;
  padding:0 10px;
  color:#fff;
  background:#222;
  font-size:25px;
  font-family:Snippet;
  text-decoration:none;
  z-index:3;
}
#chrono .segment {
  position:absolute;
  top:0;
  height:100%;
  width:100%;
  z-index:2;
}
#chrono .segment div,
#chrono .segment h2 {
  position:absolute;
  margin:100px 5%;
  width:90%;
  text-align:center;
  white-space:normal;
  z-index:2;
}
#chrono .segment div{
  width:80%;
  margin:200px 10%;
}
#chrono .segment div a {
  padding:0 5px;
  color:#ddd;
  font-size:12px;
  text-decoration:none;
  text-shadow:1px 1px 0px rgba(0,0,0,.6);
}
#chrono .segment:hover div a {
  color:#eee;
}
#chrono .segment h2 a {
  display:block;
  width:100%;
  color:#ddd;
  font-family:Snippet;
  font-size:35px;
  font-weight:normal;
  text-decoration:none;
  text-shadow:0 0 2px #000;
  -webkit-transition:color 0.5s;
  transition:color 0.5s;
}
#chrono .segment:hover h2 a {
  color:#fff;
}
#chrono .segment p.img {
  position:absolute;
  display:block;
  top:0;
  bottom:0;
  margin:0;
  z-index:1;
}
#chrono .segment p.img a {
  padding:0;
  margin:0;
}
#chrono .segment p.img img {
  display:block;
  height:100%;
  width:130%;
  object-fit:cover;
  opacity:0.6;
  -ms-filter:"alpha(opacity=60)";
  -webkit-transition:opacity 0.5s;
  transition:opacity 0.5s;
}
#chrono .segment:hover p.img img {
  -ms-filter:"alpha(opacity=100)";
  opacity:1;
}
#nav {
  position:fixed;
  bottom:4%;
  left:4%;
  right:4%;
  padding:5px 20px;
  height:36px;
  line-height:35px;
  font-size:17px;
  color:#444;
  z-index:300;
  background:#0a0a0a;
  background:rgba(10,10,10,0.95);
  -webkit-box-shadow:0 0 200px #fff;
  -moz-box-shadow:0 0 200px #fff;
  box-shadow:0 0 200px #fff;
}
#nav dl {
  float:left;
  margin:0;
  padding:0;
}
#nav dl.right {
  float:right;
  margin-right:10px;
}
#nav dd,
#nav dt {
  display:inline-block;
  margin:0 8px 0 8px;
  padding:0;
  padding-bottom:2px;
  line-height:35px;
}
#nav dd#tri-name {
  padding-right:20px;
  border-right:1px solid #222;
}
#nav dt a:hover {
  color:#ccc;
}
#nav dd a {
  display:block;
  width:auto;
  padding:0 10px;
  line-height:30px;
  color:#999;
  text-align:center;
  text-decoration:none;
  -moz-border-radius:1px;
  -webkit-border-radius:1px;
  border-radius:1px;
  -moz-box-shadow:0 0 10px #000 inset;
  -webkit-box-shadow:0 0 10px #000 inset;
  box-shadow:0 0 10px #000 inset;
  transition:-moz-box-shadow 0.3s;
  -webkit-transition:-webkit-box-shadow 0.3s;
  transition:box-shadow 0.3s;
}
#nav dd.selected a,
#nav dd a:hover {
  color:#ddd;
  -moz-box-shadow:0 0 15px #333 inset;
  -webkit-box-shadow:0 0 15px #333 inset;
  box-shadow:0 0 15px #333 inset;
}
#nav dd.selected a {
  -moz-box-shadow:0 0 25px #555 inset;
  -webkit-box-shadow:0 0 25px #555 inset;
  box-shadow:0 0 25px #555 inset;
}
#nav dt a {
  display:block;
  margin-left:0;
  padding:0 10px;
  line-height:30px;
  color:#777;
  text-decoration:none;
  text-shadow:0 0 1px #000;
}
#nav dt#racine {
  margin-right:0;
  padding:0 0 0 18px;
  font-size:20px;
  font-family:Snippet;
  letter-spacing:1px;
  border-left:1px solid #222;
}
p#ssnav {
  position:fixed;
  display:block;
  bottom:4%;
  left:4%;
  margin-bottom:45px;
  margin-left:80px;
  padding:0 0px;
  height:25px;
  line-height:23px;
  font-size:14px;
  overflow:hidden;
  background:#c8c8c8;
  background:rgba(190,190,190,0.30);
  z-index:299;
  -moz-box-shadow:0 0 50px #000;
  -webkit-box-shadow:0 0 50px #000;
  box-shadow:0 0 50px #000;
  transition:height 0.5s;
}
p#ssnav a {
  margin:0 15px;
  color:#000;
  text-decoration:none;
  text-shadow:0px 0px 10px #fff;
}
p#ssnav a:hover {
  color:#fff;
}
p#nav-right,
p#nav-left {
  position:fixed;
  display:block;
  top:calc(50% - 25px);
  left:1%;
  padding:0;
  width:50px;
  height:50px;
  line-height:50px;
  background:#000;
  text-align:center;
  font-size:0;
  z-index:300;
  border-radius:100%;
  box-shadow:0 0 25px rgba(255,255,255,.5);
  opacity:0.5;
  cursor:pointer;
  transition:all 0.5s,transform 0.25s,box-shadow .25s;
}
p#nav-right {
  left:auto;
  right:1.1%;
}
p#nav-right:hover,
p#nav-left:hover {
  opacity:1;
  transform:scale(1.25);
  box-shadow:0 0 25px rgba(255,255,255,1);
}
p#nav-right.hidden,
p#nav-left.hidden {
  opacity:0;
  margin-right:calc(-1.1% - 85px);
  transition:all 1s .5s;
}
p#nav-left.hidden {
  opacity:0;
  margin-right:0;
  margin-left:calc(-1.1% - 85px);
  transition:all 1.5s,margin 1s .5s;
}
p#nav-right:after,
p#nav-left:after {
  content:"";
  display:inline-block;
  vertical-align:middle;
  margin:0 auto;
  width:16px;
  height:16px;
  border-right:4px solid #fff;
  border-top:4px solid #fff;
  transform:rotate(45deg);
  margin-left:-5px;
}
p#nav-left:after {
  transform:rotate(-135deg);
  margin-left:0px;
  margin-right:-5px;
}
@media screen and (max-width:1000px) {
  #nav {
    bottom:0%;
    left:0%;
    right:0%;
    font-size:18px;
    box-shadow:none;
  }
  p#ssnav {
    bottom:0;
    left:2%;
    height:35px;
    line-height:30px;
    padding-bottom:7px;
    font-size:18px;
  }
  #chrono .entry-date,
  #chrono .entry-cat,
  #chrono .entry-name {
    top:0;
    font-size:20px;
  }
  #chrono .segment h2 a {
    font-size:26px;
  }
  #chrono .segment p,
  #chrono .segment h2 {
    margin:50px 5%;
  }
  #chrono .segment p {
    margin:100px 10%;
  }
  p#nav-right,
  p#nav-left {
    display:none;
  }
}
@media screen and (orientation:portrait) {
  p#ssnav,
  #nav dl.left {
    display:none;
  }
  #nav {
    padding-left:0
  }
  #nav dl.right {
    float:none;
    text-align:center;
    margin-left:0;
    margin-right:0;
  }
  #nav dd,
  #nav dt {
    margin:0 0px 0 8px;
  }
  #nav dt#racine {
    margin-left:5px;
    padding:0 0 0 5px;
  }
  #chrono {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
  }
  #chrono .entry {
    position:relative;
    top:0;
    bottom:0;
    left:0!important;
    width:48%;
    margin-left:-5px!important;
  }
  #chrono .segment h2 a {
    font-size:35px;
  }
  #chrono .segment p,
  #chrono .segment h2 {
    margin:100px 5%;
  }
  #chrono .segment p {
    margin:200px 10%;
  }
}