body {
  background-color: #676c70;
  max-height: 100vh;
  background-attachment: fixed;
}

main {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
}

article {
  line-height: 0;
}

/*my name*/

.ba {
  font-family: Arial;
  font-size: 40px;
  color: #a4c4d7;
}

/*my job*/

.designer,
.developer {
  font-family: Impact;
  font-size: 80px;
  color: #676c70;
  text-shadow: 0 0 0.2em black;
}
/*hovering button filter for navbar and networks*/

.buttons:hover {
  filter: brightness(150%);
}

.contact:hover {
  filter: invert(1);
}

/*animation of the middle image*/

#character {
  height: 81vh;
  width: auto;
  -webkit-animation: mover 1.5s infinite alternate;
  animation: mover 1.5s infinite alternate;
}
@-webkit-keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}
@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(40px);
  }
}

/*homepage buttons size and position*/

.networks {
  column-gap: 10px;
  display: flex;
  flex-direction: column;
}

.buttons-container {
  height: 17.5vh;
  display: flex;
  justify-content: center;
  align-items: end;
  column-gap: 20px;
}

.buttons-container > button {
  height: 80px;
  width: 230px;
}

/*navbar buttons style*/

.aboutme {
  background-color: #76abc4;
  border: solid #a6e2ff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 30px;
  color: #a6e2ff;
}

.artworks {
  background-color: #e79341;
  border: solid #fce37e;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 30px;
  color: #fce37e;
}

.projects {
  background-color: #b65142;
  border: solid #f99577;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 30px;
  color: #f99577;
}
.contact {
  background-color: black;
  border: solid white;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 30px;
  color: white;
}
.home:hover {
  filter: invert(1);
}

/*about me page*/

.aboutme-title {
  background-color: #76abc4;
  border: solid #a6e2ff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 50px;
  color: #a6e2ff;
  height: 200px;
  width: 350px;
}

.page-aboutme {
  display: flex;
  flex-direction: row;
}

.button-page-aboutme {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
}
.bio-sheet {
  height: fit-content;
}
.bio-sheet > img {
  height: 927px;
}
a {
  text-decoration: none;
  color: white;
}

/*porject page*/

.page-projects {
  display: flex;
  flex-direction: row;
  height: 927px;
  column-gap: 170px;
}

.button-page-projects {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
}

.projects-title {
  background-color: #b65142;
  border: solid #f97b54;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 50px;
  color: #f97b54;
  height: 200px;
  width: 350px;
}
.dev-projects {
  display: flex;
  align-items: center;
}

h1 {
  font-size: 100px;
  font-family: Arial;
  color: #f97b54;
}

/*artworks page*/

.page-artworks {
  display: flex;
  flex-direction: row;
  height: 927px;
  column-gap: 40px;
}

.button-page-artworks {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
}

.artworks-title {
  background-color: #e79341;
  border: solid #fde781;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 50px;
  color: #fde781;
  height: 200px;
  width: 350px;
}

.container-artworks-gallery {
  display: grid;

  grid-gap: 10px;

  grid-template-areas:
    "a b c d "
    " e f g h";
}
.container-artworks-gallery img {
  max-width: 90%;
  height: auto;
  margin-top: 15%;

  transition: transform 0.5s;
}
.container-artworks-gallery img:hover {
  -ms-transform: scale(1.7);
  -webkit-transform: scale(1.7);
  transform: scale(1.7);
}
.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}
.g {
  grid-area: g;
}
.h {
  grid-area: h;
}

/*contact page*/

.page-contact {
  display: flex;
  flex-direction: row;
  height: 98vh;
}

.button-page-contact {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
}

.contact-title {
  background-color: #000000;
  border: solid #ffffff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 50px;
  color: #ffffff;
  height: 200px;
  width: 350px;
}

.mail-box {
  display: flex;
  justify-content: start;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.black-square {
  background-color: #000000;
  height: 700px;
  width: 800px;
  margin-left: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-mailbox {
  font-family: Arial;
  font-size: 50px;
  color: #000000;
  margin-left: 200px;
}

.blue-mailbox {
  margin-top: 250px;
}

input {
  width: 500px;
}

label {
  margin-top: 20px;
  color: #ffffff;
  font-size: 20px;
  font-family: Arial;
}
input,
textarea {
  border-radius: 10px;
}
input {
  height: 40px;
  margin-top: 10px;
}

.mail-button {
  background-color: #34a9e9;
  border: solid #a6e2ff;
  border-radius: 10px;
  font-size: 35px;
  color: #a6e2ff;
  padding: 5px;
  width: 180px;
  margin-top: 20px;
}
.mail-button:hover {
  filter: brightness(150%);
}

.bio-text {
  margin-top: 50%;
}

/*responsive-index*/

@media (max-width: 1500px) {
  #character {
    height: 400px;
  }
}
@media (max-width: 400px) {
  #character {
    height: 300px;
  }
}

@media (max-width: 400px) {
  .designer,
  .developer {
    font-size: 60px;
  }
}
@media (max-width: 1220px) {
  main {
    flex-direction: column;
  }

  .buttons-container {
    flex-direction: column;
    align-items: center;
    margin-top: 15%;
  }
  .buttons-container button {
    margin-bottom: 6%;
  }

  .buttons-container .home {
    margin-bottom: 3%;
    margin-top: 20%;
  }
}

/*responsive-about_me*/

@media (max-width: 450px) {
  .page-aboutme {
    flex-direction: column;
  }
  .bio-sheet {
    margin-top: 50%;
  }

  .page-aboutme .home {
    margin-top: 40%;
    margin-left: 120%;
    width: 500px;
  }

  .button-page-aboutme .aboutme-title {
    width: 1300px;
    height: 700px;
    font-size: 160px;
  }
}

/*responsive-artworks*/

@media (max-width: 450px) {
  .page-artworks {
    display: flex;
    flex-direction: column;
  }

  .page-artworks .home {
    margin-top: 20%;
    margin-left: 10%;
    margin-bottom: 10%;
  }
}
@media (max-width: 450px) {
  .container-artworks-gallery {
    display: grid;

    grid-template-areas:
      "a  "
      " b"
      "c"
      "d"
      "e"
      "f"
      "g"
      "h";
    margin-left: 20%;
  }
  .a {
    grid-area: a;
  }

  .b {
    grid-area: b;
  }

  .c {
    grid-area: c;
  }

  .d {
    grid-area: d;
  }

  .e {
    grid-area: e;
  }

  .f {
    grid-area: f;
  }
  .g {
    grid-area: g;
  }
  .h {
    grid-area: h;
  }
}

/*responsive-projects*/
@media (max-width: 450px) {
  .page-projects {
    display: grid;

    grid-template-areas:
      "a"
      "b";
  }

  .button-page-projects {
    grid-area: a;
  }
  .dev-projects {
    grid-area: b;
  }

  .button-page-projects .projects-title {
    width: auto;
    height: 320px;
  }
}

/*responsive-projects*/

@media (max-width: 450px) {
  .page-contact {
    display: flex;
    flex-direction: column;
  }

  .page-contact .contact-title {
    width: 650px;
    height: 320px;
  }

  .page-contact .home {
    margin-top: 30%;
    margin-left: 95%;
  }

  .mail-box .title-mailbox {
    margin-left: 120%;
  }
  .black-square {
    margin-left: 100%;
  }
}