/* 
	Author :: Elodie BAYET
    Origin :: Belgium, EU
	  Role :: Fullstack Web Developer
	  Date :: 2020.04 + 2021.09 + 2025.06 + 2025.06
*/
/*
    "Chronographic" :: Infography of periods
*/
#chronographic .year {
  display: none;
}
#chronographic > div ul {
  display: none;
}

#chronographic.ladder:not(.error) {
  margin-top: 24px;
  height: 1600px;
  position: relative;
}
#chronographic.ladder:not(.error) .year {
  font-size: 1.4rem;
  line-height: 1.75;
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
}
#chronographic.ladder:not(.error) .year strong {
  padding: 3px 9px 3px 0;
  position: relative;
  top: -14px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(1) {
  top: 0px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(2) {
  top: 100px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(3) {
  top: 200px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(4) {
  top: 300px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(5) {
  top: 400px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(6) {
  top: 500px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(7) {
  top: 600px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(8) {
  top: 700px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(9) {
  top: 800px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(10) {
  top: 900px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(11) {
  top: 1000px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(12) {
  top: 1100px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(13) {
  top: 1200px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(14) {
  top: 1300px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(15) {
  top: 1400px;
}
#chronographic.ladder:not(.error) .year:nth-of-type(16) {
  top: 1500px;
}
#chronographic.ladder:not(.error) > div {
  position: absolute;
  width: 40%;
  padding: 12px 18px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(even) {
  left: 52.5%;
}
#chronographic.ladder:not(.error) > div:nth-of-type(odd) {
  left: 12.5%;
}
#chronographic.ladder:not(.error) > div:nth-of-type(1) {
  top: 100px;
  height: 200px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(2) {
  top: 200px;
  height: 100px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(3) {
  top: 300px;
  height: 200px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(4) {
  top: 400px;
  height: 100px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(5) {
  top: 500px;
  height: 200px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(6) {
  top: 600px;
  height: 100px;
}
#chronographic.ladder:not(.error) > div:nth-of-type(7) {
  top: 700px;
  height: 200px;
}
#chronographic.ladder:not(.error) h3 {
  font-size: 1.8rem;
  margin: 0;
}

@media (any-hover: hover) {
  #chronographic.ready ul {
    margin-bottom: 18px;
    padding: 12px 12px 6px;
    position: absolute;
    width: 110%;
    bottom: 100%;
    left: -5%;
  }
  #chronographic.ready ul li {
    line-height: 1.2;
  }
  #chronographic.ready ul::after {
    content: " ";
    position: absolute;
    left: 50%;
    top: 100%;
  }
  #chronographic.ready a:hover + h3 + ul {
    display: block;
  }
}
/* 
	Author :: Elodie BAYET
    Origin :: Belgium, EU
	  Role :: Fullstack Web Developer
	  Date :: 2020.04 + 2021.09 + 2025.06
*/
/*
    Global Variables
*/
/* Main Colors */
/* Custom Greys */
/* Dynamic Colors */
/*
    Global Mixins
*/
/* For 'navigation-expand' mixin */
/* For layout w/ expanded navigation */
/* Set for UI icons mixins */
/* For icons of brands (used in theme) */
/* For icons of UI (used in theme) */
/* For positioning UI icons (used in theme) */
/*
    Global Placeholders
*/
/* For typography */
/* For hover effect (used in theme) */
a, a:link, a:visited, button, .navigation li {
  transition: 0.25s ease-in-out;
}

/*
    "Chronographic" :: Infography of periods
*/
#chronographic:not(.ladder) > div::before {
  color: #9e9ea8;
  transition: 0.25s ease-in-out;
}
#chronographic:not(.ladder) > div:hover::before {
  color: rgb(18, 190, 213);
}
#chronographic:not(.ladder) > div:hover h3 {
  color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(18, 190, 213);
}
#chronographic:not(.ladder) h3 {
  border-bottom: 1px solid #b8b8bf;
  transition: 0.25s ease-in-out;
}

#chronographic.ladder:not(.error) .year {
  border-top: 1px solid rgb(83, 83, 89);
}
#chronographic.ladder:not(.error) .year strong {
  background-color: #242428;
}
#chronographic.ladder:not(.error) > div {
  box-shadow: 2px 4px 6px 0 rgba(11, 11, 14, 0.6);
}
#chronographic.ladder:not(.error) > div:nth-of-type(1) {
  background-image: linear-gradient(180deg, rgba(94, 123, 137, 0.5), rgba(94, 123, 137, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(2) {
  background-image: linear-gradient(180deg, rgba(84, 124, 147, 0.5), rgba(84, 124, 147, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(3) {
  background-image: linear-gradient(180deg, rgba(74, 124, 157, 0.5), rgba(74, 124, 157, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(4) {
  background-image: linear-gradient(180deg, rgba(65, 122, 166, 0.5), rgba(65, 122, 166, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(5) {
  background-image: linear-gradient(180deg, rgba(55, 120, 176, 0.5), rgba(55, 120, 176, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(6) {
  background-image: linear-gradient(180deg, rgba(45, 116, 186, 0.5), rgba(45, 116, 186, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(7) {
  background-image: linear-gradient(180deg, rgba(35, 110, 196, 0.5), rgba(35, 110, 196, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(8) {
  background-image: linear-gradient(180deg, rgba(25, 103, 206, 0.5), rgba(25, 103, 206, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(9) {
  background-image: linear-gradient(180deg, rgba(16, 96, 215, 0.5), rgba(16, 96, 215, 0.15));
}
#chronographic.ladder:not(.error) > div:nth-of-type(10) {
  background-image: linear-gradient(180deg, rgba(6, 86, 225, 0.5), rgba(6, 86, 225, 0.15));
}

@media (any-hover: hover) {
  #chronographic.ready ul {
    color: rgb(11, 11, 15);
    background-image: linear-gradient(15deg, #d2d2d7, rgb(255, 255, 255));
    box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.5);
  }
  #chronographic.ready ul::after {
    border-width: 5px;
    border-style: solid;
    border-color: #d2d2d7 transparent transparent transparent;
  }
}/*# sourceMappingURL=chronographic.css.map */