* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body, div,
h1, h2, h3, h4, h5, h6, p, center, ol, ul, li,
form, label, legend, article, aside, figure, figcaption, footer, header, hgroup, 
menu, nav, output, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, figure, 
footer, header, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
/*end*/

@font-face {
  font-family: 'font';
  src: url('../fonts/secrcode.woff') format('woff');

}
body {
  font-family: 'font';
  color: snow;
  background-color: black;
}
.page {
    display: flex;
    flex-wrap: wrap;
  }
 
  /*menu*/
 .nav {
  width: 140px;
  height: 350px;
  position:fixed;
  top: 1px;
  left: -448px;
  padding-top: 70px;
  padding-left: 25px;
  transition: left 0.8s;
  background-color:rgb(22, 17, 17);
  z-index: 1;
  box-shadow: 0px -3px 10px rgb(22, 246, 246);
  border-bottom-right-radius:10px;
  border-bottom-left-radius: 10px;
  margin-top: -4px;
}
.nav-toggle {
  position: absolute;
  left:463px ;
  top: 16px;
  padding: 0.3em;
  background: transparent;
  cursor:pointer;
  font-size: 2em;
  line-height: 1;
  color:snow;
}

.nav-toggle::after {
 content:'\2630' ;
 }


 .nav-toggle:hover {
  transform: scale(1.2,1.2);
}

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
  left: auto;
  right: 2px;
  top: 1.2em;
  font-size: 0.9em;
  color:snow;
}



[id='nav-toggle']:checked ~.nav {
  left: 17px;
}

[id='nav-toggle']:checked ~ .nav > .nav-toggle::after {
  content: '\2715';
}

.nav > ul {
  list-style: none;
 }

.nav > ul > li > a {
  display: flex;
  position: relative;
  font-size: 1.2em;
  text-decoration: none;
  margin-bottom: 25px;
  color:snow;
  }



.nav > ul > li > a:hover
{
  transform:scale(1.2,1.2);
  color:rgb(22, 246, 246);
}


/*content*/

section,footer { 
    background-color: rgb(22, 17, 17);
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px -3px 10px rgb(22, 246, 246);
    }
  .section3 {
    background-color:rgb(22, 17, 17);
    height: auto;
  }
  .main {
    background-image: url(../img/bulb-mobile.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .home {
    margin-top: 90px;
    margin-left: 100px;
  }
  .home h1 {
    margin-left: -33px;
    margin-top: -10px;
   font-size: 47px;
   padding-right: 30px;
  }
  .home p {
    box-shadow: 0px 0px 7px rgb(22, 246, 246),
    0px 0px 7px rgb(22, 246, 246);
    border-radius: 16px;
    width: 200px;
    height: 80px;
    padding: 27px;
    font-size:19px;
    margin-top: 130px;
    margin-left: -30px;
    text-align: center;
  }

  .icons {
    display: flex;
    position: relative;
    align-self: center;
    margin-top: 90px;
    width: 270px;
    height:200px;
    margin-top: 50px;
    
  }
  .computer {
    position: absolute;
    width: 180px;
    height: 150px;
    top: 65px;
    left:100px;
  }
  .brain{
    position: absolute;
    width: 40px;
    height: 40px;
    top:65px;
    left: 90px;
  }
    .setting{
    position: absolute;
    width: 53px;
    height: 53px;
    top: 97px;
    left:160px;
  }

  .internet {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 36px;
    left: 150px;
  }
  .connect {
    position: absolute;
    width: 37px;
    height: 37px;
    top:17px;
    left: 100px;
  }
  .settingCode {
    position: absolute;
    width: 37px;
    height:37px;
    top: 93px;
    left: 228px;
  }
  .keyboard {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 115px;
    left:28px;
  }
  .about_me h1 {
    margin: 55px 0 55px 0;
    font-size: 33px;
  }
  .biography {
    width: 80%;
  }

  .biography p {
    font-size:14px;
    line-height: 18px;
  }
  i {
    font-size: 25px;
    color: rgb(22, 246, 246);
  }
  .portrait {
    float:right; 
    margin:10px; 
    width: 40%;
    border-radius: 30px;
    box-shadow: 0px 0px 5px rgb(22, 246, 246),
    0px 0px 5px rgb(22, 246, 246);
  }
  .ldBar path.mainline {
    stroke-width: 3;
    stroke: rgb(22, 246, 246) ;
    stroke-linecap: round;
    }
  .ldBar path.baseline {
    stroke:snow;
    stroke-linecap: round;
  }
  .section3 h1 {
    margin-top: 65px;
    font-size: 33px;
  }
  .hardSkills {
    display: flex;
    flex-wrap: wrap;
    width: 65%;
    justify-content: space-around;
 }

 .pHardSkills {
  display: flex;
  flex-wrap: wrap;
  width: 65%;
  justify-content: space-around;
  margin-top: 40px;
  font-size: 17px;
 }
 .softSkills {
   
   width: 59%;
   height: auto;
   box-shadow: 5px 3px 10px rgb(22, 246, 246),
   3px 3px 3px rgb(22, 246, 246);
   margin-top: 60px;
   margin-bottom: 100px;
   padding: 20px;
   text-align: center;
 }
  .pSoftSkills { 
   display: flex;
   flex-wrap: wrap;
   font-size: 20px;
   justify-content: space-around;
   line-height: 1.8;
  }
  .pSoftSkills2 {
    display: flex;
   flex-wrap: wrap;
   font-size: 20px;
   justify-content: space-around;
   line-height: 1.8;

  }
  footer h3 {
     margin: 80px 0;
  }
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 5px 3px 10px rgb(22, 246, 246) ,
     3px 3px 3px rgb(22, 246, 246);
  }

input[type=text],textarea {
  display: block;
  margin-bottom: 20px;
  margin-top: 5px;
  width: 280px;
  border-radius: 18px;
  padding: 2px;
  background-color: snow;
}
textarea {
  height: 70px;
}
button {
  width: 100px;
  border-radius: 10px;
  padding: 3px;
  margin-top: 20px;
  background-color:snow ;
  box-shadow: 0px 0px 3px rgb(22, 246, 246),
    0px 0px 3px rgb(22, 246, 246);
  cursor:pointer;
}
button:hover {
  transform: scale(1.2,1.2);
}
button:active {
  box-shadow: 0px 0px 30px rgb(22, 246, 246),
  0px 0px 30px rgb(22, 246, 246);
}

footer h4 {
  margin-bottom:-60px;
  margin-top:50px;
  font-size: 22px;
}
.social{
  display: flex;
  justify-content: space-around;
  width: 360px;
  margin-top: 120px;
  font-size: 37px;
 }
 
 .fa {
  color: snow;
  text-decoration: none;
}
.fa:hover {
  transform:scale(1.3,1.3);
}
.fa-facebook {
  background-color: transparent;
}
.fa-facebook:hover {
 color: rgb(24, 119, 242);
}
.fa-linkedin:hover {
  background-color: rgb(0, 99, 154);
  padding: 3px;
  border-radius: 6px;
}
.fa-instagram:hover {
  color: rgb(192, 4, 88);
}


/*scroll*/

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}

::-webkit-scrollbar-thumb {
  background: snow;
  border-radius: 6px;
}


@media only screen and (min-width:720px) and (max-width:1399px){ 
    .nav-toggle {
      left:500px ;
      top: 30px;
      font-size: 2.5em;
      }

      section,footer {
          height: 780px;
      }
      .main {
        background-image: url(../img/bulb.svg) ;
       }
    .home {
     margin-left: 230px;
     margin-top: 290px;
     }
     .home h1 {
      font-size: 60px;
    }
    .home p {
      margin-top: 60px;
      margin-left: -30px;
      font-size: 21px;
    }
    .icons {
      width: 370px;
      height:370px;
      margin-top: 32px;
      margin-left: 320px;
      }
    .computer {
      width: 230px;
      height: 200px;
      top: 25px;
      left:140px;
    }
    .brain{
      width: 50px;
      height: 50px;
      top:51px;
      left: 120px;
    }
      .setting{
      width: 66px;
      height: 66px;
      top: 70px;
      left:220px;
    }
  
    .internet {
      width: 37px;
      height: 37px;
      top: 2px;
      left: 160px;
    }
    .connect {
      width: 42px;
      height: 42px;
      top:-7px;
      left: 95px;
    }
    .settingCode {
      width: 47px;
      height:43px;
      top: 60px;
      left: 307px;
    }
    .keyboard {
      width: 120px;
      height: 120px;
      top: 100px;
      left:28px;
    }
    .about_me h1 {
      margin: 75px 0 90px 0;
      font-size: 53px;
    }
    .biography p {
      font-size:20px;
      margin-left: 70px;
      margin-top:10px;
      line-height: 24px;
    }
    .portrait { 
      margin-left: 60px; 
      width: 22%;
    }
      .softSkills {
     padding: 40px;
     margin-bottom: 110px;
     width: 55%;
    }
     .pSoftSkills2 {
      margin-top: 30px;
     }
    footer h3 {
      font-size: 25px;
   }
  }

 /* maxy screen */
 @media only screen and (min-width: 1400px) {
  .page {
     max-width: 1915px;
     margin: 0 auto ;
   }  
   .nav-toggle {
    left:500px ;
    top: 30px;
    font-size: 3.4em;
  }

section,footer {
     height: 1000px;
    }
    .main {
      background-image: url(../img/bulb.svg) ;
    }
     
    .home {
      margin-left: 340px;
      margin-top: 290px;
    }
    .home h1 {
      font-size: 68px;
    }
    .icons {
      width: 370px;
      height:213px;
      margin-top:160px;
      margin-left: 370px;
      }
    .computer {
      width: 230px;
      height: 200px;
      top: 25px;
      left:140px;
    }
    .brain{
      width: 50px;
      height: 50px;
      top:51px;
      left: 120px;
    }
      .setting{
      width: 66px;
      height: 66px;
      top: 70px;
      left:220px;
    }
  
    .internet {
      width: 37px;
      height: 37px;
      top: 2px;
      left: 160px;
    }
    .connect {
      width: 42px;
      height: 42px;
      top:-7px;
      left: 95px;
    }
    .settingCode {
      width: 47px;
      height:43px;
      top: 60px;
      left: 307px;
    }
    .keyboard {
      width: 120px;
      height: 120px;
      top: 100px;
      left:28px;
    }
    .about_me h1 {
      margin: 75px 0 90px 0;
      font-size: 50px;
    }
    .biography p {
      font-size:25px;
      margin-left: 70px;
      margin-top:30px;
    }
    .portrait { 
      margin-left: 80px; 
      width: 22%;
    }
    .softSkills {
      padding: 40px;
     }
      .pSoftSkills2 {
       margin-top: 30px;
      }
      footer h3 {
        font-size: 30px;
     }
}