* {

  margin: 0;

  padding: 0;

  list-style: none;

  text-decoration: none;

  font-family: Arial, Helvetica, sans-serif;

}



html {

  scroll-behavior: smooth;

}



body {

  background-color: ghostwhite;

}



h1 {

  font-size: 3rem;

  font-weight: bold;

}



h2 {

  font-size: 2rem;

}



.header {

  width: 100%;

  height: 80px;

  display: block;

  background-color: #202020;

  position: fixed;

  z-index: 1;

}



._innder_header_ {

  width: 1000px;

  height: 100%;

  display: block;

  margin: 0 auto;

}



.logo_container {

  height: 100%;

  display: table;

  float: left;

  margin-top: 1rem;

  margin-left: 1rem;

}



.logo_container h1 {

  color: white;

  height: 100%;

  display: table-cell;

  vertical-align: middle;

  font-size: 32px;

  font-weight: 200;

}



.logo_container h1 span {

  font-weight: 800;

}



.navigation {

  float: right;

  height: 100%;

}



.navigation li {

  height: 100%;

  display: table;

  float: left;

  padding: 0px 20px;

}



.navigation a:last-child {

  padding-right: 0;

}



.navigation li a {

  display: table-cell;

  vertical-align: middle;

  color: white;

  font-size: 16px;

}



.hamburger {

  display: none;

}



.mainPage {

  height: 100vh;

  background-image: url(https://img.freepik.com/free-vector/white-abstract-wallpaper_23-2148830026.jpg);

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.mainText {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.inner_Text {

  text-align: center;

  font-size: 17.6px;

}



.containerSocial {

  position: relative;

  top: -17%;

}



.SocialBar {

  display: flex;

  flex-direction: column;

  position: absolute;

}



#socialPic {

  width: 50px;

}



.aboutmePage {

  height: 100vh;

  background-color: ghostwhite;

}



.aboutmeContainer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  min-height: 67vh;

}



.h1-text {

  font-size: 2rem;

}



.p-text {

  width: 50%;

}



#PictureOfMe {

  width: 200px;

  border-radius: 14%;

  margin-left: 79%;

}



.CVbalk {

  padding: 1%;

  border-radius: 5%;

  color: white;

  background-color: #202020;

  font-weight: bold;

  margin-top: 2rem;

}



.skillBar {

  font-weight: bold;

  font-size: 2rem;

  margin-left: 3rem;

}



.skillbarow {

  display: flex;

  flex-wrap: wrap;

}



.skills {

  padding: 1%;

  margin-right: 1.5rem;

  margin-top: 4%;

  font-size: 20px;

  background: rgba(153, 153, 153, 0.2);

  border-radius: 5px;

  font-weight: 600;

  color: #666;

}



.projectPage {

  height: 175vh;

  background-color: snow;

}



.project-Text {

  text-align: center;

  min-height: 30vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 20px;

}



.projects_Content {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;

  gap: 0px 0px;

  grid-auto-flow: row;

  grid-template-areas:

    "projects projects projects projects projects projects projects projects projects projects projects projects"

    "projects projects projects projects projects projects projects projects projects projects projects projects"

    "projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2"

    "projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2 projects2"

    "projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3 projects3"

    ". . . . . . . . . . . .";

}



.projects {

  grid-area: projects;

  display: flex;

  flex-direction: row;

  justify-content: space-evenly;

}



.project1-Text {

  display: flex;

  flex-direction: column;

  text-align: center;

  align-items: center;

  width: 43rem;

}



.image-container {

  max-width: 100%;

  height: auto;

}



.projects2 {

  grid-area: projects2;

  margin-top: -12rem;

}



#projectPic {

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

}



.projectButton {

  width: 12rem;

  padding-block: 1.5rem;

  border-radius: 5%;

  color: white;

  background-color: #202020;

  font-weight: bold;

  margin-top: 1.5rem;

}



#project2Pic {

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

}



.project2-Text {

  display: flex;

  flex-direction: column;

  text-align: center;

  align-items: center;

  width: 43rem;

}



.project2-container {

  display: flex;

  flex-direction: row;

  justify-content: space-evenly;

  align-items: center;

}



.projects3 {

  grid-area: projects3;

}



.project3-container {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-evenly;

  margin-top: -11rem;

}



.project3-Text {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



#project3Pic {

  max-width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

}



.AllProject{

  display: flex;

  justify-content: center;

  margin-top: 6rem;

}



.AllProjectBtn{

  padding-block: 1.4rem;

  border-radius: 5%;

  color: white;

  background-color: #202020;

  font-weight: bold;

  width: 12rem;

  text-align: center;

}



html,

body,

.projects_Content {

  height: 100%;

  margin: 0;

}



/* other page */



._header_container {

  width: 100%;

  height: 80px;

  display: block;

  background-color: #202020;

  position: fixed;

  z-index: 1;

  display: flex;

}



._header {

  width: 1000px;

  height: 100%;

  display: block;

  margin: 0 auto;

}



._ProjectTitle {

  color: white;

  display: flex;

  justify-content: center;

  margin-top: 0.6rem;

}



._projectContainer{

  display: flex;

  min-height: 100vh;

  align-items: center



}

.card-container{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

}



._cardBox {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr;

  gap: 0px 0px;

  grid-auto-flow: row;

  grid-template-areas:

    "_Image _Image _Image"

    "_Name _Name ."

    "_Btn . .";

    height: auto;

    object-fit: contain;

}



.card{

  width: 305px;

  height: 225px;

  background-color: #FFF0F5;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 2px 4px black;

  margin: 20px;

  display: flex;

}



._Image { 

  grid-area: _Image;

  background-color: #f0f0f0;

  padding: 10px;

  display: flex;

  justify-content: center;

  overflow: hidden;

  align-items: stretch;

}



._Name {

   grid-area: _Name;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 25px;

   }



   ._Development{

    display: flex;

    flex-direction: column-reverse;

   }



._Btn {

   grid-area: _Btn;

   display: inline-block;

   padding: 8px 16px;

   background-color: black;

   text-decoration: none;

   border-radius: 4px;

   margin: 1rem;

   font-weight: bold;

   color: white;

   display: flex;

   justify-content: center;

   align-items: center;

   }



html, body , ._cardBox {

  height: 100%;

  margin: 0;

}







.endPage {

  height: 100vh;

  background-image: url(https://img.freepik.com/free-vector/white-abstract-wallpaper_23-2148830026.jpg);

  background-size: cover;

  background-repeat: no-repeat;

  position: relative;

}



.contactInfo {

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  gap: 5rem;

  min-height: 30vh;

}

.info-Text {

  font-size: 1.5rem;

  font-weight: normal;

}



.mailContainer {

  min-height: 30vh;

  display: flex;

  justify-content: center;

}



.E-Mails {

  display: flex;

  flex-direction: row-reverse;

  align-items: center;

  justify-content: center;

  gap: 2rem;

}



.mail-picture {

  width: 60px;

  height: 60px;

}



.logo {

  width: 30px;

  height: 30px;

}



.LinksContainer {

  display: flex;

  justify-content: space-evenly;

  align-items: center;

  min-height: 20vh;

}



.LinksContainer div {

  display: flex;

  align-items: center;

}



.LinksContainer a {

  color: black;

  padding-left: 4%;

}



.footer {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: black;

  color: white;

  width: 100%;

  height: 4rem;

  position: absolute;

  bottom: 0;

  left: 0;

}



@media (max-width: 1035px) {

  #PictureOfMe {

    display: none;

  }



  .card-container{

    margin-top: 7rem;

  }

}



@media screen and (min-width: 600px) and (max-width: 1050px) {

  ._innder_header_ {

    width: auto;

    height: 100%;

    display: block;

    margin: 0 auto;

  }

}



@media (max-width: 608px) {

  h1 {

    font-size: 2rem;

  }



  .navigation {

    display: none;

  }



  .hamburger {

    display: block;

    position: fixed;

    top: 20px;

    right: 10px;

    font-size: 30px;

    cursor: pointer;

    color: white;

    z-index: 1;

  }



  .mobile-menu {

    display: none;

    position: fixed;

    top: 0;

    right: 0;

    background-color: #202020;

    border-radius: 5px;

    max-width: 100%;

    padding: 10px;

    z-index: 1;

  }



  .mobile-menu a {

    padding: 10px 20px;

    text-decoration: none;

    color: white;

    display: block;

    transition: 0.3s;

  }



  .mobile-menu a:hover {

    background-color: #555;

  }



  .mobile-menu.visible {

    display: block;

  }



  .SocialBar {

    display: none;

  }



  .mainText {

    text-align: center;

  }



  .CVbalk {

    padding: 1rem;

    margin-top: 2rem;

  }



  .skills {

    padding: 1rem;

  }



  .project3-container {

    margin-top: -22rem;

  }



  .E-Mails {

    display: flex;

    flex-direction: column;

    gap: 1rem;

  }



  .LinksContainer {

    display: flex;

    flex-direction: column;

    gap: 1rem;

  }



  .LinksContainer div {

    display: flex;

    flex-direction: column;

  }



  .footer {

    margin-top: 6rem;

  }

}