@charset "UTF-8";
:root {
  --background-color: #17181c;
  --primary-color: #4a9399;
  --secondary-color: #24494c;
  --black-color: #000000;
  --rose-color: #ff398e;
  --blue-color: #708AD4;
  --grey-color: #8E8E8E;
  --background-gradient: linear-gradient(160deg, var(--primary-color) 0%, var(--secondary-color) 99%);
  --facebook-color: #273c75;
  --twitter-x-color: white;
  --instagram-color: #ff0076;
  --discord-color: #5865F2;
  --grid-full: 1 / 4;
  --d-flex: flex;
}

/* ==========================================================================
   Styles:
   ========================================================================== */
/* ==========================================================================
    Créer une icon x2 à x4:
========================================================================== */
.bi-2X {
  font-size: 2rem;
}

.bi-3X {
  font-size: 3rem;
}

.bi-4X {
  font-size: 4rem;
}

/* ==========================================================================
    HTML:
========================================================================== */
html {
  max-width: 100vw;
  /* ==========================================================================
      Liens:
  ========================================================================== */
  /* ==========================================================================
      Responsive:
  ========================================================================== */
}
html body {
  /* ==========================================================================
  Cursor:
  ========================================================================== */
  cursor: url("../img/mouse-cursor-purple.cur"), default;
  /* ==========================================================================
  Button to TOP:
  ========================================================================== */
}
html body #button {
  opacity: 0;
  color: white;
  font-weight: 600;
  right: -2rem;
  bottom: 20rem;
  z-index: 1000;
  position: fixed;
  text-align: center;
  visibility: hidden;
  line-height: 1.4rem;
  display: inline-block;
  padding: 0.6rem;
  transition: opacity 0.5s, visibility 0.5s;
  transform: rotate(-90deg) translate(-50%, 0);
}
html body #button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: -1;
  height: 2px;
  border-radius: 20px;
  transform: scaleX(0);
  transition: transform 0.6s;
  transform-origin: 100% 0;
  background: var(--background-gradient);
}
html body #button:hover {
  cursor: default;
}
html body #button:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}
html body #button.show {
  opacity: 1;
  visibility: visible;
}
html body main.content {
  /* ==========================================================================
      Pages:
  ========================================================================== */
  /* ==========================================================================
      Sections:
  ========================================================================== */
  /* ==========================================================================
      Titres:
  ========================================================================== */
  /* ==========================================================================
      Boutons:
  ========================================================================== */
  /* ==========================================================================
      Icons:
  ========================================================================== */
  /* ==========================================================================
      IMGS:
  ========================================================================== */
}
html body main.content #p-cv,
html body main.content #p-propos,
html body main.content #p-kelenscorp,
html body main.content #p-hydaria,
html body main.content #p-bountyfac,
html body main.content #p-contact,
html body main.content #p-mentions-legales {
  margin-top: 10rem;
}
html body main.content section {
  padding: 2rem 0 2rem 0;
}
html body main.content h1,
html body main.content h1 a,
html body main.content h2,
html body main.content h2 a,
html body main.content h3,
html body main.content h3 a,
html body main.content h4,
html body main.content h4 a,
html body main.content h5,
html body main.content h5 a,
html body main.content h6,
html body main.content h6 a {
  font-family: Carter One, cursive;
}
html body main.content .btn {
  padding: 1rem;
  background: transparent;
  width: fit-content;
  border: 1px solid #0a0a0a;
  border-radius: 20px;
  box-shadow: 1px 4px 0 var(--black-color);
  transition: box-shadow 0.4s ease-in-out;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  line-height: 0;
}
html body main.content .btn:hover {
  box-shadow: none;
}
html body main.content .btn.btn-principal {
  background: var(--background-gradient);
  color: white;
}
html body main.content .btn.btn-principal:hover {
  color: white;
}
html body main.content i + i {
  margin-top: 1rem;
}
html body main.content .img-setup-expanted {
  position: relative;
}
html body main.content .img-setup-expanted .closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
html body main.content .img-setup-expanted #expandedImg {
  width: 100%;
}
html body main.content .img-setup-expanted #imgtext {
  background: rgba(16, 15, 15, 0.6);
  border-radius: 20px;
  position: absolute;
  font-size: 20px;
  padding: 0.6rem;
  bottom: 15px;
  color: white;
  left: 15px;
}
html a {
  text-decoration: none;
  color: white;
  transition: ease-in-out 0.2s;
}
html a:hover {
  color: #708AD4;
}
html a,
html i {
  color: var(--primary-color);
}
html p {
  color: white;
}
html .bg-accent-darker {
  background-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--bg-o, 1));
}
html .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
@media (max-width: 960px) {
  html .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  html .wrapper {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Navbar:
   ========================================================================== */
.header {
  height: 100%;
  width: 100%;
}
.header nav {
  position: fixed;
  top: 0;
  width: 100%;
}
.header nav .navbar-brand img {
  border-radius: 50%;
  box-shadow: 0px 0px 10px 6px var(--black-color);
  animation: logoFadeIn 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
@keyframes logoFadeIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.header nav .navbar-brand img:hover {
  transform: rotate(360deg);
  box-shadow: none;
}
.header nav .navbar-nav {
  animation: navFadeIn 1s ease-in-out;
}
@keyframes navFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.header nav .navbar-nav .nav-item,
.header nav .navbar-nav .dropdown {
  color: var(--rose-color) !important;
}
.header nav .navbar-nav .nav-item .nav-link,
.header nav .navbar-nav .dropdown .nav-link {
  font-family: Merienda, cursive;
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 700;
}
.header nav .navbar-nav .nav-item .nav-link .bi,
.header nav .navbar-nav .dropdown .nav-link .bi {
  animation: iconFadeIn 0.4s ease-in-out;
  animation-delay: 2s;
}
@keyframes iconFadeIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.header nav .navbar-nav .nav-item.active .nav-link,
.header nav .navbar-nav .dropdown.active .nav-link {
  font-weight: 700;
  font-size: 20px;
}
.header nav .navbar-nav .nav-item.active .nav-link:after,
.header nav .navbar-nav .dropdown.active .nav-link:after {
  transform: scaleX(0);
  transform-origin: left;
}
.header nav .navbar-nav .dropdown .dropdown-menu {
  background: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--bg-o, 1));
}
.header .navbar-toggler {
  margin-right: 3rem;
}
.header .navbar-toggler .navbar-toggler-icon {
  color: var(--color-contrast-high);
}
.header .navbar {
  height: 100px;
  padding: 0;
}
.header .navbar-collapse {
  background-color: var(--color-contrast-lower);
}
.header .navbar-brand {
  padding: 0 0 0 3rem;
  margin: 0;
}
.header .navbar-brand,
.header .navbar-brand img {
  max-width: 60px;
}
.header .dropdown-toggle:after {
  border-top: 0;
}
.header .nav-link {
  position: relative;
  min-height: 50px;
}
.header .nav-link:after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  display: block;
  width: 100%;
  z-index: -1;
  height: 2px;
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform 0.6s;
  transform-origin: 100% 0;
  background: var(--background-gradient);
}
.header .nav-link.active:after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  display: block;
  width: 100%;
  z-index: -1;
  height: 2px;
  border-radius: 10px;
  transform: scaleX(1);
  transition: transform 0.6s;
  transform-origin: 100% 0;
  background: var(--background-gradient);
}
.header .nav-link:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}
.header .wrapper {
  min-height: 90vh;
}
.header .wrapper .home-background-img {
  grid-column: 1/2;
  background: url("../img/banner.webp") no-repeat center/cover;
}
.header .wrapper .home-background-svg {
  position: absolute;
  top: 10%;
  left: 30%;
  transform: translateX(-50%);
}
.header .wrapper .home-background-me {
  position: absolute;
  top: 15%;
  left: 31%;
  transform: translateX(-50%);
}
.header .wrapper .home-background-text {
  grid-column: 2/4;
  display: var(--d-flex);
  flex-direction: column;
  justify-content: center;
  padding: 0 20rem;
}
.header .wrapper .home-background-text h1,
.header .wrapper .home-background-text h2 {
  text-transform: uppercase;
}
.header .wrapper .home-background-text h1 {
  color: var(--grey-color);
}
.header .wrapper .home-background-text h2 {
  color: white;
}

@media (min-width: 992px) {
  .header .navbar {
    height: 100px;
  }
  .header .navbar-brand {
    padding: 0;
  }
  .header .navbar-brand,
  .header .navbar-brand img {
    max-width: 80px;
  }
  .header .navbar-collapse {
    background-color: transparent;
  }
}
@media screen and (min-width: 960px) and (max-width: 1440px) {
  .header .wrapper .home-background-img {
    grid-column: 1/2;
  }
  .header .wrapper .home-background-svg, .header .wrapper .home-background-me {
    display: none;
  }
  .header .wrapper .home-background-text {
    grid-column: 2/4;
    padding: 0;
  }
}
@media screen and (max-width: 960px) {
  .header nav {
    position: relative;
  }
  .header .wrapper .home-background-img {
    grid-column: 1/2;
    background: url("../img/banner.webp") no-repeat center/cover;
  }
  .header .wrapper .home-background-svg {
    position: absolute;
    top: 10%;
    left: 30%;
    transform: translateX(-50%);
  }
  .header .wrapper .home-background-me {
    position: absolute;
    top: 15%;
    left: 31%;
    transform: translateX(-50%);
  }
  .header .wrapper .home-background-text {
    grid-column: 2/3;
    padding: 0;
  }
}
@media (max-width: 620px) {
  .header nav {
    position: relative;
  }
  .header .wrapper {
    width: 100%;
  }
  .header .wrapper .home-background-img {
    grid-column: 1/2;
    grid-row: 1;
    background: url("../img/banner.webp") no-repeat center/cover;
    width: 100%;
  }
  .header .wrapper .home-background-svg {
    grid-column: 1/2;
    grid-row: 1;
    position: absolute;
    top: 5%;
    left: 0;
    transform: rotate(90deg);
  }
  .header .wrapper .home-background-me {
    grid-column: 1/2;
    grid-row: 1;
    position: absolute;
    top: 6%;
  }
  .header .wrapper .home-background-text {
    grid-column: 1/2;
    grid-row: 2;
    padding: 0;
  }
}
/* ==========================================================================
   Accueil:
   ========================================================================== */
/* ==========================================================================
   Section à propos:
   ========================================================================== */
#a-propos h2 {
  color: var(--primary-color);
  font-size: 4rem;
  width: fit-content;
  margin-left: 12rem;
  padding: 0.6rem 0 0.6rem 0;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  animation: titleFadeIn 0.6s ease-in-out 0.3s;
  position: relative;
}
#a-propos h2:hover {
  text-shadow: none;
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
#a-propos .info {
  position: relative;
  grid-column: 1/2;
  grid-row: var(--grid-full);
  text-align: end;
  border-right: 2px solid;
  padding-right: 10px;
}
#a-propos .info img {
  margin-top: -1rem;
  margin-bottom: 1rem;
}
#a-propos .info div {
  display: var(--d-flex);
  margin-left: 1rem;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
  justify-content: flex-end;
}
#a-propos .info div:last-child {
  margin-bottom: 0;
}
#a-propos .info div h3 {
  color: #ebb455;
  margin-right: 0.2rem;
}
#a-propos .info div h3,
#a-propos .info div p,
#a-propos .info div a {
  font-size: 1rem;
}
#a-propos .about {
  grid-column: 2/4;
  grid-row: 1;
}
#a-propos .about p {
  text-align: justify;
  margin-bottom: 1rem;
}
#a-propos .citation {
  position: relative;
  display: var(--d-flex);
  flex-direction: column;
  justify-content: center;
  background: var(--color-contrast-lower);
  padding: 1rem;
  grid-column: 2/4;
  grid-row: 2;
}
#a-propos .citation h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#a-propos .citation h3:hover {
  cursor: default;
}
#a-propos .citation h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#a-propos .citation h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#a-propos .citation blockquote {
  padding: 0 0 0 2rem;
}
#a-propos .citation blockquote:before {
  content: "“";
  position: absolute;
  left: 0;
  font-size: 6rem;
  z-index: 0;
  color: rgba(200, 200, 200, 0.2);
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  top: 3rem;
}
#a-propos .citation blockquote:before:hover {
  text-shadow: none;
}
#a-propos .citation cite {
  color: white;
  padding: 0 0 0 2rem;
  font-weight: bold;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
}
#a-propos .citation cite:hover {
  text-shadow: none;
}
#a-propos .citation cite:before {
  content: "—";
  margin-right: 1rem;
  color: #888;
}
#a-propos .social-media-links {
  grid-column: 2/4;
  grid-row: 3;
  overflow: hidden;
  padding-bottom: 4px;
  width: 100%;
}
#a-propos .social-media-links h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#a-propos .social-media-links h3:hover {
  cursor: default;
}
#a-propos .social-media-links h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#a-propos .social-media-links h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#a-propos .social-media-links ul {
  margin: 0;
  padding: 0;
}
#a-propos .social-media-links ul li {
  display: inline;
  margin: 0;
  padding: 0;
}
#a-propos .social-media-links ul li + li {
  margin-left: 1rem;
}
#a-propos .social-media-links ul li a .bi {
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
}
#a-propos .social-media-links ul li a .bi:hover {
  text-shadow: none;
}
#a-propos .social-media-links ul li a .bi-facebook {
  color: var(--facebook-color);
}
#a-propos .social-media-links ul li a .bi-twitter-x {
  color: var(--twitter-x-color);
}
#a-propos .social-media-links ul li a .bi-instagram {
  color: var(--instagram-color);
}
#a-propos .social-media-links ul li a .bi-discord {
  color: var(--discord-color);
}
#a-propos .social-media-links ul li a.btn-linkedin {
  display: var(--d-flex);
  flex-direction: column;
  justify-content: center;
  color: white;
  background: var(--background-gradient);
}
#a-propos .social-media-links ul li a.btn-linkedin:hover {
  color: white;
}
@media screen and (min-width: 2500px) {
  #a-propos .info {
    padding-left: 10rem;
  }
}
@media screen and (max-width: 960px) {
  #a-propos .info {
    grid-column: 1/2;
    grid-row: var(--grid-full);
    width: max-content;
    align-items: flex-start;
    padding-right: 0;
  }
  #a-propos .info div {
    display: var(--d-flex);
  }
  #a-propos .about {
    grid-column: 2/3;
    grid-row: 1;
  }
  #a-propos .citation {
    grid-column: 2/3;
    grid-row: 2;
  }
  #a-propos .social-media-links {
    grid-column: 2/3;
    grid-row: 3;
  }
}
@media screen and (max-width: 620px) {
  #a-propos h2 {
    margin: 0;
  }
  #a-propos .info {
    display: var(--d-flex);
    flex-direction: column;
    border-right: none;
    grid-column: var(--grid-full);
    grid-row: 1;
  }
  #a-propos .info div {
    margin-left: 0;
  }
  #a-propos .about {
    grid-column: var(--grid-full);
    grid-row: 2;
  }
  #a-propos .citation {
    grid-column: var(--grid-full);
    grid-row: 3;
  }
  #a-propos .social-media-links {
    grid-column: var(--grid-full);
    grid-row: 4;
  }
}

/* ==========================================================================
   Section résumé:
   ========================================================================== */
#abstract {
  background-color: var(--color-contrast-lower);
}
#abstract ul + ul {
  margin-top: 2rem;
}
#abstract h2 {
  color: var(--primary-color);
  font-size: 4rem;
  width: fit-content;
  margin-left: 12rem;
  padding: 0.6rem 0 0.6rem 0;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  animation: titleFadeIn 0.6s ease-in-out 0.3s;
  position: relative;
}
#abstract h2:hover {
  text-shadow: none;
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
#abstract .hobby {
  position: relative;
  grid-column: 1/2;
  grid-row: var(--grid-full);
  border-right: 2px solid;
  padding-right: 10px;
}
#abstract .hobby i {
  display: var(--d-flex);
  align-items: flex-end;
  flex-direction: column;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
}
#abstract .hobby i:hover {
  text-shadow: none;
}
#abstract .hobby i p {
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align: end;
}
#abstract .langages {
  grid-column: 2/4;
  margin-bottom: 1rem;
}
#abstract .langages h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#abstract .langages h3:hover {
  cursor: default;
}
#abstract .langages h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#abstract .langages h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#abstract .langages ul {
  margin: 0;
}
#abstract .langages ul li {
  list-style: none;
  padding-bottom: 1rem;
  text-align: center;
  display: var(--d-flex);
  font-size: 0.9rem;
  align-items: center;
}
#abstract .langages ul li:last-child {
  padding: 0;
}
#abstract .langages .logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: none;
  margin-right: 1rem;
}
#abstract .langages .logo img {
  position: relative;
  background-clip: padding-box;
  border-radius: inherit;
  width: 54px;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
#abstract .langages .logo img:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -8px;
  /* same as border width */
  border-radius: 50%;
  /* inherit container box's radius */
  background: linear-gradient(45deg, rgb(255, 230, 0), rgb(255, 0, 128) 80%);
}
#abstract .langages .barre {
  width: 100%;
  background: #44615E;
  position: relative;
  height: 10px;
  box-shadow: 2px 2px 0 var(--black-color);
}
#abstract .langages .barre + .barre {
  margin-top: 10px;
}
#abstract .langages .barre:after {
  content: "";
  position: absolute;
  background: var(--background-gradient);
  left: 0;
  top: 0;
  bottom: 0;
}
#abstract .langages .barre[data-length="10"]:after {
  width: 10%;
}
#abstract .langages .barre[data-length="11"]:after {
  width: 11%;
}
#abstract .langages .barre[data-length="12"]:after {
  width: 12%;
}
#abstract .langages .barre[data-length="13"]:after {
  width: 13%;
}
#abstract .langages .barre[data-length="14"]:after {
  width: 14%;
}
#abstract .langages .barre[data-length="15"]:after {
  width: 15%;
}
#abstract .langages .barre[data-length="16"]:after {
  width: 16%;
}
#abstract .langages .barre[data-length="17"]:after {
  width: 17%;
}
#abstract .langages .barre[data-length="18"]:after {
  width: 18%;
}
#abstract .langages .barre[data-length="19"]:after {
  width: 19%;
}
#abstract .langages .barre[data-length="20"]:after {
  width: 20%;
}
#abstract .langages .barre[data-length="21"]:after {
  width: 21%;
}
#abstract .langages .barre[data-length="22"]:after {
  width: 22%;
}
#abstract .langages .barre[data-length="23"]:after {
  width: 23%;
}
#abstract .langages .barre[data-length="24"]:after {
  width: 24%;
}
#abstract .langages .barre[data-length="25"]:after {
  width: 25%;
}
#abstract .langages .barre[data-length="26"]:after {
  width: 26%;
}
#abstract .langages .barre[data-length="27"]:after {
  width: 27%;
}
#abstract .langages .barre[data-length="28"]:after {
  width: 28%;
}
#abstract .langages .barre[data-length="29"]:after {
  width: 29%;
}
#abstract .langages .barre[data-length="30"]:after {
  width: 30%;
}
#abstract .langages .barre[data-length="31"]:after {
  width: 31%;
}
#abstract .langages .barre[data-length="32"]:after {
  width: 32%;
}
#abstract .langages .barre[data-length="33"]:after {
  width: 33%;
}
#abstract .langages .barre[data-length="34"]:after {
  width: 34%;
}
#abstract .langages .barre[data-length="35"]:after {
  width: 35%;
}
#abstract .langages .barre[data-length="36"]:after {
  width: 36%;
}
#abstract .langages .barre[data-length="37"]:after {
  width: 37%;
}
#abstract .langages .barre[data-length="38"]:after {
  width: 38%;
}
#abstract .langages .barre[data-length="39"]:after {
  width: 39%;
}
#abstract .langages .barre[data-length="40"]:after {
  width: 40%;
}
#abstract .langages .barre[data-length="41"]:after {
  width: 41%;
}
#abstract .langages .barre[data-length="42"]:after {
  width: 42%;
}
#abstract .langages .barre[data-length="43"]:after {
  width: 43%;
}
#abstract .langages .barre[data-length="44"]:after {
  width: 44%;
}
#abstract .langages .barre[data-length="45"]:after {
  width: 45%;
}
#abstract .langages .barre[data-length="46"]:after {
  width: 46%;
}
#abstract .langages .barre[data-length="47"]:after {
  width: 47%;
}
#abstract .langages .barre[data-length="48"]:after {
  width: 48%;
}
#abstract .langages .barre[data-length="49"]:after {
  width: 49%;
}
#abstract .langages .barre[data-length="50"]:after {
  width: 50%;
}
#abstract .langages .barre[data-length="51"]:after {
  width: 51%;
}
#abstract .langages .barre[data-length="52"]:after {
  width: 52%;
}
#abstract .langages .barre[data-length="53"]:after {
  width: 53%;
}
#abstract .langages .barre[data-length="54"]:after {
  width: 54%;
}
#abstract .langages .barre[data-length="55"]:after {
  width: 55%;
}
#abstract .langages .barre[data-length="56"]:after {
  width: 56%;
}
#abstract .langages .barre[data-length="57"]:after {
  width: 57%;
}
#abstract .langages .barre[data-length="58"]:after {
  width: 58%;
}
#abstract .langages .barre[data-length="59"]:after {
  width: 59%;
}
#abstract .langages .barre[data-length="60"]:after {
  width: 60%;
}
#abstract .langages .barre[data-length="61"]:after {
  width: 61%;
}
#abstract .langages .barre[data-length="62"]:after {
  width: 62%;
}
#abstract .langages .barre[data-length="63"]:after {
  width: 63%;
}
#abstract .langages .barre[data-length="64"]:after {
  width: 64%;
}
#abstract .langages .barre[data-length="65"]:after {
  width: 65%;
}
#abstract .langages .barre[data-length="66"]:after {
  width: 66%;
}
#abstract .langages .barre[data-length="67"]:after {
  width: 67%;
}
#abstract .langages .barre[data-length="68"]:after {
  width: 68%;
}
#abstract .langages .barre[data-length="69"]:after {
  width: 69%;
}
#abstract .langages .barre[data-length="70"]:after {
  width: 70%;
}
#abstract .langages .barre[data-length="71"]:after {
  width: 71%;
}
#abstract .langages .barre[data-length="72"]:after {
  width: 72%;
}
#abstract .langages .barre[data-length="73"]:after {
  width: 73%;
}
#abstract .langages .barre[data-length="74"]:after {
  width: 74%;
}
#abstract .langages .barre[data-length="75"]:after {
  width: 75%;
}
#abstract .langages .barre[data-length="76"]:after {
  width: 76%;
}
#abstract .langages .barre[data-length="77"]:after {
  width: 77%;
}
#abstract .langages .barre[data-length="78"]:after {
  width: 78%;
}
#abstract .langages .barre[data-length="79"]:after {
  width: 79%;
}
#abstract .langages .barre[data-length="80"]:after {
  width: 80%;
}
#abstract .langages .barre[data-length="81"]:after {
  width: 81%;
}
#abstract .langages .barre[data-length="82"]:after {
  width: 82%;
}
#abstract .langages .barre[data-length="83"]:after {
  width: 83%;
}
#abstract .langages .barre[data-length="84"]:after {
  width: 84%;
}
#abstract .langages .barre[data-length="85"]:after {
  width: 85%;
}
#abstract .langages .barre[data-length="86"]:after {
  width: 86%;
}
#abstract .langages .barre[data-length="87"]:after {
  width: 87%;
}
#abstract .langages .barre[data-length="88"]:after {
  width: 88%;
}
#abstract .langages .barre[data-length="89"]:after {
  width: 89%;
}
#abstract .langages .barre[data-length="90"]:after {
  width: 90%;
}
#abstract .langages .barre[data-length="91"]:after {
  width: 91%;
}
#abstract .langages .barre[data-length="92"]:after {
  width: 92%;
}
#abstract .langages .barre[data-length="93"]:after {
  width: 93%;
}
#abstract .langages .barre[data-length="94"]:after {
  width: 94%;
}
#abstract .langages .barre[data-length="95"]:after {
  width: 95%;
}
#abstract .langages .barre[data-length="96"]:after {
  width: 96%;
}
#abstract .langages .barre[data-length="97"]:after {
  width: 97%;
}
#abstract .langages .barre[data-length="98"]:after {
  width: 98%;
}
#abstract .langages .barre[data-length="99"]:after {
  width: 99%;
}
#abstract .langages .barre[data-length="100"]:after {
  width: 100%;
}
#abstract .langages .btn-html {
  background: var(--color-html);
  width: 3rem;
  display: var(--d-flex);
  justify-content: center;
  margin-left: 1rem;
  color: white;
}
#abstract .langages .btn-css {
  background: var(--color-css);
  width: 3rem;
  display: var(--d-flex);
  justify-content: center;
  margin-left: 1rem;
  color: white;
}
#abstract .langages .btn-sass {
  background: var(--color-sass);
  width: 3rem;
  display: var(--d-flex);
  justify-content: center;
  margin-left: 1rem;
  color: white;
}
#abstract .langages .btn-js {
  background: var(--color-js);
  width: 3rem;
  display: var(--d-flex);
  justify-content: center;
  margin-left: 1rem;
  color: white;
}
#abstract .langages .btn-php {
  background: var(--color-php);
  width: 3rem;
  display: var(--d-flex);
  justify-content: center;
  margin-left: 1rem;
  color: white;
}
#abstract .langages .btn-git {
  background: var(--color-git);
  width: 3rem;
  display: var(--d-flex);
  justify-content: center;
  margin-left: 1rem;
  color: white;
}
#abstract .education {
  grid-column: 2/3;
}
#abstract .education h3,
#abstract .experience h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#abstract .education h3:hover,
#abstract .experience h3:hover {
  cursor: default;
}
#abstract .education h3:hover:after,
#abstract .experience h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#abstract .education h3:after,
#abstract .experience h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#abstract .education .date,
#abstract .experience .date {
  color: white;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  font-size: 1.2rem;
  font-weight: 900;
  background-color: var(--background-color);
  width: fit-content;
  padding: 0.2rem;
  box-shadow: 0 0 6px var(--black-color);
}
#abstract .education .date:hover,
#abstract .experience .date:hover {
  text-shadow: none;
}
#abstract .education .name,
#abstract .experience .name {
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
}
#abstract .education .name:hover,
#abstract .experience .name:hover {
  text-shadow: none;
}
#abstract .education .description,
#abstract .experience .description {
  color: white;
  font-size: 1.2rem;
}
#abstract .experience {
  grid-column: 3/4;
}
@media screen and (min-width: 2500px) {
  #abstract .hobby {
    padding-left: 10rem;
  }
}
@media screen and (max-width: 620px) {
  #abstract h2 {
    margin: 0;
  }
  #abstract .hobby {
    align-content: center;
    grid-column: var(--grid-full);
    grid-row: 1;
    padding-right: 0;
    border-right: none;
    border-bottom: 2px solid;
    display: var(--d-flex);
    justify-content: space-evenly;
  }
  #abstract .hobby i {
    display: inline;
  }
  #abstract .hobby i + i {
    margin-top: 0;
  }
  #abstract .hobby i p {
    display: none;
  }
  #abstract .langages {
    grid-column: var(--grid-full);
    grid-row: 2;
  }
  #abstract .education {
    grid-column: var(--grid-full);
    grid-row: 3;
  }
  #abstract .experience {
    grid-column: var(--grid-full);
    grid-row: 4;
  }
}

/* ==========================================================================
   Section projets:
   ========================================================================== */
#projects {
  position: relative;
}
#projects h2 {
  color: var(--primary-color);
  font-size: 4rem;
  width: fit-content;
  margin-left: 12rem;
  padding: 0.6rem 0 0.6rem 0;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  animation: titleFadeIn 0.6s ease-in-out 0.3s;
  position: relative;
}
#projects h2:hover {
  text-shadow: none;
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
#projects ul {
  margin: 0;
}
#projects ul li {
  list-style: none;
  padding-bottom: 1rem;
  display: var(--d-flex);
  flex-direction: column;
  font-size: 0.9rem;
}
#projects ul li#project-kelenscorp {
  grid-column: 1/2;
}
#projects ul li#project-lafunattitude {
  grid-column: 2/3;
}
#projects ul li#project-hydaria {
  grid-column: 3/4;
}
#projects ul li:last-child {
  grid-column: 1/2;
  padding: 0;
}
#projects ul li h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#projects ul li h3:hover {
  cursor: default;
}
#projects ul li h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#projects ul li h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#projects ul li .img-projects {
  text-align: center;
  color: white;
}
#projects ul li .img-projects img {
  width: max-content;
  max-height: 400px;
  padding: 10px;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity ease-in-out 0.2s;
}
#projects ul li .img-projects img:hover {
  opacity: 1;
}
@media screen and (max-width: 620px) {
  #projects h2 {
    margin: 0;
  }
  #projects li {
    grid-column: var(--grid-full) !important;
    grid-row: 1;
  }
  #projects li#project-kelenscorp {
    grid-row: 1;
  }
  #projects li#project-lafunattitude {
    grid-row: 2;
  }
  #projects li#project-hydaria {
    grid-row: 3;
  }
}

/* ==========================================================================
   CV:
   ========================================================================== */
#p-cv h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#p-cv h3:hover {
  cursor: default;
}
#p-cv h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#p-cv h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}

/* ==========================================================================
   Section CV:
   ========================================================================== */
#cv {
  text-align: center;
}

/* ==========================================================================
   À propos:
   ========================================================================== */
#p-propos .accordion {
  --bs-accordion-bg: var(--blue-color);
  margin-bottom: 2rem;
}
#p-propos .accordion:last-child {
  margin-bottom: 0;
}
#p-propos .accordion .accordion-item {
  border: none;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
}
#p-propos .accordion .accordion-item .accordion-header h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#p-propos .accordion .accordion-item .accordion-header h3:hover {
  cursor: default;
}
#p-propos .accordion .accordion-item .accordion-header h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#p-propos .accordion .accordion-item .accordion-header h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#p-propos .accordion .accordion-item .accordion-header .accordion-button {
  box-shadow: none;
  border-bottom: 2px solid var(--black-color);
}
#p-propos .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--blue-color);
}
#p-propos .accordion .accordion-item .accordion-body h5 {
  margin-bottom: 0.4rem;
}
#p-propos .accordion .accordion-item .accordion-body p {
  text-align: justify;
}
#p-propos .accordion .accordion-item .accordion-body p + h5 {
  margin-top: 1rem;
}

/* ==========================================================================
   SETUP:
   ========================================================================== */
#p-setup {
  /* ==========================================================================
       Section Informations:
  ========================================================================== */
  /* ==========================================================================
        Section Images:
  ========================================================================== */
}
#p-setup #news {
  /* ==========================================================================
      Responsive:
  ========================================================================== */
}
#p-setup #news h2 {
  color: var(--primary-color);
  font-size: 4rem;
  width: fit-content;
  margin-left: 12rem;
  padding: 0.6rem 0 0.6rem 0;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  animation: titleFadeIn 0.6s ease-in-out 0.3s;
  position: relative;
}
#p-setup #news h2:hover {
  text-shadow: none;
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
#p-setup #news article {
  padding: 2rem 0 2rem 0;
}
#p-setup #news article:last-child {
  margin-bottom: 0;
}
#p-setup #news article .container h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#p-setup #news article .container h3:hover {
  cursor: default;
}
#p-setup #news article .container h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#p-setup #news article .container h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#p-setup #news article .container .wrapper {
  place-items: center;
}
#p-setup #news article .container .wrapper img {
  object-fit: contain;
}
#p-setup #news article .container .wrapper h5 {
  margin-bottom: 0.4rem;
}
#p-setup #news article .container .wrapper p {
  text-align: justify;
}
#p-setup #news article .container .wrapper p + h5 {
  margin-top: 1rem;
}
#p-setup #news article#comment-ai-je-fait-pour-avoir-un-tel-setup .text-right-part {
  grid-column: 2/4;
  grid-row: 1;
}
#p-setup #news article#comment-ai-je-fait-pour-avoir-un-tel-setup img {
  grid-column: 1/2;
  grid-row: 1;
}
#p-setup #news article#pourquoi-ce-matériel {
  background-color: var(--color-contrast-lower);
}
#p-setup #news article#pourquoi-ce-matériel .text-left-part {
  grid-column: 1/3;
  grid-row: 1;
}
#p-setup #news article#pourquoi-ce-matériel img {
  grid-column: 3/4;
  grid-row: 1;
}
#p-setup #news article#est-il-voué-à-évoluer .text-right-part {
  grid-column: 2/4;
  grid-row: 1;
}
#p-setup #news article#est-il-voué-à-évoluer img {
  grid-column: 1/2;
  grid-row: 1;
}
@media screen and (min-width: 2500px) {
  #p-setup #news article#comment-ai-je-fait-pour-avoir-un-tel-setup .text-right-part, #p-setup #news article#est-il-voué-à-évoluer .text-right-part {
    display: var(--d-flex);
    flex-direction: column;
    justify-content: center;
  }
  #p-setup #news article#pourquoi-ce-matériel .text-left-part {
    display: var(--d-flex);
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (max-width: 620px) {
  #p-setup #news h2 {
    margin-left: 0;
  }
  #p-setup #news article#comment-ai-je-fait-pour-avoir-un-tel-setup .container .wrapper .text-left-part,
  #p-setup #news article#comment-ai-je-fait-pour-avoir-un-tel-setup .container .wrapper .text-right-part, #p-setup #news article#pourquoi-ce-matériel .container .wrapper .text-left-part,
  #p-setup #news article#pourquoi-ce-matériel .container .wrapper .text-right-part, #p-setup #news article#est-il-voué-à-évoluer .container .wrapper .text-left-part,
  #p-setup #news article#est-il-voué-à-évoluer .container .wrapper .text-right-part {
    grid-column: 1/4;
    grid-row: 1;
  }
  #p-setup #news article#comment-ai-je-fait-pour-avoir-un-tel-setup .container .wrapper img, #p-setup #news article#pourquoi-ce-matériel .container .wrapper img, #p-setup #news article#est-il-voué-à-évoluer .container .wrapper img {
    height: max-content;
    display: table-cell;
    vertical-align: middle;
    grid-column: 1/4;
    grid-row: 2;
  }
}
#p-setup #pictures {
  background-color: var(--color-contrast-lower);
  /* ==========================================================================
      Responsive:
  ========================================================================== */
}
#p-setup #pictures h2 {
  color: var(--primary-color);
  font-size: 4rem;
  width: fit-content;
  margin-left: 12rem;
  padding: 0.6rem 0 0.6rem 0;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  animation: titleFadeIn 0.6s ease-in-out 0.3s;
  position: relative;
}
#p-setup #pictures h2:hover {
  text-shadow: none;
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
#p-setup #pictures .container {
  display: var(--d-flex);
  flex-direction: column;
}
#p-setup #pictures .container .img-setup {
  text-align: center;
}
#p-setup #pictures .container .img-setup img {
  width: 25%;
  height: fit-content;
  padding: 10px;
  opacity: 0.8;
  cursor: pointer;
  transition: ease-in-out 0.2s;
}
#p-setup #pictures .container .img-setup img:hover {
  opacity: 1;
}
@media screen and (max-width: 620px) {
  #p-setup #pictures h2 {
    margin-left: 0;
  }
}

/* ==========================================================================
   PROJETS:
   ========================================================================== */
#p-kelenscorp,
#p-hydaria,
#p-bountyfac {
  /* ==========================================================================
       Section résumé:
  ========================================================================== */
}
#p-kelenscorp #summary,
#p-hydaria #summary,
#p-bountyfac #summary {
  /* ==========================================================================
      Responsive:
  ========================================================================== */
}
#p-kelenscorp #summary .skills-project,
#p-hydaria #summary .skills-project,
#p-bountyfac #summary .skills-project {
  display: var(--d-flex);
  margin-bottom: 0.4rem;
}
#p-kelenscorp #summary .skills-project li,
#p-hydaria #summary .skills-project li,
#p-bountyfac #summary .skills-project li {
  margin-right: 0.4rem;
  padding: 0;
}
#p-kelenscorp #summary .skills-project li:last-child,
#p-hydaria #summary .skills-project li:last-child,
#p-bountyfac #summary .skills-project li:last-child {
  margin: 0;
}
#p-kelenscorp #summary .skills-project li span,
#p-hydaria #summary .skills-project li span,
#p-bountyfac #summary .skills-project li span {
  box-shadow: inset 0 1px 8px var(--black-color), 1px 4px 0 var(--black-color);
  transition: all 0.4s ease-in-out;
  background-color: var(--rose-color);
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  border-radius: 20px;
  padding: 0.2rem;
  text-align: center;
  vertical-align: middle;
  font-weight: 900;
  line-height: 0;
  width: fit-content;
  color: var(--white-color);
}
#p-kelenscorp #summary .skills-project li span:hover,
#p-hydaria #summary .skills-project li span:hover,
#p-bountyfac #summary .skills-project li span:hover {
  text-shadow: none;
}
#p-kelenscorp #summary .skills-project li span:hover,
#p-hydaria #summary .skills-project li span:hover,
#p-bountyfac #summary .skills-project li span:hover {
  box-shadow: none;
  text-shadow: none;
}
#p-kelenscorp #summary article,
#p-hydaria #summary article,
#p-bountyfac #summary article {
  padding: 2rem 0 2rem 0;
}
#p-kelenscorp #summary article:last-child,
#p-hydaria #summary article:last-child,
#p-bountyfac #summary article:last-child {
  margin-bottom: 0;
}
#p-kelenscorp #summary article .container h3,
#p-hydaria #summary article .container h3,
#p-bountyfac #summary article .container h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#p-kelenscorp #summary article .container h3:hover,
#p-hydaria #summary article .container h3:hover,
#p-bountyfac #summary article .container h3:hover {
  cursor: default;
}
#p-kelenscorp #summary article .container h3:hover:after,
#p-hydaria #summary article .container h3:hover:after,
#p-bountyfac #summary article .container h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#p-kelenscorp #summary article .container h3:after,
#p-hydaria #summary article .container h3:after,
#p-bountyfac #summary article .container h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#p-kelenscorp #summary article .container .wrapper,
#p-hydaria #summary article .container .wrapper,
#p-bountyfac #summary article .container .wrapper {
  place-items: center;
}
#p-kelenscorp #summary article .container .wrapper img,
#p-hydaria #summary article .container .wrapper img,
#p-bountyfac #summary article .container .wrapper img {
  object-fit: contain;
}
#p-kelenscorp #summary article .container .wrapper h5,
#p-hydaria #summary article .container .wrapper h5,
#p-bountyfac #summary article .container .wrapper h5 {
  margin-bottom: 0.4rem;
}
#p-kelenscorp #summary article .container .wrapper p,
#p-hydaria #summary article .container .wrapper p,
#p-bountyfac #summary article .container .wrapper p {
  text-align: justify;
}
#p-kelenscorp #summary article .container .wrapper p + h5,
#p-hydaria #summary article .container .wrapper p + h5,
#p-bountyfac #summary article .container .wrapper p + h5 {
  margin-top: 1rem;
}
#p-kelenscorp #summary article#qu-est-ce-que-c-est .text-right-part,
#p-hydaria #summary article#qu-est-ce-que-c-est .text-right-part,
#p-bountyfac #summary article#qu-est-ce-que-c-est .text-right-part {
  grid-row: 1;
  grid-column: 2/4;
}
#p-kelenscorp #summary article#qu-est-ce-que-c-est img,
#p-hydaria #summary article#qu-est-ce-que-c-est img,
#p-bountyfac #summary article#qu-est-ce-que-c-est img {
  grid-row: 1;
  grid-column: 1/2;
}
#p-kelenscorp #summary article#que-proposez-vous,
#p-hydaria #summary article#que-proposez-vous,
#p-bountyfac #summary article#que-proposez-vous {
  background-color: var(--color-contrast-lower);
}
#p-kelenscorp #summary article#que-proposez-vous .text-left-part,
#p-hydaria #summary article#que-proposez-vous .text-left-part,
#p-bountyfac #summary article#que-proposez-vous .text-left-part {
  grid-row: 1;
  grid-column: 1/3;
}
#p-kelenscorp #summary article#que-proposez-vous img,
#p-hydaria #summary article#que-proposez-vous img,
#p-bountyfac #summary article#que-proposez-vous img {
  grid-row: 1;
  grid-column: 3/4;
}
#p-kelenscorp #summary article#un-site .text-right-part,
#p-hydaria #summary article#un-site .text-right-part,
#p-bountyfac #summary article#un-site .text-right-part {
  grid-row: 1;
  grid-column: 2/4;
}
#p-kelenscorp #summary article#un-site img,
#p-hydaria #summary article#un-site img,
#p-bountyfac #summary article#un-site img {
  grid-row: 1;
  grid-column: 1/2;
  border-radius: 50%;
  box-shadow: 0px 10px 6px black;
}
@media screen and (min-width: 2500px) {
  #p-kelenscorp #summary article#qu-est-ce-que-c-est .text-right-part, #p-kelenscorp #summary article#un-site .text-right-part,
  #p-hydaria #summary article#qu-est-ce-que-c-est .text-right-part,
  #p-hydaria #summary article#un-site .text-right-part,
  #p-bountyfac #summary article#qu-est-ce-que-c-est .text-right-part,
  #p-bountyfac #summary article#un-site .text-right-part {
    display: var(--d-flex);
    flex-direction: column;
    justify-content: center;
  }
  #p-kelenscorp #summary article#que-proposez-vous .text-left-part,
  #p-hydaria #summary article#que-proposez-vous .text-left-part,
  #p-bountyfac #summary article#que-proposez-vous .text-left-part {
    display: var(--d-flex);
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (max-width: 620px) {
  #p-kelenscorp #summary .skills-project,
  #p-hydaria #summary .skills-project,
  #p-bountyfac #summary .skills-project {
    flex-wrap: wrap;
  }
  #p-kelenscorp #summary .skills-project li,
  #p-hydaria #summary .skills-project li,
  #p-bountyfac #summary .skills-project li {
    padding-bottom: 0.6rem;
  }
  #p-kelenscorp #summary .skills-project li:last-child,
  #p-hydaria #summary .skills-project li:last-child,
  #p-bountyfac #summary .skills-project li:last-child {
    padding-bottom: 0;
  }
  #p-kelenscorp #summary article#qu-est-ce-que-c-est .container .wrapper .text-left-part,
  #p-kelenscorp #summary article#qu-est-ce-que-c-est .container .wrapper .text-right-part, #p-kelenscorp #summary article#que-proposez-vous .container .wrapper .text-left-part,
  #p-kelenscorp #summary article#que-proposez-vous .container .wrapper .text-right-part, #p-kelenscorp #summary article#un-site .container .wrapper .text-left-part,
  #p-kelenscorp #summary article#un-site .container .wrapper .text-right-part,
  #p-hydaria #summary article#qu-est-ce-que-c-est .container .wrapper .text-left-part,
  #p-hydaria #summary article#qu-est-ce-que-c-est .container .wrapper .text-right-part,
  #p-hydaria #summary article#que-proposez-vous .container .wrapper .text-left-part,
  #p-hydaria #summary article#que-proposez-vous .container .wrapper .text-right-part,
  #p-hydaria #summary article#un-site .container .wrapper .text-left-part,
  #p-hydaria #summary article#un-site .container .wrapper .text-right-part,
  #p-bountyfac #summary article#qu-est-ce-que-c-est .container .wrapper .text-left-part,
  #p-bountyfac #summary article#qu-est-ce-que-c-est .container .wrapper .text-right-part,
  #p-bountyfac #summary article#que-proposez-vous .container .wrapper .text-left-part,
  #p-bountyfac #summary article#que-proposez-vous .container .wrapper .text-right-part,
  #p-bountyfac #summary article#un-site .container .wrapper .text-left-part,
  #p-bountyfac #summary article#un-site .container .wrapper .text-right-part {
    grid-row: 1;
    grid-column: 1/4;
  }
  #p-kelenscorp #summary article#qu-est-ce-que-c-est .container .wrapper img, #p-kelenscorp #summary article#que-proposez-vous .container .wrapper img, #p-kelenscorp #summary article#un-site .container .wrapper img,
  #p-hydaria #summary article#qu-est-ce-que-c-est .container .wrapper img,
  #p-hydaria #summary article#que-proposez-vous .container .wrapper img,
  #p-hydaria #summary article#un-site .container .wrapper img,
  #p-bountyfac #summary article#qu-est-ce-que-c-est .container .wrapper img,
  #p-bountyfac #summary article#que-proposez-vous .container .wrapper img,
  #p-bountyfac #summary article#un-site .container .wrapper img {
    grid-row: 2;
    grid-column: 1/4;
    height: max-content;
    display: table-cell;
    vertical-align: middle;
  }
}

/* ==========================================================================
   Contact:
   ========================================================================== */
#p-contact #contact-form {
  grid-column: 1/3;
}
#p-contact #contact-form h2 {
  color: var(--primary-color);
  font-size: 4rem;
  width: fit-content;
  margin-left: 12rem;
  padding: 0.6rem 0 0.6rem 0;
  text-shadow: 1px 4px 0 black;
  transition: text-shadow 0.4s ease-in-out;
  animation: titleFadeIn 0.6s ease-in-out 0.3s;
  position: relative;
}
#p-contact #contact-form h2:hover {
  text-shadow: none;
}
@keyframes titleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
#p-contact #contact-form p {
  color: rgb(62, 62, 65);
  padding-bottom: 0.6rem;
}
#p-contact #contact-form .card {
  width: 100%;
  padding: 40px;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
#p-contact #contact-form .card .user-box {
  position: relative;
}
#p-contact #contact-form .card .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: var(--white-color);
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid var(--white-color);
  outline: none;
  background: transparent;
}
#p-contact #contact-form .card .user-box input:focus ~ label, #p-contact #contact-form .card .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #708AD4;
  font-size: 12px;
}
#p-contact #contact-form .card .user-box input .form-control:focus {
  border-color: transparent !important;
}
#p-contact #contact-form .card .user-box textarea {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: var(--white-color);
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid var(--white-color);
  outline: none;
  background: transparent;
}
#p-contact #contact-form .card .user-box textarea:focus ~ label, #p-contact #contact-form .card .user-box textarea:valid ~ label {
  top: -20px;
  left: 0;
  color: #708AD4;
  font-size: 12px;
}
#p-contact #contact-form .card .user-box textarea .form-control:focus {
  border-color: transparent !important;
}
#p-contact #contact-form .card .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: var(--white-color);
  pointer-events: none;
  transition: 0.5s;
}
#p-contact #contact-infos {
  grid-column: 3/4;
  /* ==========================================================================
      Discord:
  ========================================================================== */
}
#p-contact #contact-infos .banner,
#p-contact #contact-infos .banner-icon {
  align-items: center;
  display: var(--d-flex);
}
#p-contact #contact-infos .banner {
  background-color: #708AD4;
  border-radius: 0.3rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin: 0 0 1rem;
  min-height: 66px;
  overflow: hidden;
  padding: 9px 0;
  position: relative;
}
#p-contact #contact-infos .banner .banner-icon {
  background-color: #111114;
  border-bottom-left-radius: 0.3rem;
  border-top-left-radius: 0.3rem;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 66px;
}
#p-contact #contact-infos .banner .banner-icon:before {
  border-bottom: 5px solid transparent;
  border-left: 10px solid #111114;
  border-right: 0 solid transparent;
  border-top: 5px solid transparent;
  content: "";
  height: 0;
  left: 66px;
  position: absolute;
  right: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
}
#p-contact #contact-infos .banner .banner-title {
  align-items: center;
  display: var(--d-flex);
  font-size: 26px;
  font-weight: 700;
  padding-left: 85px;
  text-shadow: 3px 3px 4px var(--color-contrast-low);
  width: 100%;
}
#p-contact #contact-infos .banner .banner-title h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#p-contact #contact-infos .banner .banner-title h3:hover {
  cursor: default;
}
#p-contact #contact-infos .banner .banner-title h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#p-contact #contact-infos .banner .banner-title h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#p-contact #contact-infos #discord_widget.card {
  background: transparent;
  box-sizing: border-box;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
#p-contact #contact-infos #discord_widget .card-header {
  margin-bottom: 0.4rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
#p-contact #contact-infos #discord_widget .card-header h5 {
  display: var(--d-flex);
  align-items: center;
}
#p-contact #contact-infos #discord_widget .card-header h5 i {
  display: var(--d-flex);
  align-items: center;
  margin-right: 0.6rem;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content {
  padding: 15px;
  border-radius: 0.3rem;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-Discordusers {
  height: 200px;
  overflow: auto;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-discordUser {
  align-items: center;
  display: var(--d-flex);
  padding: 5px;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-userImg {
  background: rgba(0, 0, 0, 0.149) no-repeat 50%/cover;
  border-radius: 5px;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  position: relative;
  width: 20px;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-status-dnd {
  background: var(--color-error);
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-status-online {
  background: var(--color-success);
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-userStatus {
  border-radius: 50%;
  display: block;
  height: 8px;
  left: auto;
  position: absolute;
  right: -5px;
  top: -5px;
  width: 8px;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-username {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.8;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-Discordinfo {
  align-items: center;
  display: var(--d-flex);
  justify-content: space-between;
  margin-top: 16px;
}
#p-contact #contact-infos #discord_widget [data-widget=kelens_discord_widget] .kelens-content .kelens-js--Discordcount {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 620px) {
  #p-contact #contact-form {
    grid-column: 1/4;
    grid-row: 1;
  }
  #p-contact #contact-form h2 {
    margin: 0;
  }
  #p-contact #contact-infos {
    grid-column: 1/4;
    grid-row: 2;
  }
}

/* ==========================================================================
   Mentions légales:
   ========================================================================== */
#p-mentions-legales .title {
  padding-bottom: 2rem;
}
#p-mentions-legales .title h1 {
  text-align: center;
  font-size: 4rem;
  text-shadow: 0 6px 0 var(--black-color);
}
#p-mentions-legales .title h2 {
  color: var(--color-accent);
  text-align: center;
  text-shadow: 0 6px 0 var(--black-color);
}
#p-mentions-legales h3 {
  font-size: 1.75rem;
  color: #ebb455;
  position: relative;
  padding-bottom: 0.6rem !important;
  margin-bottom: 0.4rem !important;
  width: fit-content;
}
#p-mentions-legales h3:hover {
  cursor: default;
}
#p-mentions-legales h3:hover:after {
  content: "";
  position: absolute;
  width: 100%;
}
#p-mentions-legales h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--background-gradient);
  transition: width 0.4s ease-in-out;
}
#p-mentions-legales p {
  text-align: justify;
  padding-bottom: 0.6rem;
}
#p-mentions-legales p:last-child {
  padding-bottom: 0;
}

/* ==========================================================================
   Footer:
   ========================================================================== */
.footer.fixed-footer {
  bottom: 0;
  position: fixed;
  width: 100%;
}
@media screen and (max-width: 460px) {
  .footer.fixed-footer {
    position: static;
  }
}
.footer .footer--bottom {
  padding: 1.5rem 0;
  background-color: var(--color-black);
}
.footer .footer--bottom div {
  vertical-align: middle;
}
.footer .footer--bottom .footer--copyright {
  grid-column: 1/3;
  text-align: start;
  color: var(--grey-color);
}
.footer .footer--bottom .footer--legal {
  grid-column: 3/4;
  text-align: end;
}

/*# sourceMappingURL=index.css.map */