@charset "UTF-8";
@font-face {
  font-family: "retro gaming";
  src: url("../font/Retro Gaming.ttf");
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img{
    width: 100%;
    height: 100%;    
    margin:auto;
    image-rendering: auto;
    /*image-rendering: pixelated;*/
}

h2 {
  font-family: "retro gaming";
  font-size: 1.5rem;
}
@media screen and (max-width: 900px) {
  h2 {
    font-size: 1rem;
  }
}

body {
  background-image: url(../img/image-projet-porfolio-Figma.png);
  background-position: 0px 0px;
  height: 100vh;
  background-repeat: repeat;
  transition: background-image 1.5s ease-in-out;
  animation: bougerBackground 160s linear alternate infinite;
  font-family: "Retro Gaming", sans-serif;
  font-family: Arial, sans-serif;
  overflow:hidden;

}
@media screen and (max-width: 1000px) {
  body {
    overflow: auto;
  }
}
body header {
  display: flex;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 999;
}
body header #logo {
  width: 70px;
}
body header #logo #rk {
  background-color: rgba(24, 25, 31, 0);
  animation: animate 33s linear infinite;
  animation-delay: 1.3s;
}
@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
body header #logo img {
  width: 100%;
}
body header nav {
  width: 100%;
}
body header nav ul {
  height: 80px;
  display: flex;
  justify-content: flex-end;
  margin: 0 20px;
  gap: 15px;
  align-items: center;
}
body header nav ul li {
  list-style-type: none;
}
body header nav ul li a {
  font-weight: 900;
  font-family: retro gaming;
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
}
body header nav ul li a:hover {
  color: #3c67e3;
}
body header nav ul #linkedin,
body header nav ul #github {
  font-size: 40px;
  background-color: rgba(24, 25, 31, 0);
  color: #fff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5019607843), 10px 1px 12px rgba(0, 0, 0, 0.5019607843), 2px 2px 10px rgba(0, 0, 0, 0.5019607843), 2px 2px 3px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843);
  padding: 11px 19px;
  animation: animate 3s linear infinite;
  text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, 0 0 200px #0072ff;
}
body header nav ul #twitter {
  animation-delay: 0.3s;
}
body header nav ul #github {
  animation-delay: 0.1s;
}
body main {
  width: 100%;
  perspective: 1000px;
  background-position: 0px 0px;
  background-repeat: repeat;
  transition: background-image 1.5s ease-in-out;
  overflow: hidden;
  position: relative;
  animation: bougerBackground 160s linear alternate infinite;
  /* Définissez l'animation */
}
@media screen and (max-width: 1200px) {
  body main {
    overflow: initial;
  }
}
@keyframes bougerBackground {
  0% {
    background-position: 0px 0px;
  }
  25% {
    background-position: 100% 1000px;
  }
  50% {
    background-position: 50% 1500px;
  }
  100% {
    background-position: 100% 1000px;
    /* Position finale */
  }
}
body main #container-particule {
  position: relative;
  width: 100%;
}
body main #container-particule canvas {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1250px) {
  body main #container-particule canvas {
    margin-top: 100px;
  }
}
@media screen and (max-width: 900px) {
  body main #container-particule canvas {
    margin-top: 0px;
  }
}
body main .presentation {
  text-align: center;
  perspective: 1000px;
  transform: translateY(0px);
  width: 100%;
  display: flex;
  height: 90px;
  /*margin: 20px auto;*/
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* délai d'attente pour chaque image */
}
body main .presentation .first-text {
  width: 100px;
  margin: auto 20px;
  animation: boom 17s linear;
  animation-delay: 1.3s;
  transform: translateY();
}
body main .presentation .glitch,
body main .presentation .text {
  animation: animate 33s linear infinite;
  overflow: hidden;
  color: white;
  font-size: 4rem;
  width: 100%;
  font-family: retro gaming;
  position: relative;
  margin: 0 auto;
  text-align: center;
}


@media screen and (max-width: 900px) {
    body main .presentation .glitch,
    body main .presentation .text {
  font-size:3rem;
  }
}
@media screen and (max-width: 350px) {
    body main .presentation .glitch,
    body main .presentation .text {
  font-size:2rem;
  }
}
body main .presentation .first-text:nth-child(1) {
  animation-delay: 0s;
}
body main .presentation .first-text:nth-child(2) {
  animation-delay: 0.7s;
  width: 70px;
}
body main .presentation .first-text:nth-child(3) {
  animation-delay: 1.2s;
}
body main .presentation .first-text:nth-child(4) {
  animation-delay: 1.7s;
}
body .perso-container {
  position: absolute;
  bottom: 50%;
  z-index: 999;
  display: inline;
}
@media screen and (max-width: 900px) {
  body .perso-container {
    position: sticky;
    display: inline;
    left: 0;
  }
}
body .perso-container img {
  width: 100%;
}
body .perso-container img:hover {
  animation: animate 3s linear infinite;
}
body .perso-container .container-social {
  width: 100%;
  display: inline-grid;
  justify-content: left;
  flex-direction: column;
  align-items: left;
  position: sticky;
  top: 20%;
  gap: 20px;
}
body .perso-container .container-social #perso-img,
body .perso-container .container-social #linkedin,
body .perso-container .container-social #github {
  font-size: 40px;
  background-color: rgba(24, 25, 31, 0);
  color: #fff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5019607843), 10px 1px 12px rgba(0, 0, 0, 0.5019607843), 2px 2px 10px rgba(0, 0, 0, 0.5019607843), 2px 2px 3px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843);
  padding: 11px 19px;
  animation: animate 3s linear infinite;
  text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, 0 0 200px #0072ff;
}
body .perso-container .container-social #linkedine {
  animation-delay: 10.3s;
}
body .perso-container .container-social #github {
  animation-delay: 0.1s;
}
@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
body .big-dipper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: pointer;
  animation: sway 200s infinite ease-in-out alternate;
  perspective: 1000px;
}
body .big-dipper canvas {
  cursor: pointer;
  border-radius: 50%;
  animation: filter-more forwards linear 4s, shrink forwards linear 5s 3s, blink linear infinite 1.2s 3s;
  filter: blur(var(--blur-min)) contrast(var(--max-contrast)) hue-rotate(var(--hue-rotation-min));
}
body .big-dipper canvas .scope {
  width: clamp(500px, 90vmin, 1200px);
  height: clamp(500px, 90vmin, 1200px);
  border-radius: 50%;
  overflow: hidden;
}
body .big-dipper canvas.reset {
  animation: none;
}
body .circle {
  position: absolute;
}
@keyframes filter-more {
  from {
    transform: translate(100px);
    filter: blur(var(--blur-min)) contrast(10) hue-rotate(var(--hue-rotation));
  }
  to {
    transform: scale(0.15);
    filter: blur(var(--blur-max)) contrast(var(--max-contrast)) hue-rotate(var(--hue-rotation));
  }
}
@keyframes shrink {
  to {
    transform: scale(0.25);
  }
}
@keyframes blink {
  28% {
    opacity: 1;
  }
  30% {
    opacity: 0.9;
  }
  32% {
    opacity: 0.8;
  }
  34% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  52% {
    opacity: 0.6;
  }
  from, 54%, to {
    opacity: 1;
  }
}
@keyframes sway {
  0% {
    transform: rotateZ(-2deg);
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(5000px, 4000, 300);
  }
  50% {
    transform: translate3d(200px, 200px, 200px);
  }
  100% {
    transform: translate3d(200px, -200px, -200px);
    transform: rotateZ(2deg);
  }
}
body .perso {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  max-width:95%;
  margin: auto;
}
body .perso .loader-container {
  overflow: hidden;
  animation: over 4s linear forwards;
}
body .perso .loader-container .ball {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: linear-gradient(rgb(221, 130, 12), rgba(11, 11, 11, 0.532), indigo);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: all 0.3s linear;
  animation: bounce 20s linear forwards infinite;
  rotate: -360deg;
}
@keyframes bounce {
  0% {
    width: 50px;
    height: 50px;
    top: -70px;
  }
  25% {
    width: 50px;
    height: 50px;
    top: 50%;
  }
  35% {
    width: 80px;
    height: 80px;
  }
  45% {
    right: 100px;
    width: 50px;
    height: 50px;
  }
  65% {
    width: 80px;
    height: 80px;
    rotate: 180deg;
  }
  85% {
    width: 50px;
    height: 50px;
  }
  100% {
    width: 700px;
    height: 700px;
  }
}
body .perso #container-content {
    width:100%;
    max-width:1400px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: initial;
    overflow:hidden;
    margin: auto;
    justify-content: center;
    flex-direction: row;
}
@media screen and (max-width: 970px) {
  body .perso #container-content {
    width: 100%;
    display: block;
  }
}
body .perso #container-content .skills {
  width: 100%;
  max-width: 820px;
  margin-left: 20px;
  text-align: center;
  perspective: 1000px;
}
@media screen and (max-width: 1300px) {
  body .perso #container-content .skills {
    margin-left: 85px;
    width: 100%;
  }
}
@media screen and (max-width: 900px) {
  body .perso #container-content .skills {
    margin-left: 0px;
    width: 100%;
  }
}
body .perso #container-content .skills .letter-skills {
  width: 100%;
  -webkit-mix-blend-mode: screen;
  mix-blend-mode: screen;
  color: #ffffff;
  font-size: 1.6rem;
  white-space: nowrap;
  font-family: retro gaming;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media screen and (max-width: 1200px) {
  body .perso #container-content .skills .letter-skills {
    font-size: 1.6rem;
    
  }
}
@media screen and (max-width: 600px) {
  body .perso #container-content .skills .letter-skills {
    font-size: 0.9rem;
    
  }
}
body .perso #container-content .skills .skills-container {
  width: 100%;
  font-family: retro gaming;
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
  margin: auto;
}
body .perso #container-content .skills .skills-container .letter-skills {
  max-width: 172px;
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  font-size: 1.6rem;
  animation: po 10s ease-in-out infinite;
  box-shadow: 4px white;
  font:900;
  
  font-family: retro gaming;
}
@media screen and (max-width: 1300px) {
  body .perso #container-content .skills .skills-container .letter-skills {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 1220px) {
  body .perso #container-content .skills .skills-container .letter-skills {
    font-size: 1.4rem;
    /*width: 90px;*/
  }
}
body .perso #container-content .skills .skills-container .material-container {
  margin: auto;
  width: 100%;
}
@keyframes po {
  0% {
    transform: rotateY(0);
  }
  25% {
    transform: rotateY(360deg);
  }
}
body .perso #container-content .content-card {
  perspective: 1000px;
  width: 100%;
  height: 450px;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  margin: auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  margin: 50px auto;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
}
body .perso #container-content .content-card:hover {
  width: 100%;
  max-width: 700px;
  transform: rotateY(180deg);
  transition: transform 0.1s;
}
body .perso #container-content .content-card .front-card {
  background-image: url(../img/karim.webp);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  max-width:450px;
  height: 450px;
  background-size: contain;
  animation: rotate 15s ease-in-out infinite;
  
  
}

 #img-me{
    width:100%;
    max-width:300px;
    /*height:450px;*/
     
 }

body .perso #container-content .content-card .front-card img {
  display: none;
}
@keyframes rotate {
  0%, 10% {
    transform: rotate3d(0, 0, 0, -20deg);
  }
  20% {
    transform: rotate3d(1, 1, 0.2, 30deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, -20deg);
  }
}
body .perso #container-content .content-card .front-card,
body .perso #container-content .content-card .back-card {
  position: absolute;
  height: 100%;
  max-width: 90%;
  width: 100%;
  color: rgba(3, 68, 106, 0.5490196078);
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
}
body .perso #container-content .content-card .back-card {
  background: rgba(3, 68, 106, 0.2509803922);
  color: white;
  font-size: 1rem;
  width: 100%;
  letter-spacing: 2px;
  margin: 0 auto;
  transform: rotateY(180deg);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 400;
  background-image: linear-gradient(115deg, transparent 0%, rgb(0, 231, 255) 30%, rgb(255, 0, 231) 70%, transparent 100%);
  animation: holo 10s ease infinite;
}
body .perso #container-content .content-card .back-card .first-message{
    width:100%;
    height:100%;
}
@keyframes holo {
  0%, 5% {
    opacity: 0.8;
    background-position: 0% 0%;
  }
  10% {
    opacity: 0.85;
    background-position: 0% 0%;
  }
  20% {
    background-position: 100% 100%;
    opacity: 1;
  }
  55% {
    background-position: 0% 0%;
  }
  100% {
    opacity: 0.8;
  }
}
body .perso #container-content .content-card .back-card .messages {
  margin: 0 auto;
  max-width: 300px;
}
body .perso #container-content .content-card .back-card .messages .first-text {
  width: 100%;
}
body .perso #container-content .content-card .back-card .messages .first-text .me-text {
  font-size: 1.2rem;
  letter-spacing: 2px;
  width: 90%;
  height: 50px;
  overflow: hidden;
  position:absolute;
  top:12;
}
@media screen and (max-width: 1300px) {
  body .perso #container-content .content-card .back-card .messages .first-text .me-text {
    font-size: 1rem;
  }
}
body .perso #container-content .content-card .option-text {
  padding: 1px;
  text-align: left;
  right: 5px;
  position: absolute;
  bottom: 0px;
}
body .perso #container-content .content-card .option-text button {
  width: 100px;
  height: 30px;
  background-color: #0072ff;
  border: 1px solid rebeccapurple;
  animation: animate 20s linear infinite;
  border-radius: 8px;
  cursor: pointer;
}
body .perso #container-content .content-card .option-text .btn-4 {
  background-color: #4dccc6;
  background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  line-height: 42px;
  padding: 0;
  border: none;
}
body .perso #container-content .content-card .option-text .btn-4:hover {
  background-color: #89d8d3;
  background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
body .perso #container-content .content-card .option-text .btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
body .perso #container-content .content-card .option-text .btn-4:before,
body .perso #container-content .content-card .option-text .btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.9), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.9), inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
  transition: all 0.3s ease;
}
body .perso #container-content .content-card .option-text .btn-4:before {
  height: 0%;
  width: 0.1px;
}
body .perso #container-content .content-card .option-text .btn-4:after {
  width: 0%;
  height: 0.1px;
}
body .perso #container-content .content-card .option-text .btn-4:hover:before {
  height: 100%;
}
body .perso #container-content .content-card .option-text .btn-4:hover:after {
  width: 100%;
}
body .perso #container-content .content-card .option-text .btn-4 span:before,
body .perso #container-content .content-card .option-text .btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.9), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.9), inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
  transition: all 0.3s ease;
}
body .perso #container-content .content-card .option-text .btn-4 span:before {
  width: 0.1px;
  height: 0%;
}
body .perso #container-content .content-card .option-text .btn-4 span:after {
  width: 0%;
  height: 0.1px;
}
body .perso #container-content .content-card .option-text .btn-4 span:hover:before {
  height: 100%;
}
body .perso #container-content .content-card .option-text .btn-4 span:hover:after {
  width: 100%;
}
body .perso #container-content .content-card .img-me {
  width: 100%;
  height: 100%;
  margin: 50px auto;
}
body .perso #container-content .projet-container {
  width: 100%;
  
  /*max-width: 500px;*/
  height: 400px;
  overflow-y: auto;
  /*margin: 20px auto;*/
  overflow:scroll;
  display:flex;
  flex-direction:column;
  /*justify-content:center;*/
  align-items:center;
}
body .perso #container-content .projet-container::-webkit-scrollbar {
  background-color: rgba(243, 12, 12, 0);
  display: none;
}
body .perso #container-content .projet-container::-webkit-scrollbar-corner {
  display: none;
}
body .perso #container-content .projet-container .projet-card {
  padding: 20px;
  gap: 30px;
}
@media screen and (max-width: 900px) {
  body .perso #container-content .projet-container .projet-card {
    gap: 40px;
  }
}
body .perso #container-content .projet-container .projet-card .card {
  background: #191c29;
  position: relative;
  border-radius: 6px;
  align-items: center;
  text-align: center;
  display: flex;
  color: rgba(88, 199, 250, 0);
  cursor: pointer;
  width: 100%;
  max-width:300px;
}
@media screen and (max-width: 900px) {
  body .perso #container-content .projet-container .projet-card .card {
    gap: 30px;
  }
}
body .perso #container-content .projet-container .projet-card .card:hover {
  color: rgb(88, 199, 250);
  transition: color 1s;
}
body .perso #container-content .projet-container .projet-card .card:hover:before, body .perso #container-content .projet-container .projet-card .card:hover:after {
  animation: none;
  opacity: 0;
}
body .perso #container-content .projet-container .projet-card .card::before {
    content: "";
    width: 104%;
    height: 104%;
    border-radius: 8px;
    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
    transition: opacity 0.5s;
    position: absolute;
    z-index: -1;
    /* top: -5%; */
    left: -2%;
    animation: spin 2.5s linear infinite;
}
body .perso #container-content .projet-container .projet-card .card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
  transition: opacity 0.5s;
  animation: spin 2.5s linear infinite;
}
body .perso #container-content .projet-container .projet-card .card .modal-content {
  visibility: hidden;
  display: none;
  overflow: scroll;
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  75% {
    scale: 0.97;
  }
  100% {
    --rotate: 360deg;
  }
}
body .perso #container-content .projet-container .projet-card img {
  /*padding: 10px;*/
  width: 100%;
  height: inherit;
}

.modal {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
  background-position: center;
  background-size: 100%;
  opacity: 1;
  z-index: 2;
  position: absolute;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: scroll;
  width: 100%;
  max-width: 80%;
  height: 100%;
  max-height: 80%;
  top: 10%;
  left: 10%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 12px 28px 0px rgba(140, 149, 159, 0.3);
  transition: all 0.5s ease-in-out;
  animation-name: modal-open;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  text-align: center;
  
}
@keyframes modal-open {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.modal .back-card .messages {
  margin: 20px auto;
}
.modal .back-card .messages .first-message {
  width: 90%;
  margin: 0 auto;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.modal .back-card .messages .first-message .me-text {
  font-size: 1.3rem;
  letter-spacing: 2px;
  width: 100%;
  font-weight: 900;
  position:absolute;
  top:12;
}
.me-text{
    position:absolute;
    top:12;
    padding:9px;
    text-align:center;
}
@media screen and (max-width: 900px) {
  .modal {
    bottom: 0;
  }
}
.modal::-webkit-scrollbar {
  background-color: rgba(243, 12, 12, 0);
  display: none;
}
.modal::-webkit-scrollbar-corner {
  display: none;
}
.modal .modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  visibility: visible;
}
.modal .modal-content button {
  visibility: hidden;

}
.modal .modal-content .icon-close {
  width: 100%;
  top: 0;
  position: sticky;
  text-align: right;
  z-index: 999;
}
.modal .modal-content .icon-close .close {
  background-color: #f30c0c;
  border-radius: 10px;
  top: 0%;
  width: 1px;
  text-align: center;
  position: sticky;
  color: #ffffff;
  font-size: 4rem;
  cursor: pointer;
}
.modal .modal-icons {
  width: 100%;
  position: sticky;
  background: url(../img/image-projet\ porfolio.png);
  left: 50%;
  transform: translateX(-50%, -50%);
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.modal .modal-icons .language {
  width: 100%;
  padding: 15px;
}
.modal .modal-icons .language picture img {
    width:-webkit-fill-available;
  height: auto;
}
.modal .modal-icons .language .retro-text {
  font-family: retro Gaming;
  font-size: 2rem;
}
@media screen and (max-width: 900px) {
  .modal .modal-icons .language .retro-text {
    font-size: 1.2rem;
  }
}
.modal .modal-icons .icon-img {
  padding: 5px;
}
.modal .modal-icons .p-language {
  display: inline-grid;
  font-size: 1.2rem;
  padding: 5px;
  font-family: retro gaming;
  animation: animate 33s linear infinite;
}
@media screen and (max-width: 900px) {
  .modal .modal-icons .p-language {
    font-size: 1.2rem;
  }
}
.outil{
    width:100%;
    padding:10px;
    margin: auto;
    display: flex;
    justify-content: center;
    max-width: 90%;
    flex-wrap: wrap;
    
}
.img-tools{
    height:80px;
}
.img-tools img{
    width:100%;
    height:100%;
}
.modal .modal-icons span {
  font-family: retro gaming;
  font-family: bolder;
  animation: animate 33s linear infinite;
  text-transform: uppercase;
  padding: 5px;
  font-size: 1.2rem;
}
.modal .role-projet {
  padding: 10px;
  width: 100%;
  margin: 30px auto;
}
.modal .role-projet .description-projet .retro-text {
  font-size: 2rem;
}
@media screen and (max-width: 900px) {
  .modal .role-projet .description-projet .retro-text {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 500px) {
  .modal .role-projet .description-projet .retro-text {
    font-size: 1.2rem;
  }
}
.modal .link-website {
  width: 100%;
  text-align: right;
  padding: 20px;
}
.modal .link-website .btn-link-website {
  font-size: 1.5rem;
  color: #ffffff;
  text-decoration: none;
  text-transform: none;
  border: 2px solid red;
  padding: 5px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.1921568627);
  animation: animate 33s linear infinite;
}
.modal .link-website .btn-link-website:hover {
  font-size: 1.4rem;
  animation: animate 10s linear infinite;
}/*# sourceMappingURL=style.css.map */