body {
   max-width: 1445px;
   height: auto;
   margin: auto;
   background-color: #121212;
 }

 image {
   border-radius: 5px;
 }

 #pointer-wrapper {
   height: 0;
   width: 0;
 }

 h1, h2 {
   color: #0bbd20;
   ;
 }

 p {
   color: #ffffff;
 }

 h1,
 h2,
 p {
   margin: 0;
 }


 .navigation-container {
   width: 85%;
   height: 110px;
   margin: auto;
   display: flex;
   justify-content: space-around;
   align-items: center;
   border-bottom: 1px solid #828282;
 }


 .navigation-container a {
   color: #ffffff;
   text-decoration: none;
   font: 700 18px Roboto;
 }

 .navigation-container>a:hover {
   color: #0bbd20;
 }

 .home {
   width: 100%;
   height: 550px;
   margin: 0 auto;
 }

 .home-container {
   width: 100%;
   height: 150px;
   display: flex;
   justify-content: space-around;
 }

 h1 {
   width: 40%;
   height: 60px;
   margin: auto;
   font: 700 40px Roboto;
 }

 .home-container>p {
   width: 30%;
   height: 50px;
   margin: auto;
   display: flex;
   align-items: center;
   font: 500 18px Roboto;
   color: #ffffff;
 }

 .home-image {
   width: 85%;
   height: 350px;
   display: block;
   margin: auto;
   border-radius: 5px;
 }

 .about-wrapper {
   width: 100%;
   height: 640px;
   background-color: #121212;
 }

 .about-wrapper>h2 {
   padding: 50px 0 46px;
   font: 700 34px Roboto;
   text-align: center;
 }

 .about-me-content {
   width: 85%;
   height: 520px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: auto;
 }

 .biography {
   width: 40%;
   height: 220px;
   font: 500 20px Roboto;
   text-align: left;
 }

 .wrapper-portrait img {
   width: 80%;
   max-width: 200px;
   height: auto;
   display: block;
   margin: auto;
   transition: all 0.8s ease;
 }

 .wrapper-portrait img:hover {
   width: 100%;
   max-width: 230px;
 }

 .wrapper-portrait {
   width: 50%;
 }

 .skills-wrapper {
   max-width: 945px;
   height: 300px;
   margin: 50px auto;
 }

 .graphics-editor-wrapper {
   max-width: 100%;
   height: 205px;
   display: flex;
   justify-content: space-between;
 }

 .graphics-editor {
   width: 170px;
   height: 205px;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
 }

 .graphics-editor>p {
   text-align: center;
   font: 700 23px Roboto;
 }

 .skills-wrapper>h2 {
   padding-bottom: 90px;
   font: 700 34px Roboto;
   text-align: center;
 }

 .pointer {
   position: sticky;
   top: 92%;
   left: 94%;
   border: none;
   width: 30px;
   height: 30px;
   background: #ffffff;
   mask: url("../media/images/pointer.png") no-repeat center;
   mask-size: contain;
   -webkit-mask: url('../media/images/pointer.png') no-repeat center;
   -webkit-mask-size: contain;
   transition: background-color 0.2s ease;
   z-index: 1199;
 }

 .pointer:hover {
   background: #0bbd20;
 }


 .portfolio-wrapper {
   width: 100%;
   max-height: 1038px;
   background-position: center;
   text-align: center;
 }

 .portfolio-wrapper img {
   display: block;
   margin: 0 auto;
 }

 .portfolio-wrapper>h2 {
   padding: 90px 0 0;
   font: 700 34px Roboto;
 }

 #wrapper-task-portfolio {
   height: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   padding: 20px;
 }

 .slide {
   width: 420px;
   height: 238px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.8s ease, z-index 0.8s ease;
   overflow: hidden;
   background-color: #f0f0f0;
   box-sizing: border-box;
   border-radius: 10px;

 }

 .portfolio-wrapper #wrapper-task-portfolio .slide a {
   display: block;
   width: 100%;
 }

 .slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 10px;
   transition: transform 0.8s ease;
 }

 .slide:hover {
   transform: scale(1.2) translateY(-20px);
   z-index: 10;
 }

 .slide:not(:hover) {
   transform: scale(0.9);
   opacity: 0.8;
 }

 #wrapper-task-portfolio .slide:first-child:hover {
   transform: scale(1.2) translateX(20px) translateY(-20px);
 }

 #wrapper-task-portfolio .slide:last-child:hover {
   transform: scale(1.2) translateX(-20px) translateY(-20px);
 }


 .github h2 {
   padding: 0 0 90px;
   font: 700 34px Roboto;
 }

 footer {
   width: 100%;
   height: 315px;
   margin: auto;
 }

 footer>h2 {
   text-align: center;
   padding: 90px 0;
   font: 700 34px Roboto;
 }

 .footer-wrapper-img {
   width: 100%;
   display: flex;
   justify-content: space-evenly;
 }

 .graphics-editor img {
   width: 100px;
   height: 100px;
 }

 .first-footer-img {
   height: 35px;
   border-radius: 25%;
   opacity: 0.9;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   overflow: hidden;
 }

 .first-footer-img:hover, .second-footer-img:hover {
   opacity: 1;
   box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
   transform: scale(1.05);
 }

 .second-footer-img {
   height: 35px;
   border-radius: 50%;
   opacity: 0.8;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   overflow: hidden;
 }

 .github-wrapper {
   width: 85%;
 }

 .github-wrapper:hover {
   opacity: 100%;
 }

 .menu-burger, .mobile-wrapper-p {
   display: none;
 }

 .one, .two, .three {
   width: 100%;
   max-width: 481.66px;
   height: auto;
 }

 .github a {
   text-decoration-color: #121212;
 }

 .github a:hover {
   text-decoration-color: #0bbd20;
 }


 @media screen and (min-width: 768px) and (max-width: 1200px) {
   h1 {
     width: 49%;
   }
 }


 /* mobile wrapper */

 @media screen and (max-width: 768px) {
   body {
     height: auto;
   }

   .wrapper-portrait {
     margin: auto;
   }

   .one, .two, .three {
     width: 100%;
     max-width: 100%;
     min-height: 260px;
   }

   h1 {
     height: 5rem;
     width: 60%;
     font: 700 30.34px Roboto;
   }

   .mobile-wrapper-p {
     display: block;
     padding-top: 2rem;
     font: 500 18px Roboto;
     text-align: center;
   }

   .navigation-container, .home-container>p {
     display: none;
   }

   .pointer {
     width: 2rem;
     height: 2rem;
     top: 92%;
     left: 45%;
   }

   .home {
     height: auto;
     margin: 0 auto;
   }

   .home-container {
     width: 70%;
     height: 150px;
     display: flex;
     justify-content: space-around;
   }

   .home-image {
     height: auto;
   }

   .menu-btn {
     width: 30px;
     height: 30px;
     position: relative;
     top: 60px;
     left: 4rem;
   }

   .menu-btn span {
     width: 40px;
     height: 2px;
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #0bbd20;
     transition: all 0.5s;
   }

   .menu-btn span:nth-of-type(2) {
     top: calc(50% - 5px);
   }

   .menu-btn span:nth-of-type(3) {
     top: calc(50% + 5px);
   }

   .menu-burger {
     display: block;
     position: absolute;
     top: 9rem;
     right: 0;
     height: 16.7rem;
     width: 100%;
     background-color: rgb(0, 0, 0);
     transform: translate(-120%);
     transition: transform 0.5s;
     text-decoration: none;
     text-align: center;
     margin: 0 auto;
   }

   .menu-burger ul {
     padding: 0;
   }

   .menu-burger.active {
     transform: translateX(0);
     margin: auto;
   }

   .menu-burger li {
     list-style-type: none;
     text-decoration: none;
   }

   .menu-btn.active span:nth-of-type(2) {
     display: none;
   }

   .menu-btn.active span:nth-of-type(1) {
     top: 35%;
     transform: translate(-50%, 0%) rotate(45deg);
   }

   .menu-btn.active span:nth-of-type(3) {
     top: 35%;
     transform: translate(-50%, 0%) rotate(-45deg);
   }

   .menu-style {
     color: #f4f4f4;
     text-decoration: none;
     font: 500 20px Roboto;
   }

   .menu-burger li {
     padding: 19px;
     border-bottom: 1px solid white;
   }

   .home-container>p {
     font: 500 28px Roboto;
   }

   .skills-wrapper {
     width: 100%;
     margin: 0 auto;
   }

   .about-me-content {
     width: 100%;
     display: block;
     text-align: center;
   }

   .about-wrapper {
     width: 100%;
     height: 745px;
   }

   .first-footer-img {
     height: 100%;
     border-radius: 25%;
   }

   #poportfolio-wrapper-g-l {
     width: 100%;
     height: 180px;
   }

   footer>h2 {
     text-align: center;
     padding: 50px 0 65px;
     font: 700 34px Roboto;
   }

   .first-footer-img {
     height: 50%;
     border-radius: 25%;
     display: block;
     margin: 0 auto;
   }

   .second-footer-img {
     height: 50%;
     display: block;
     margin: 0 auto;
     border-radius: 50%;
   }

   .biography {
     width: 100%;
     height: 220px;
     padding-top: 30px;
     font: 500 20px Roboto;
     text-align: center;
   }

   .about-me-content>img {
     max-width: 100%;
   }

   #wrapper-task-portfolio {
     width: 100%;
     height: auto;
     display: flex;
     flex-wrap: wrap;
     padding: 50px 0 0;
   }

   .portfolio-wrapper {
     height: auto;
     max-height: none;
   }

   .github a {
     text-decoration-color: #0bbd20;
     ;
   }

   .github-wrapper {
     width: 97%;
     height: auto;
     opacity: 100%;
   }

   #wrapper-task-portfolio img {
     height: 97%;
   }

   .graphics-editor {
     height: 130px;
   }

   .graphics-editor img {
     width: 70px;
     height: 67px;
   }

   .graphics-editor>p {
     font-size: 20px;
   }

   .skills-wrapper {
     height: 250px;
   }

   footer {
     height: 290px;
   }

   .one {
     order: 1;
   }

   .three {
     order: 3;
   }

   .github {
     height: auto;
   }

   .github h2, footer h2, .about-wrapper h2, .skills-wrapper h2 {
     padding: 60px 0 40px;
   }

   .portfolio-wrapper h2 {
     padding-top: 60px;
   }

   .home-image, .slide {
     width: 97%;
   }

   .slide:not(:hover) {
     transform: none;
   }

   #wrapper-task-portfolio .slide:first-child:hover, .slide:hover, #wrapper-task-portfolio .slide:last-child:hover {
     transform: none;
   }

 }

 @media screen and (max-width: 450px) {
   .pointer {
     left: 45%;
   }
 }