/* Reinitialisation des marges et du padding */
* {margin: 0; padding: 0; box-sizing: border-box;}
/* Reinitialisation des listes */
ul, ol, li {list-style: none;}
/* Reinitialisation des images */
img {max-width: 100%; height: auto;}
/* Reinitialisation des formulaires */
input, textarea, select {font: inherit; margin: 0; padding: 0; border: none; background: none; appearance: none;}
/* Reinitialisation des tableaux */
table {border-collapse: collapse; width: 100%;}
/* Reinitialisation des cellules de tableau */
th, td {padding: 0.25em; border: 0.5px solid var(--border__color);}
/* font-size */
@media (min-width: 0px) {
  :root {
  --font__size__xs:10px;
  --font__size__sm:13px;
  --font__size__md:16px;
  --font__size__lg:16px;
  --font__size__xl:16px;
  --font__size__2xl:18px;
  --font__size__3xl:20px;
  --font__size__4xl:25px;
  --font__size__5xl:31px;
  --xs:4px;
  --sm:8px;
  --md:16px;
  --lg:32px;
  --xl:64px;
  --2xl:128px;
  --3xl:256px;
  --4xl:512px;
  --5xl:1024px;
  }
}
@media (min-width: 1040px) {
  :root {
    --font__size__xs:10px;
    --font__size__sm:13px;
    --font__size__md:16px;
    --font__size__lg:16px;
    --font__size__xl:18px;
    --font__size__2xl:20px;
    --font__size__3xl:25px;
    --font__size__4xl:31px;
    --font__size__5xl:39px;
    }
}
/* variables */
 :root {
  /* primitive */
  --primitive__neutral__50:#f6f6f6;
  --primitive__neutral__100:#e7e7e7;
  --primitive__neutral__200:#d1d1d1;
  --primitive__neutral__300:#b0b0b0;
  --primitive__neutral__400:#888888;
  --primitive__neutral__500:#6d6d6d;
  --primitive__neutral__600:#5d5d5d;
  --primitive__neutral__700:#4f4f4f;
  --primitive__neutral__800:#454545;
  --primitive__neutral__900:#3d3d3d;
  --primitive__neutral__950:#292929;
  --primitive__blue__50:#e8f1ff;
  --primitive__blue__100:#d5e4ff;
  --primitive__blue__200:#b3ccff;
  --primitive__blue__300:#85a8ff;
  --primitive__blue__400:#5676ff;
  --primitive__blue__500:#2f45ff;
  --primitive__blue__600:#0c0eff;
  --primitive__blue__700:#0000ff;
  --primitive__blue__800:#0609cd;
  --primitive__blue__900:#10169f;
  --primitive__blue__950:#0a0b5c;
  --primitive__purple__50:#f5f0ff;
  --primitive__purple__100:#ede4ff;
  --primitive__purple__200:#dccdff;
  --primitive__purple__300:#c5a6ff;
  --primitive__purple__400:#aa73ff;
  --primitive__purple__500:#933bff;
  --primitive__purple__600:#8b14ff;
  --primitive__purple__700:#7f00ff;
  --primitive__purple__800:#6b01d6;
  --primitive__purple__900:#5903af;
  --primitive__purple__950:#360077;
  --primitive__green__50:#e8ffe5;
  --primitive__green__100:#caffc7;
  --primitive__green__200:#9aff96;
  --primitive__green__300:#5bfe58;
  --primitive__green__400:#34f533;
  --primitive__green__500:#07db0a;
  --primitive__green__600:#01af06;
  --primitive__green__700:#06850c;
  --primitive__green__800:#0b6910;
  --primitive__green__900:#0f5815;
  --primitive__green__950:#023107;
  --primitive__yellow__50:#fefde8;
  --primitive__yellow__100:#fffdc2;
  --primitive__yellow__200:#fff887;
  --primitive__yellow__300:#ffed43;
  --primitive__yellow__400:#ffde21;
  --primitive__yellow__500:#efc203;
  --primitive__yellow__600:#ce9700;
  --primitive__yellow__700:#a46b04;
  --primitive__yellow__800:#88540b;
  --primitive__yellow__900:#734410;
  --primitive__yellow__950:#432305;
  --primitive__orange__50:#fffcea;
  --primitive__orange__100:#fff5c5;
  --primitive__orange__200:#ffeb85;
  --primitive__orange__300:#ffda46;
  --primitive__orange__400:#ffc71b;
  --primitive__orange__500:#ffa500;
  --primitive__orange__600:#e27c00;
  --primitive__orange__700:#bb5502;
  --primitive__orange__800:#984208;
  --primitive__orange__900:#7c360b;
  --primitive__orange__950:#481a00;
  --primitive__red__50:#fff0f0;
  --primitive__red__100:#ffdddd;
  --primitive__red__200:#ffc0c0;
  --primitive__red__300:#ff9494;
  --primitive__red__400:#ff5757;
  --primitive__red__500:#ff2323;
  --primitive__red__600:#ff0000;
  --primitive__red__700:#d70000;
  --primitive__red__800:#b10303;
  --primitive__red__900:#920a0a;
  --primitive__red__950:#500000;
  --primitive__pink__50:#fef1fa;
  --primitive__pink__100:#fee5f6;
  --primitive__pink__200:#ffcaf0;
  --primitive__pink__300:#ffa0e1;
  --primitive__pink__400:#ff65cb;
  --primitive__pink__500:#fd3db5;
  --primitive__pink__600:#ee1492;
  --primitive__pink__700:#cf0774;
  --primitive__pink__800:#ab095f;
  --primitive__pink__900:#8e0d52;
  --primitive__pink__950:#58002e;
  --primitive__brown__50:#f9f6ed;
  --primitive__brown__100:#f2e9cf;
  --primitive__brown__200:#e6d2a2;
  --primitive__brown__300:#d8b36c;
  --primitive__brown__400:#cb9844;
  --primitive__brown__500:#bb8437;
  --primitive__brown__600:#a1682d;
  --primitive__brown__700:#895129;
  --primitive__brown__800:#6d4026;
  --primitive__brown__900:#5d3626;
  --primitive__brown__950:#361c12;
  --primitive__neutral__00:#ffffff;
  --primitive__neutral__25:#fafafa;
  --primitive__neutral__light__stronger:#292929;
  --primitive__neutral__light__strong:rgba(41, 41, 41, 0.8);
  --primitive__neutral__light__weak:rgba(41, 41, 41, 0.4);
  --primitive__neutral__light__weaker:rgba(41, 41, 41, 0.05);
  --primitive__neutral__dark__stronger:#ffffff;
  --primitive__neutral__dark__strong:rgba(255, 255, 255, 0.8);
  --primitive__neutral__dark__weak:rgba(255, 255, 255, 0.4);
  --primitive__neutral__dark__weaker:rgba(255, 255, 255, 0.1);
  --primitive__blue__light__stronger:#10169f;
  --primitive__blue__light__strong:#0000ff;
  --primitive__blue__light__weak:rgba(16, 22, 159, 0.4);
  --primitive__blue__light__weaker:rgba(16, 22, 159, 0.05);
  --primitive__blue__dark__stronger:#e8f1ff;
  --primitive__blue__dark__strong:rgba(213, 228, 255, 0.8);
  --primitive__blue__dark__weak:rgba(232, 241, 255, 0.4);
  --primitive__blue__dark__weaker:rgba(232, 241, 255, 0.1);
  --primitive__green__light__stronger:#0b6910;
  --primitive__green__light__strong:#01af06;
  --primitive__green__light__weak:rgba(11, 105, 16, 0.4);
  --primitive__green__light__weaker:rgba(11, 105, 16, 0.05);
  --primitive__green__dark__stronger:#e8ffe5;
  --primitive__green__dark__strong:rgba(52, 245, 51, 0.8);
  --primitive__green__dark__weak:rgba(232, 255, 229, 0.4);
  --primitive__green__dark__weaker:rgba(232, 255, 229, 0.1);
  --primitive__orange__light__stronger:#7c360b;
  --primitive__orange__light__strong:#e27c00;
  --primitive__orange__light__weak:rgba(124, 54, 11, 0.4);
  --primitive__orange__light__weaker:rgba(152, 66, 8, 0.05);
  --primitive__orange__dark__stronger:#fffcea;
  --primitive__orange__dark__strong:rgba(255, 218, 70, 0.8);
  --primitive__orange__dark__weak:rgba(255, 252, 234, 0.4);
  --primitive__orange__dark__weaker:rgba(255, 252, 234, 0.1);
  --primitive__red__light__stronger:#920a0a;
  --primitive__red__light__strong:#ff0000;
  --primitive__red__light__weak:rgba(146, 10, 10, 0.4);
  --primitive__red__light__weaker:rgba(146, 10, 10, 0.05);
  --primitive__red__dark__stronger:#fff0f0;
  --primitive__red__dark__strong:rgba(255, 148, 148, 0.8);
  --primitive__red__dark__weak:rgba(255, 240, 240, 0.4);
  --primitive__red__dark__weaker:rgba(255, 240, 240, 0.1);
  --primitive__brown__light__stronger:#361c12;
  --primitive__brown__light__strong:#a1682d;
  --primitive__brown__light__weak:rgba(54, 28, 18, 0.4);
  --primitive__brown__light__weaker:rgba(54, 28, 18, 0.05);
  --primitive__brown__dark__stronger:#f9f6ed;
  --primitive__brown__dark__strong:rgba(161, 104, 45, 0.8);
  --primitive__brown__dark__weak:rgba(249, 246, 237, 0.4);
  --primitive__brown__dark__weaker:rgba(249, 246, 237, 0.1);
  --primitive__purple__light__stronger:#360077;
  --primitive__purple__light__strong:#7f00ff;
  --primitive__purple__light__weak:rgba(54, 0, 119, 0.4);
  --primitive__purple__light__weaker:rgba(54, 0, 119, 0.05);
  --primitive__purple__dark__stronger:#f5f0ff;
  --primitive__purple__dark__strong:rgba(127, 0, 255, 0.8);
  --primitive__purple__dark__weak:rgba(245, 240, 255, 0.4);
  --primitive__purple__dark__weaker:rgba(245, 240, 255, 0.1);
  --primitive__yellow__light__stronger:#432305;
  --primitive__yellow__light__strong:#ffde21;
  --primitive__yellow__light__weak:rgba(67, 35, 5, 0.4);
  --primitive__yellow__light__weaker:rgba(67, 35, 5, 0.05);
  --primitive__yellow__dark__stronger:#fefde8;
  --primitive__yellow__dark__strong:rgba(255, 222, 33, 0.8);
  --primitive__yellow__dark__weak:rgba(254, 253, 232, 0.4);
  --primitive__yellow__dark__weaker:rgba(254, 253, 232, 0.1);
  --primitive__pink__light__stronger:#58002e;
  --primitive__pink__light__strong:#fd3db5;
  --primitive__pink__light__weak:rgba(88, 0, 46, 0.4);
  --primitive__pink__light__weaker:rgba(88, 0, 46, 0.05);
  --primitive__pink__dark__stronger:#fef1fa;
  --primitive__pink__dark__strong:rgba(253, 61, 181, 0.8);
  --primitive__pink__dark__weak:rgba(254, 241, 250, 0.4);
  --primitive__pink__dark__weaker:rgba(254, 241, 250, 0.1);
  /* background */
  --background__base:var(--primitive__neutral__00);
  --background__upper:var(--primitive__neutral__25);
  --background__flat:var(--primitive__neutral__50);
  --background__overlay:var(--primitive__neutral__100);
  --background__sticky_nav:var(--primitive__neutral__200);
  --background__dialog:var(--primitive__neutral__300);
  --background__inverse:var(--primitive__neutral__light__stronger);
  /* border */
  --border__color:var(--primitive__neutral__400);
  /* text */
  --text__strong:var(--primitive__neutral__light__stronger);
  --text__low:var(--primitive__neutral__light__strong);
  --text__inverse:var(--primitive__neutral__00);
  --text__disabled:var(--primitive__neutral__light__weak);
  /* brand */
  --brand__primary__low:var(--primitive__neutral__50);
  --brand__primary__medium:var(--primitive__neutral__700);
  --brand__primary__strong:var(--primitive__neutral__950);
  --brand__primary__active:var(--primitive__neutral__900);
  /* semantic */
  --semantic__info__low:var(--primitive__blue__light__weaker);
  --semantic__info__medium:var(--primitive__blue__light__strong);
  --semantic__info__dark:var(--primitive__blue__light__stronger);
  --semantic__warning__low:var(--primitive__orange__light__weaker);
  --semantic__warning__medium:var(--primitive__orange__light__strong);
  --semantic__warning__dark:var(--primitive__orange__light__stronger);
  --semantic__danger__low:var(--primitive__red__light__weaker);
  --semantic__danger__medium:var(--primitive__red__light__strong);
  --semantic__danger__dark:var(--primitive__red__light__stronger);
  --semantic__success__low:var(--primitive__green__light__weaker);
  --semantic__success__medium:var(--primitive__green__light__strong);
  --semantic__success__dark:var(--primitive__green__light__stronger);
  --semantic__option_1__low:var(--primitive__brown__light__weaker);
  --semantic__option_1__medium:var(--primitive__brown__light__strong);
  --semantic__option_1__dark:var(--primitive__brown__light__stronger);
  --semantic__option_2__low:var(--primitive__purple__light__weaker);
  --semantic__option_2__medium:var(--primitive__purple__light__strong);
  --semantic__option_2__dark:var(--primitive__purple__light__stronger);
  --semantic__option_3__low:var(--primitive__pink__light__weaker);
  --semantic__option_3__medium:var(--primitive__pink__light__strong);
  --semantic__option_3__dark:var(--primitive__pink__light__stronger);
  /* font */
  --font__family__title:Inter;
  --font__family__body:Inter;
  --font__family__alternative:Space Mono;
  --font__weight__regular:400;
  --font__weight__bold:700;
  --font__weight__black:900;
}
.dark {display:none}
.light {display:flex}

[data-theme="dark"] {
  .dark {display:flex}
  .light {display:none}
  /* background */
  --background__base:var(--primitive__neutral__950);
  --background__upper:var(--primitive__neutral__900);
  --background__flat:var(--primitive__neutral__800);
  --background__overlay:var(--primitive__neutral__700);
  --background__sticky_nav:var(--primitive__neutral__600);
  --background__dialog:var(--primitive__neutral__500);
  --background__inverse:var(--primitive__neutral__dark__stronger);
  /* text */
  --text__strong:var(--primitive__neutral__dark__stronger);
  --text__low:var(--primitive__neutral__dark__strong);
  --text__inverse:var(--primitive__neutral__950);
  --text__disabled:var(--primitive__neutral__dark__weak);
  /* border */
    --border__color:var(--primitive__neutral__300);
  /* brand */
  --brand__primary__low:var(--primitive__neutral__50);
  --brand__primary__medium:var(--primitive__neutral__00);
  --brand__primary__strong:var(--primitive__neutral__50);
  --brand__primary__active:var(--primitive__neutral__100);
  /* semantic */
  --semantic__info__low:var(--primitive__blue__dark__weaker);
  --semantic__info__medium:var(--primitive__blue__dark__strong);
  --semantic__info__dark:var(--primitive__blue__dark__stronger);
  --semantic__warning__low:var(--primitive__orange__dark__weaker);
  --semantic__warning__medium:var(--primitive__orange__dark__strong);
  --semantic__warning__dark:var(--primitive__orange__dark__stronger);
  --semantic__danger__low:var(--primitive__red__dark__weaker);
  --semantic__danger__medium:var(--primitive__red__dark__strong);
  --semantic__danger__dark:var(--primitive__red__dark__stronger);
  --semantic__success__low:var(--primitive__green__dark__weaker);
  --semantic__success__medium:var(--primitive__green__dark__strong);
  --semantic__success__dark:var(--primitive__green__dark__stronger);
  --semantic__option_1__low:var(--primitive__brown__dark__weaker);
  --semantic__option_1__medium:var(--primitive__brown__dark__strong);
  --semantic__option_1__dark:var(--primitive__brown__dark__stronger);
  --semantic__option_2__low:var(--primitive__purple__dark__weaker);
  --semantic__option_2__medium:var(--primitive__purple__dark__strong);
  --semantic__option_2__dark:var(--primitive__purple__dark__stronger);
  --semantic__option_3__low:var(--primitive__pink__dark__weaker);
  --semantic__option_3__medium:var(--primitive__pink__dark__strong);
  --semantic__option_3__dark:var(--primitive__pink__dark__stronger);
}
/* couleur surlignage texte*/
/* pour Firefox */
::-moz-selection {
  background-color:var(--brand__primary__medium);
  color: var(--text__inverse);
 }
 /* pour Safari et Chrome */
 ::selection {
  background-color:var(--brand__primary__medium);
  color: var(--text__inverse);
 }	
body {
  font-family: var(--font__family__body), sans-serif;
  background-color: var(--background__base);
  color: var(--text__low);
  margin: 0 auto;
  font-size: var(--font__size__md);
}

path {fill: var(--text__strong);}
h2 {font-size:var(--font__size__4xl)}
h3 {font-size:var(--font__size__3xl)}
h4 {font-size:var(--font__size__2xl)}
h5 {font-size:var(--font__size__xl)}
h6 {font-size:var(--font__size__lg)}
a {color: var(--brand__primary__medium); text-decoration: none; line-height:150%;}
.bold {font-weight:var(--font__weight__bold)}

/* colorswitch */
.theme-switch-wrapper {display: flex; align-items: center; justify-content: center; gap:var(--sm)}
.theme-switch {display: inline-block; height: var(--lg); position: relative; width: 60px;}
.theme-switch input {display:none;}
.slider {background-color: var(--background__inverse); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s;}
.slider:before {background-color: var(--text__inverse); bottom: var(--sm); content: ""; height: 24px; left: 5px; position: absolute; transition: .4s; width: 24px;top: calc(50% - 12px);}
input:checked + .slider:before {transform: translateX(27px); background-color: #292929;}
.slider.round {border-radius: var(--lg);}
.slider.round:before {border-radius: 50%;}
h1, h2, h3, h4, h5, h6 {font-family: var(--font__family__title); line-height:120%; letter-spacing:-3%; font-weight:var(--font__weight__bold);}
h1 {font-size: var(--font__size__5xl);}
p {line-height:150%}

@media (min-width: 0px) {
  /* general */
  .svg_right, .svg_left {display:none}
  .btn {display: inline-flex; padding: var(--md) var(--lg); justify-content: center; align-items: center; gap: var(--xs); border-radius: var(--lg); justify-content: center; align-items: center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
  .btn_filled {background: var(--brand__primary__medium); color:var(--text__inverse)}
  .btn_filled path {fill: var(--text__inverse);}
  .btn_filled:hover {background: var(--brand__primary__strong);}
  .btn_outlined {border:solid 0.5px var(--brand__primary__medium); color:var(--brand__primary__medium)}
  .btn_low {background: var(--background__upper)}
  .btn_outlined path {fill: var(--brand__primary__medium);}
  .btn_low path {fill: var(--brand__primary__medium);}
  .btn_low:hover {background: var(--background__flat)}
  .btn_outlined:hover {border:solid 0.5px var(--brand__primary__strong); color:var(--brand__primary__strong)}
  .btn_outlined:hover path {fill: var(--brand__primary__medium);}
  .btn_menu_close, .btn_demo_close, .btn_mentions_close, .btn_video_close {padding:8px 0; width:40px}
  /* header */
  header {padding: 0 var(--md); background-color:var(--background__flat); width:100%; display: flex; justify-content: space-between;
    align-items: center; flex-shrink: 0; position:fixed; bottom:0; left:0; height:80px; z-index:2; color:var(--text__strong)}
  header .btn {padding:var(--sm) 0; min-width:74px; background-color:transparent}
  .logo {display:flex; flex-direction: column; gap:-4px; justify-content: center; align-items: center; font-size:0.875em}
  /* nav */
  .menu, .demo, .mentions {position:fixed; bottom: -1000px; left:0; background-color:var(--background__flat); width: 100%; height: auto; z-index:3; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: var(--lg) var(--lg) 0 0; padding:var(--xl) var(--md) var(--md); border-bottom:solid 0.5px var(--border__color)}
  .menu .btn_menu_close, .demo .btn_demo_close {position:absolute; top:var(--md); right:var(--md); z-index:2}
  .menu.visible, .mentions.visible {bottom:80px}
  .menu.visible:before {content: ''; width: 80px; height: 8px; background: var(--background__sticky_nav); position: absolute; top: 30px; left: calc(50% - 40px);border-radius: 4px;}
  .demo.visible {bottom:80px}
  .demo.visible:before {content: ''; width: 80px; height: 8px; background: var(--background__sticky_nav); position: absolute; top: 30px; left: calc(50% - 40px);border-radius: 4px;}
  .drawer_header {display:flex; justify-content: space-between; align-items: center; padding: var(--lg) var(--md);}
  .demo .drawer_header {background-color:transparent; justify-content:space-between; justify-content: right;}
  .demo .drawer_header small {color:var(--background)}
  .demo .drawer_header a {border-color:var(--background)}
  .drawer_content {color:var(--text_low); display: flex; flex-direction: column; align-items: flex-start; gap: var(--md); flex: 1 0 0;}
  .drawer_content > p, .drawer_title p {margin-bottom: 0;}
  .drawer_title {color:var(--text_strong); display: flex; align-items: flex-start; gap: 5px; align-self: stretch;}
  .demo .drawer_content {gap:var(--md); position:relative;}
  .demo .drawer_title p {font-weight:700; width: 100%;}
  .demo .drawer_content .address {align-items:center}
  .profile {display:flex; flex-direction:row; gap:var(--sm); align-items: center;}
  .profile_content {display:flex; flex-direction:column; gap:var(--xs);}
  .profile img {width:80px; height:80px; border-radius:40px}
  .contact_container {display:flex; flex-direction:column; gap:var(--md);}
  .contact_content {display:flex; flex-direction:column; gap:var(--sm);}
  .availability {display:flex}
  .menu_ul {display:flex; flex-direction:column; gap:var(--sm);}
  .menu_ul a {display:flex; flex-direction:row; gap:var(--sm)}
  .menu_ul a svg {flex: 0 0 auto;}
  .hero_intro small a {text-decoration:underline}
  .pdf_container h5 {margin-bottom:var(--sm)}
  .hero_callout {display: flex; flex-direction: column; gap: var(--md); align-items: center;}
  .hero_callout .btn {width: max-content;}
  /* section */
  section {display:flex; flex-direction:column; gap:0; align-items:center; padding: 0 var(--lg);}
  .top {padding-top:var(--xl); display:flex; flex-direction:column; gap:var(--lg);}
  .hero {display:flex; flex-direction:column; align-items:center; gap:var(--lg);}
  .hero_intro {display:flex; flex-direction:column; align-items:center; gap:var(--md)}
  .hero_intro h1, .hero_intro p {text-align: center;}
  .details {display:flex; flex-direction:row; gap:0; align-items:center; gap:var(--sm)}
  .stack {display: flex; flex-direction: column; gap: var(--sm);}
  .stack .badges_container {justify-content: center;}
  .details small {text-align:center:}
  .details a {line-height:0}
  .portfolio {display:flex; flex-direction: column; gap:var(--lg); padding-top: var(--2xl);}
  .portfolio > h2 {text-align: center;}
  /* card */
  .card {background-color:var(--background__base); border-radius:var(--lg);}
  .card .btn {height: 40px; padding:0; width:40px}
  .card figure {position:relative; line-height:0; border-radius:var(--lg); overflow:hidden}
  .card figcaption {position:absolute; bottom:var(--md); right:var(--md); display:none}
  .card_content {padding:var(--md); display:flex; flex-direction: column; gap:var(--sm)}
  .badges_container {display:flex; gap:var(--sm); flex-wrap: wrap;}
  .badge {font-size:var(--font__size__sm); padding:var(--xs) var(--md); border-radius:var(--lg); line-height:150%; display: flex; gap: var(--xs); align-items: center;}
  .needs {color:var(--semantic__info__dark); background-color:var(--semantic__info__low)}
  .success {color:var(--semantic__success__dark); background-color:var(--semantic__success__low)}
  .danger {color:var(--semantic__danger__dark); background-color:var(--semantic__danger__low)}
  .tools {color:var(--semantic__option_1__dark); background-color:var(--semantic__option_1__low)}
  .techs {color:var(--semantic__option_3__dark); background-color:var(--semantic__option_3__low)}
  .success circle {fill:var(--semantic__success__medium);}
  .danger circle {fill:var(--semantic__danger__medium);}
  /* references */  
  .references {display:flex; flex-direction:column; gap:var(--sm); align-items: center; padding:var(--xl) 0}
  .references_container {display:flex; flex-direction:row; gap:var(--sm); flex-wrap: wrap; justify-content: center; align-items: center;}
  .ref_link {color: var(--text__low);}
  .references circle {fill: var(--text__low);}
  .references .btn_demo_open {text-decoration:underline; text-align:center}
  /* copyright */
  footer {display:flex;flex-direction:column; gap:var(--lg); align-items: center; padding-bottom: var(--2xl);}
  .copyright {display:flex;flex-direction:row; gap:var(--sm); align-items: center;}
  .copyright a {font-size:var(--font__size__sm);}
  footer .btn {width:40px; height:40px; padding:0}
  /* single */
  .single {gap:var(--xl)}
  .single .content {display: flex; flex-direction: column; gap:var(--lg)}
  .nomenclature {display: flex; flex-direction: column; gap:var(--lg)}
  .nomenclature_container {display:flex; flex-direction: column; gap:var(--sm)}
  .nomenclature_container p {text-align: center;}
  .nomenclature_container .badges_container {justify-content: center;}
  .image {position:relative}
  legend {font-size:var(--font__size__sm); padding:var(--sm) var(--md); background-color:var(--background__base)}
  .timeline_container {display:flex; flex-direction:column; gap:var(--lg)}
  .timeline {display:flex; flex-direction:column; gap:84px; flex: 1 1 0; align-items: center;}
  .actions {display:flex; flex-direction:column; gap:var(--xl);}
  .timeline h2 {text-align:center}
  .timeline_post {background-color:var(--background__flat); border-radius:var(--md); display:flex; flex-direction: column; align-items:center; gap:var(--md); position:relative; padding:var(--lg)}
  .timeline_content {display:flex; flex-direction: column; align-items:center; gap:var(--sm);}
  .timeline_content h5 {text-align: center;}
  .timeline_content p {text-align: center;}
  .timeline_post .badges_container {justify-content: center;}
  .timeline_post svg {position:absolute; left:calc(50% - 2px); top:-64px}
  .timeline_post:before {content:''; width:12px; height:12px; border:solid 4px var(--text__low); background-color:var(--background__base); border-radius:10px; position:absolute; top:-10px; left:calc(50% - 10px); z-index:1}
  .two_col {display:flex; flex-direction: column; gap:var(--lg)}
}
@media (min-width: 590px) {
  /* general */
  body {border-left:solid 80px var(--background__flat); border-right:solid 80px var(--background__flat)}
  .svg_right, .svg_left {display:block}
  .svg_left {position: fixed; left: 22px; top: 0;}
  .svg_right {position: fixed; right: 22px; top: 0;}
  .svg_right path, .svg_left path {fill:var(--background__base);}
  .logo {font-size:1em;}
}
@media (min-width: 768px) {
  .card {display: flex; flex-direction: row; align-items: center; background-color:var(--background__base); border:none}
  .card figure {border-radius:var(--lg)}
  .card:nth-child(even) figure {order:2}
  .card figure {max-width:540px}
  .card_content {max-width: 460px;}
  .hero_callout {flex-direction: row;}
  /* single */
  .timeline_container {flex-direction:row}
  .two_col {flex-direction: row; gap:var(--lg)}
  .actions {max-width:460px}  
  legend {position:absolute; bottom:0; right:0; }
}
@media (min-width: 1040px) {
  /* header */
  header {max-width:490px; bottom:auto; top:82px; left:calc(50% - 245px); border-radius:var(--xl); /*box-shadow: 0px 20px 50px 0px rgba(20, 20, 20, 0.10);*/ border:solid 1px var(--border__color)}
  .logo {flex-direction:row; gap:var(--sm)}
  .menu, .demo, .mentions {max-width:490px; bottom:auto; top:80px; left:calc(50% - 245px); scale:0; padding:var(--lg) var(--md) var(--lg) var(--md); border-radius:0 0 var(--lg) var(--lg); z-index:1; border-left:solid 0.5px var(--border__color); border-right:solid 0.5px var(--border__color)}
  .menu.visible, .demo.visible {bottom:auto; scale:1; top:160px}
  .menu.visible:before, .demo.visible:before {content: ''; width: 100%; height: 50px; background: var(--background__flat); position: absolute; top: -40px; left: -0.5px; border-radius: 0; border-left:solid 0.5px var(--border__color); border-right:solid 0.5px var(--border__color)}
  .demo .drawer_title {padding-right:var(--lg)}
  /* section */
  .top {padding-top: var(--lg); gap: var(--3xl);}
  section {max-width:1000px; margin:0 auto}
  .portfolio {gap:var(--xl)}
  .card figcaption {display:block}
  .card_content {padding:var(--lg)}
}
@media (min-width: 1200px) {
  /* general */
  body {border-left:solid 180px var(--background__flat); border-right:solid 180px var(--background__flat)}
  .svg_right, .svg_left {display:block}
  .svg_left {position: fixed; left: 122px; top: 0;}
  .svg_right {position: fixed; right: 122px; top: 0;}
  .svg_right path, .svg_left path {fill:var(--background__base);}
  .badge {font-size:var(--font__size__md)}
}