/* @media only screen and (-webkit-min-device-pixel-ratio: 2) {  */
@media only screen and (max-width: 600px) {
  header {
    height: 100vh;
  }

  div#en-tete {
    width: 100%;
    height: 60vh;
  }
  div#en-tete h1 {
    font-size: 8vw;
    padding: 3vw;
  }

  div#en-tete h2 {
    font-size: 3vw;
    padding: 3vw;
  }

  div#en-tete pre {
    font-size: 3vw;
    width: 90vw;
    height: 780px !important;
  }

  span.material-symbols-outlined {
    font-size: 10vw;
  }

  span.material-symbols-outlined:hover {
    font-size: 11vw;
  }

  div.project-card-wrapper img {
    width: 800px;
    height: 500px;
  }
  div.project-card-wrapper img:hover {
    width: 95vw;
    height: 26vh;
  }

  div.project-card-wrapper h3 {
    margin-bottom: 0;
  }

  div.project-card-wrapper a {
    font-size: 4vw;
    margin-bottom: 0;
  }

  div.project-card-wrapper p {
    font-size: 3vw;
    margin-top: 0;
    margin-bottom: 4vh;
    width: 90vw;
  }

  .group img {
    height: 6vh;
  }

  .group img:hover {
    height: 7vh;
  }

  div.parcours div.SCOLAIRE div.master,
  div.parcours div.SCOLAIRE div.bachelor,
  div.parcours div.SCOLAIRE div.bts,
  div.parcours div.professionel div.dodo,
  div.parcours div.professionel div.dirisi,
  div.parcours div.professionel div.kpsdev {
    flex-direction: column;
    align-items: center;
  }

  div.parcours div.SCOLAIRE div.master div.right h3,
  div.parcours div.SCOLAIRE div.bachelor div.right h3,
  div.parcours div.SCOLAIRE div.bts div.right h3,
  div.parcours div.professionel div.dodo div.right h3,
  div.parcours div.professionel div.dirisi div.right h3,
  div.parcours div.professionel div.kpsdev div.right h3 {
  }

  div.parcours div.SCOLAIRE div.master div.right div.content p,
  div.parcours div.SCOLAIRE div.bachelor div.right div.content p,
  div.parcours div.SCOLAIRE div.bts div.right div.content p,
  div.parcours div.professionel div.dodo div.right div.content p,
  div.parcours div.professionel div.dirisi div.right div.content p,
  div.parcours div.professionel div.kpsdev div.right div.content p {
  }
  #about_me {
    flex-direction: column;
    align-items: center;
  }

  #about_me img {
    width: 40vw;
    height: 40vw;
  }

  #about_me p {
    padding-top: 5vh;
    width: 90vw;
    text-align: justify;
  }
  #about_me a {
    width: 30vw;
    height: 50px;
    font-size: 3vw;
  }

  #about_me a:hover {
    width: 31vw;
  }
  img.qrCode {
    width: 18vw;
    height: 18vw;
    box-shadow: none;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
  }

  #contact {
    padding-top: 25vh;
  }

  #contact p {
    width: 90vw;
    transform: skewY(5deg);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 3vw;
    text-align: center;
    background-color: #bbd5db;
    box-shadow: 4px 4px 0 2px #4b7d8d;
  }

  #contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
  }

  #contact form label {
    font-size: 3vw;
  }
  #contact form input {
    height: 80%;
    width: 80%;
    font-size: 3vw;
  }
  #contact form input:focus {
    height: 80%;
  }
  #contact form textarea {
    height: 20vh;
    width: 80%;
    max-width: 80%;
    font-size: 3vw;
  }
  #contact form textarea:focus {
    height: 25vh;
  }

  .g-recaptcha {
    padding: 5vh;
    transform: scale(1.5);
  }

  #contact form button {
    width: 25vw;
    height: 50px;
    font-size: 3vw;
  }

  #contact form button:hover {
    width: 26.5vw;
  }

  footer p {
    font-size: 3vw;
  }
}