@media only screen and (max-width: 400px) {
  .padding-h1-in-contact {
    padding: 0px 0px 0px 0px;

    .paragraph-portfolio {
      width: 120px;
      margin-bottom: -7px;
    }
  }
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 700px) {
  .mobilenav-top {
    display: grid !important;
    background: transparent !important;
  }

  .top-glass-background {
    background-color: white !important;
  }

  .p-bottom {
    font-weight: 500;
    font-size: 60%;
    margin-top: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    text-align: justify;
    color: black !important;
  }

  .ceo-name {
    font-size: 29px !important;
  }

  .ceo-img {
    margin: auto;
  }

  .mobile-logo-div {
    margin-left: 5px;
  }

  .hire-me-div {
    margin-right: 10px;
  }

  .view-top {
    display: none !important;
  }

  .intro {
    font-size: 29px;
  }

  .mobile-about {
    display: flex !important;
    margin: 0% !important;
    padding: 0% !important;
  }

  .mini-on-screen {
    font-size: 12px;
  }
  .mini-mobile {
    text-align: center !important;
  }

  .mobile {
    display: grid !important;
    position: fixed !important;
    bottom: -10px !important;
    width: 100% !important;
    margin-left: -8px !important;
  }

  .container-port,
  .me-container,
  .general-snippet {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0% !important;
    padding-bottom: 0% !important;
  }

  .snippet-container {
    padding-top: 0% !important;
    padding-bottom: 0% !important;
  }

  .special-child-dev {
    margin-top: auto !important;
  }

  .get-in-touch-container {
    display: flex;
    flex-wrap: wrap;
  }

  .about-me-years-experience-paragraph {
    font-size: 10p;
  }

  .about-me-years-exp-div {
    padding: -400px !important;
    margin: -50px 0px -50px 0px !important;
    /* display: flex !important; */
  }

  .about-me-years-experience-span {
    font-size: 50px !important;
    font-weight: 900;
  }

  .skills-colom,
  .discover-div {
    min-width: 280px;
  }

  .h2-general {
    font-size: 17px;
  }

  .padding-h1-in-contact {
    padding: 0px 0px 0px 0px;
    color: gray !important;
  }

  .h2-portfolio {
    font-size: 20px;
  }
  .paragraph-portfolio {
    width: 120px;
    margin-bottom: -7px;
  }

  .openbtn {
    display: block !important;
  }

  .body-exp-bootomnav {
    margin-bottom: 100px !important;
  }

  .bottom-btn {
    align-items: center;
  }
}
/* End of mobile view */
.mobilenav-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  display: none;
}

.mobile-logo-div {
  display: flex;
  align-items: center;
}

.mobile {
  display: none;
}

.hire-me-div {
  background-color: hsl(0, 0%, 100%, 0.8);
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
}
.logo-img {
  width: 30px;
  background-color: orange;
  border-radius: 50px;
  padding: 4px;
}

.name-logo {
  font-weight: 900;
  font-size: x-large;
  color: black;
}
.first-top {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
}
.image-div {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.group-div {
  display: flex;
}

.top-ul {
  display: flex;
}

.top-li {
  padding: 10px 18px;
  font-weight: 500;
  color: black !important;
}

.top-li:hover {
  font-size: 25px;
  font-weight: 500;
}

.a-color-alt {
  color: black !important;
}

.ul-bottom {
  margin-left: -25px !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.bottom-img {
  max-width: 10px;
  min-width: 40px;
  border: 1px solid hsla(0, 0%, 100%, 0.5);
  border-radius: 10px;
  background-color: hsl(0, 0%, 100%, 0.3);
}

.top-glass-background {
  background: hsl(0, 0%, 100%);
  border-radius: 10px;
  /* box-shadow: 0 4px 16px hsla(0, 8%, 95%); */
  backdrop-filter: blur(50px);
  padding: 0px;
  /* padding: 5px 2px 5px 2px; */
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(179, 172, 172);
}

.nav-color-back {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

* {
  box-sizing: border-box;
}

.change {
  border-bottom: 1px solid gainsboro;
}

.learn-portfolio {
  font-weight: 700;
}

.color-about {
  color: orange;
}

.background-img {
  background-image: url(pictures/lappy.pn);
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 20px;
}

.me-container {
  display: flex;
  gap: 50px;
  justify-content: space-betwee;
  align-items: center;
}

.me-child-container {
  flex-grow: 1;
  flex-basis: 200;
  width: 100%;
  max-width: 700px;
}

.white-top {
  width: 110px;
  height: 5px;
  background-color: whitesmoke;
}

body {
  background-color: black;
  color: white;
  font-family: Spacegrotesk, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue";
  font-size: 18px;
  font-weight: 400;
  align-items: center;
  justify-content: center;
}

hr {
  border: 0.1px solid #333;
}

a {
  font-size: 16px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: white;
}

a:hover {
  color: gray;
}
p {
  font-size: 16px;
  letter-spacing: 0.06em;
}

.container-port {
  display: flex;
  width: 100%;
  column-gap: 50px;
  padding: 0px 0px 0px 0px;
  justify-content: space-evenly;
}

.zoom-containeer {
  flex-grow: 1;
  flex-basis: 200;
  width: auto;
}

.zoom-one {
  margin-bottom: 40px;
}

.paragraph-portfolio {
  max-width: 200px;
  padding: 5px 10px 5px 10px;
}

.project-have-done {
  width: 100%;
  max-width: 80%;
}

.h2-portfolio {
  font-weight: 700;
  padding: 0px 10px 0px 10px;
}

.portfolio-img {
  width: 100%;
  max-width: 700px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

button {
  padding: 10px;
  margin: 0px 3px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
}

.button-div {
  display: flex;
  justify-content: end;
}

.child-dev {
  background-color: hsl(217, 17%, 21%, 0.6);
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  max-width: 100%;
  max-width: 700px;
}

.special-child-dev {
  margin-top: 90px;
}

.client-preview {
  background-color: lightgreen;
  width: 250px;
  height: 100%;
  flex-grow: 1;
  flex-basis: 200;
  padding: 10px;
}
.client-img {
  width: 100%;
  max-width: 250p;
  min-width: 250p;
  border-radius: 20px;
}

.head-ul {
  list-style-type: none;
  display: flex;
  overflow: auto;
  margin-right: 5px;
}

.li-row {
  float: left;
  font-weight: 700;
}

.li-row,
.link {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 0px 0px 5px;
  text-decoration: none;
}

.li-row .link:hover {
  color: gray;
}

.test {
  width: 300px;
  height: 100%;
  flex-grow: 1;
  flex-basis: 200;
  padding: 10px;
}

.experience {
  width: 100px;
}

.img-li {
  width: 29px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: antiquewhite;
}

.img-li:hover {
  -ms-transform: scale(1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1);
  /* Safari 3-8 */
  transform: scale(1.09);
  color: rgb(216, 211, 211);
  background-color: lightblue;
}

.img-pre-work {
  width: 100px;
  margin-left: -15px;
}

.about-me-gen-max-width-div {
  max-width: 700px;
}

.about-me-years-experience-paragraph {
  margin-left: 5px;
  font-weight: 700;
}
.about-me-years-exp-div {
  display: flex;
  align-items: center;
  max-width: 200px;
}
.about-me-years-experience-span {
  font-weight: 700;
  font-size: 80px;
}

.tools-image {
  width: 90px;
  border-radius: 50%;
  background-color: white;
}

li {
  list-style: none;
}

h1 {
  font-size: 45px;
  width: 100%;
  font-weight: 900;
  padding: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

h2 {
  font-size: 24px;
  width: 100%;
  font-weight: 700;
  padding: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* h3 {
  font-size: 20px;
  padding:0px;
margin-top:5px;
margin-bottom:5px;
} */

div {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0px;
}

span {
  margin-right: 1px;
  color: orange;
}

.general-skills-colom {
  margin-top: 10px;
}

.skills-colom {
  background: hsla(0, 0%, 100%, 0.05);
  width: 100%;
  max-width: 406px;
  min-width: 280px;
  padding: 50px 30px 50px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 30px hsl(0, 0%, 10%);
  backdrop-filter: blur(85px);
}

.skills-colom:hover {
  color: gray;
}

.white-boldline {
  border: 2px solid white;
  max-width: 50px;
}

.number-p {
  margin: 0%;
  font-size: 40px;
}

img {
  vertical-align: middle;
}

.my-pic {
  width: 100%;
  max-width: 100%;
  border-radius: 50%;
  background-color: white;
  padding: 1px;
}

.get-in-touch-container {
  display: flex;
  column-gap: 20px;
  align-items: center !important;
}

.get-in-touch {
  flex-grow: 1;
}

.glass-background {
  background-color: hsla(0, 0%, 100%, 0.05);
  /* background-color: whitesmoke; */
  border-radius: 1px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  padding: 10px;
}

.last-content {
  display: flex;
  flex-wrap: wrap;
}

.bottom {
  flex-grow: 1;
  flex-basis: 200;
}

.item-one {
  flex-grow: 1;
  flex-basis: 200;
  height: 100%;
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.img-item {
  width: 100%;
  border-radius: 5%;
}

.snippet-div {
  background-color: hsl(217, 17%, 21%, 0.5);
  padding: 0px 0px 40px 0px;
  border-radius: 20px;
  width: 100%;
  height: 100%;
}

.snippet-div:hover,
.child-dev:hover {
  -ms-transform: scale(1.5);
  /* IE 9 */
  -webkit-transform: scale(1.5);
  /* Safari 3-8 */
  transform: scale(1.1);
}

.general-snippet {
  display: flex;
  column-gap: 30px;
  padding: 0px 0px 50px 0px;
  justify-content: space-between;
}

.img-snippet {
  width: 100%;
  max-width: 700px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.paragraph-snippet {
  font-size: 18px;
  font-weight: 100;
}

.h3-snippet {
  font-size: 26px;
}

.together-snippet {
  margin: 20px;
}

.right-arrow {
  font-weight: 900;
}

.contact-label {
  font-size: 25px;
  font-weight: 700;
}

.type-text {
  width: 100%;
  height: 20px;
  border: none;
  margin: 15px 0px 15px 0px;
  border-bottom: 2px solid white;
  background-color: transparent;
  color: white;
  padding: 10px 0px 10px 0px;
}

.email-call {
  color: gray;
}

/* Portfolio css */
.client-div {
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}

.client-img-paragraph {
  align-items: center;
  text-align: center;
  margin: 0px;
  padding: 0px;
}

.clients-image {
  max-width: 150px;
  border-radius: 50%;
  border: 1px solid white;
}

.client-h2-paragraph {
  margin: 0px;
  padding: 0px;
}

.client-logos {
  max-width: 150px;
  text-align: center;
}

/* Portfolio css */

.font-bold-mail-number {
  font-weight: 700;
}

/* Background changer */

body {
  background: black;
  color: white;
}

.dark-mode {
  background: linear-gradient(320deg, #eeeded, #857678, #ffffff);
  color: black;
}

/* Nav css */
.general-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topnav {
  overflow: hidden;
  height: 45px;
  display: flex;
}

.button-div {
  display: flex;
  column-gap: 5px;
}

.log-in {
  padding: 8px 14px;
  border: 1px solid white;
  border-radius: 50px;
  background-color: #111;
  color: white;
  cursor: pointer;
}

.sign-up {
  padding: 8px 14px;
  border: 1px solid black;
  border-radius: 50px;
  background-color: white;
  cursor: pointer;
}

.log-in:hover {
  background-color: hsl(0, 0%, 51%, 0.55);
  color: white;
}

.sign-up:hover {
  background-color: hsl(0, 0%, 51%, 0.55);
  color: white;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  align-items: center;
}

.topnav a:hover {
  color: gray;
}

@media screen and (max-width: 700px) {
  .topnav {
    display: none;
  }
}

.topnav .responsive a {
  float: none;
  display: block;
  text-align: left;
}

/* side bar*/
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
  display: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left 0.5s;
  display: non;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }

  .sidebar a {
    font-size: 18px;
  }
}

/* Nav css */

.logo-icon {
  text-decoration: none;
  color: white;
  font-size: 9px;
  font-weight: 700;
}