@media (max-width: 840px) {

     body {
          overflow-y: auto;
          flex-direction: column;
          height: 100vh;
     }
     .editbar {
          display: none;
     }
     main nav {
          display: none;
     }
     .explorer {
          display: none;
          padding-left: 50px;
          z-index: 100;
          width: 100vh;
          height: 100vh;
     }

     .tab {

          width: 50%;
     }
     .readme {
          margin-right: 10%;
     }
     .down-arrow {
          text-align: center;
     }
     .hrcontainer {
          margin-left: 0px;
          margin-right: 0px;
          width: 100%;
     }
     .onehr, .twohr {
          margin: 0px;
     }
     /* * resp of readme */
.titlecontainer p {
     font-size: 2rem;
     margin-bottom: 30%;
}
     .aboutmeoui {
          font-size: 2rem;
     }
     .aboutmereadme {
          flex-direction: column;

     }
     .textaboutme {

          width: 100%;
          max-width: 100%;
     }
     .profilepicture {
          width: 100%;
          height: 100%;
     }
     .epistudioaboutme {
          flex-direction: column;
          max-width: 100%;
          align-items: center;
     }
     .epistudioaboutme img {
          margin-top: 10px;
          margin-left: 0px;
          width: 40%;
          height: auto;
     }
     .epistudioaboutme p {
          margin: 0 auto;
          text-align: center;
     }

     .worktitle2 {
          font-size: 2rem;
     }
     .introwork {
          margin: 10px 0px 10px 10%;
          max-width: 100%;
          text-align: center;
     }
     .titleskills p {
          font-size: 2rem;
     }
     .myworks p {
          font-size: 2rem;
     }
     .contactmesection p {
          font-size: 2rem;
     }


     .respwarning {
          display: block;
     }
     
}