html {
  scroll-behavior: smooth;
}
* {
  font-family: Arial, Helvetica, sans-serif;
}
body {
  background-image: url(../img/tree-and-space-pexels.jpg);
  background-size: contain;
}
/*-------------------------------------------Nav----------------------------------------*/
nav {
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
  display: flex;
  background-color: rgb(23, 107, 107);
  border-radius: 0 0 32px 32px;
  z-index: 1;
}
nav h1 {
  width: 255px;
  padding: 15px;
  box-sizing: border-box;
  background-color: white;
  margin: auto;
  text-align: center;
  border-radius: 0 0 0 32px;
}
nav div {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
nav div a {
  margin: auto;
  text-decoration: none;
  color: white;
  padding: 20px;
}
nav div a:hover {
  background-color: rgba(10, 51, 51, 0.4);
}
nav div i.rocket {
  margin: auto;
  color: white;
  transform: scale(3);
  animation: rocket-nav;
  animation-duration: 5s;
  animation-delay: 4s;
}
/*---------------------------------------Sidebar----------------------------------------*/
section.sidebar {
  position: fixed;
  top: 100px;
  bottom: 10px;
  left: 10px;
  width: 200px;
  background-color: rgba(23, 107, 107, 0.4);
  border-radius: 32px;
  color: white;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.container-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}
.sidebar-anchors a {
  display: block;
  text-decoration: none;
  color: white;
  border-bottom: solid rgba(23, 107, 107, 0.3);
}
.sidebar-anchors a:hover {
  background-color: rgba(23, 107, 107, 0.4);
}
.photo {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px solid;
  box-sizing: border-box;
}
.photo i {
  transform: scale(7);
}
.sidebar h4 {
  margin: 0%;
}
div.icons i {
  padding: 4px;
  color: white;
}
div.icons i:hover {
  background-color: rgba(23, 107, 107, 0.4);
}
/*---------------Menu Sidebar--------------*/
label {
  position: fixed;
  top: 50%;
  right: 0%;
  height: 10px;
  width: 10px;
  padding: 10px;
  background-color: teal;
  border: solid white;
  z-index: 1;
  display: none;
}
label:hover {
  cursor: pointer;
  background: rgba(0, 128, 128, 0.5);
}
label i {
  color: white;
}
/*----------------------------------Main-Tag-Sections------------------------------------*/
/*Separators of sections*/
[id*="separator-"] {
  height: 90px;
}
.style-section {
  margin-left: 210px;
  min-height: 450px;
  background-color: rgba(108, 109, 97, 0.5);
  border: solid rgba(108, 109, 97, 0.7);
  border-radius: 32px;
  color: white;
  text-align: center;
  padding: 15px;
}
/*Title sections*/
[class*=section] h2 {
  color: orange;
  padding-top: 20px;
}
.container {
  min-height: 400px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.paper {
  min-height: 450px;
  min-width: 300px;
  max-width: 350px;
  background-color: rgba(0, 128, 128, 0.5);
  border: solid rgba(0, 128, 128, 0.7);
  padding: 25px;
  box-sizing: border-box;
  border-radius: 32px;
  text-align: justify;
  margin-bottom: 15px;
}
.container-cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.card {
  max-width: 250px;
  margin: auto;
  margin-bottom: 15px;
  background-color: rgba(0, 128, 128, 0.5);
  border: solid rgba(0, 128, 128, 0.7);
  padding: 15px;
  box-sizing: border-box;
  border-radius: 32px;
}
.card:hover {
  background-color: lightseagreen;
}
.card h4 {
  text-align: center;
}
/*properties of youtube & feedback*/
.section-youtube .container, .section-feedback-score .container {
  flex-wrap: nowrap;
}
.container-videos {
  display: flex;
  flex-wrap: wrap;
  margin: 0%;
  width: 80%;
  padding: 20px;
  box-sizing: border-box;
}
.section-youtube .container .paper, .section-feedback-score .container .paper {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 10px;
}
.click {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10%;
  border-left: solid rgba(108, 109, 97, 0.7);
  border-right: solid rgba(108, 109, 97, 0.7);
  text-decoration: none;
  margin: 0%;
}
.previous {
  transform: rotate(180deg);
}
.click i {
  transform: scale(4);
  color: white;
}
/*--------------------------First Section Welcome-------------------------*/
.section-welcome {
  display: flex;
  flex-direction: column;
}
.section-welcome h1 {
  margin: auto;
  font-size: 2.5rem;
}
.section-welcome a.hire-me {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 128, 128, 0.4);
  border: solid teal;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 2px 2px 2px 2px orange, -2px -2px 2px 2px orange;
}
.section-welcome a.hire-me:hover {
  transform: scale(1.1);
  box-shadow: 2px 2px 32px 12px orange, -2px -2px 32px 12px orange;
}
.section-welcome h2 {
  margin: auto;
}
/*-----------------------Second Section Know me more-----------------------*/
.section-know-me-more .paper {
  display: flex;/**/
  flex-direction: column;
  justify-content: space-around;
}
.section-know-me-more div.computer {
  height: 100px;
  display: flex;
}
.section-know-me-more div.computer i {
  margin: auto;
  transform: scale(4);
}
.section-know-me-more .home {
  background-image: url(../img/home.jpeg);
  background-position: center;
  background-size: cover;
  height: 300px;
  margin-bottom: 15px;
}
.section-know-me-more .icons-network {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 40px 0 40px;
}
.section-know-me-more .icons-network i {
  color: white;
  transform: scale(1.5);
  padding: 4px;
}
.section-know-me-more .icons-network i:hover {
  background-color: rgba(0, 128, 128, 0.9);
}
/*------------------------Third Section What I do---------------------------*/
.section-what-i-do .paper {
  display: flex;/**/
  flex-direction: column;
  justify-content: space-around;
}
.row {
  display: flex;
  justify-content: space-between;
}
.row .service {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row .service i {
  transform: scale(1.5);
}
.row p {
  margin: auto;
  width: 65%;
}
/*----------Fourth Section My skills----------*/
.section-my-skills .container .paper {
  display: flex;/**/
  flex-direction: column;
  justify-content: space-between;
}
.section-my-skills h3 {
  margin-bottom: 0%;
  text-align: center;
}
.section-my-skills .container .paper p {
  margin-top: 0%;
}
.logo-tool {
  margin: auto;
  height: 55px;
  width: 55px;
  border: solid;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
}
.logo-tool:hover {
  transform: scale(1.2);
  transition: 1s;
}
.logo-tool i {
  transform: scale(2);
}
.skill-level {
  display: flex;
  justify-content: space-between;
}
.skill-level h4 {
  margin: 0%;
}
.counter {
  display: flex;
  border: solid gray;
  border-radius: 16px;
  height: 5px;
}
.counter div:first-child {
  background-color: greenyellow;
}
.counter-1 div:first-child {
  width: 70%;
}
.counter-2 div:first-child {
  width: 40%;
}
.counter-3 div:first-child {
  width: 5%;
}
.counter-4 div:first-child {
  width: 5%;
}
.counter-5 div:first-child {
  width: 30%;
}
.counter-6 div:first-child {
  width: 20%;
}
.counter-7 div:first-child {
  width: 1%;
}
.counter-8 div:first-child {
  width: 10%;
}
.counter-9 div:first-child {
  width: 60%;
}
.counter-10 div:first-child {
  width: 60%;
}
.counter-11 div:first-child {
  width: 70%;
}
/*--------------------------Fifth Section Resume--------------------------*/
.section-resume .paper h3 {
  text-align: center;
}
.academy {
  background-color: teal;
  border: solid;
  margin: 5px;
  padding: 10px;
  border-radius: 8px;
}
.academy h4, .academy p {
  margin: 0%;
}
/*---------------------------Sixth Section My Work------------------------*/
[class*=job-] {
  height: 200px;
  background-position: center;
  background-size: cover;
}
.job-building {
  background-image: url(../img/building-pexels.jpg);
}
.job-civil-project-management {
  background-image: url(../img/civil-project-management-pexels.jpg);
}
.job-cibersecurity {
  background-image: url(../img/cibersecurity-pexels.jpg);
}
.job-vehicle-development {
  background-image: url(../img/motorcycle-pexels.jpg);
}
.job-artificial-intelligence-and-robotics {
  background-image: url(../img/artificial-intelligence-pexels.jpg);
}
.job-catching-stars {
  background-image: url(../img/catching-stars-pexels.jpg);
}
.job-pokemon-master {
  background-image: url(../img/pokemon-master-pexels.jpg);
}
/*-----------------------Seventh Section Feedback Score--------------------*/
.section-feedback-score .paper {
  display: flex;/**/
  flex-direction: column;
  justify-content: space-around;
}
.recommend div.profile {
  margin: auto;
  width: 100px;
  height: 100px;
  border: solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(23, 134, 185);
}
.recommend div.profile i {
  transform: scale(4);
}
.recommend h4 {
  text-align: center;
}
.stars {
  margin: auto;
  display: flex;
  justify-content: space-around;
  width: 60%;
}
.stars i {
  color: orange;
}
/*-----------------------------Eighth Section Blog--------------------------*/
.section-blog .card a {
  color: white;
  text-decoration: none;
}
[class*="blog-"] {
  height: 200px;
  background-size: cover;
  background-position: center;
}
.blog-iot {
  background-image: url(../img/tesla-pexels.jpg);
}
.blog-solar-energy {
  background-image: url(../img/solar-energy-pexels.jpg);
}
.blog-robotic {
  background-image: url(../img/robot-pexels.jpg);
}
.blog-drones {
  background-image: url(../img/dron-pexels.jpg);
}
.blog-rockets {
  background-image: url(../img/rocket-pexels.jpg);
}
.blog-human-being {
  background-image: url(../img/human-being-pexels.jpg);
}
.blog-biotechnology {
  background-image: url(../img/biotechnology.jpg);
}
.blog-arduino {
  background-image: url(../img/arduino-pexels.jpg);
}
.more {
  display: flex;
  border-top: solid rgba(108, 109, 97, 0.7);
  border-bottom: solid rgba(108, 109, 97, 0.7);
  height: 50px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.more i {
  transform: scale(2.5);
  color: white;
}
/*----------------------Nineth Section Youtube*----------------------------*/
.video {
 height: 250px;
 background-position: center;
 background-size: cover;
}
.tekst {
 background-image: url(../img/working-on-arduino.jpg);
}
.johnner {
  background-image: url(../img/playing-something-guitar.jpg);
}
/*--------------------------Last Section Contact--------------------------*/
.section-get-in-touch {
  background-image: url(../img/leaf-pexels.jpg);
  background-size: cover;
  background-position: center;
}
.section-get-in-touch h3 {
  text-align: center;
}
.section-get-in-touch form {
  text-align: center;
}
.section-get-in-touch form input {
  margin: 5px;
}
.message {
  height: 150px;
}
.contact {
  display: flex;
  margin-top: 30px;
}
.contact div:first-child {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact div:first-child i {
  transform: scale(2);
}
.contact div {
  margin: auto;
  width: 60%;
}
.contact div h4, .contact div p {
  margin: 0%;
}
/*----------------------------------------Footer------------------------------------------*/
footer div.footer {
  text-align: center;
  color: white;
  margin-left: 210px;
  background-color: rgba(124, 124, 124, 0.5);
  border: solid rgba(124, 124, 124, 0.7);
  padding: 15px;
  border-radius: 32px;
}