html {
  height: 100%;
  width: 100%;
}

#bodyIndex {
  background: linear-gradient(to right, rgb(200, 200, 200) 41%, white 41%);
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: rgb(200, 200, 200);
  display: flex;
  flex-flow: column;
}

header {
  position: fixed;
  z-index: 1;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

#headerLeft {
  margin: 0 0 0 40px;
}

#headerLeftData {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  width: fit-content;
  height: fit-content;
  justify-content: center;
}

#headerLeftDataSquare {
  width: 16px;
  height: 16px;
  background-color: blue;
}

#headerLeftDataName p {
  font:
    normal normal 700 25px/1.12em "poppins-semibold",
    "poppins",
    sans-serif;
}

#headerLeftDataName a {
  text-decoration: none;
  color: inherit;
}

#headerLeftDataRole,
#headerLeftDataSlash {
  padding: 6px 0 0 0;
}

#headerLeftDataSlash p {
  font:
    normal normal 400 17px/1.4em "nunito",
    sans-serif;
}

#headerLeftDataRole p {
  font:
    normal normal 400 17px/1.4em "nunito",
    sans-serif;
}

#headerRight nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#headerRight {
  margin: 0 40px 0 0;
}

#headerRight a {
  text-decoration: none;
}

#headerRight a:hover {
  color: blue;
}

#headerRight p {
  font:
    normal normal lighter 14px/1.4em "roboto",
    sans-serif;
}

@media (max-width: 640px) {
  header {
    justify-content: center;
  }

  #headerLeft {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
  }

  #headerRight {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
  }
}

#mainIndex {
  flex-direction: row;
}

main {
  display: flex;
  padding: 165px 0 52px 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  flex-direction: column;
  align-items: center;
}

#mainContent {
  grid-area: 1 / 1;
  display: flex;
  height: fit-content;
  width: fit-content;
}

#mainContentCard {
  width: 400px;
  height: 500px;
  display: grid;
}

#mainContentCardData {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(247, 247, 247);
  box-shadow: -11.31px 11.31px 17px 0px rgba(138, 131, 124, 0.23);
  height: 100%;
  width: 100%;
}

#mainContentCardDataPhoto {
  margin: 43px 0px 34px 0;
}

#mainContentCardDataPhoto img {
  border-radius: 50%;
  height: 205px;
  width: 205px;
}

#mainContentCardDataName {
  margin: 0px 0px 25px 0;
  width: 179px;
}
#mainContentCardDataName p {
  font:
    normal normal 700 27px/1.12em "poppins-semibold",
    "poppins",
    sans-serif;
  text-align: center;
  margin: 0;
}

#mainContentCardDataLine {
  margin: 0px 0px 25px 0;
  width: 50px;
  border-top: 2px solid rgb(0, 80, 255);
}

#mainContentCardDataTitle {
  width: 277px;
  margin: 0px 0px 41px 0;
}
#mainContentCardDataTitle p {
  font:
    normal normal normal 17px/1.4em "nunito",
    sans-serif;
  letter-spacing: 0.25em;
  text-align: center;
  margin: 0;
}

#mainContentCardDataLinks {
  background-color: white;
  display: grid;
  width: 100%;
  justify-content: center;
}

#mainContentCardDataLinks ul {
  margin: 10px 0px 10px 0;
  list-style: none;

  padding: 0;
}

#mainContentCardDataLinks img {
  width: 30px;
  height: 30px;
}

#mainContentWelcome {
  width: 425px;
  height: fit-content;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  background-color: white;
  justify-content: center;
  align-items: center;
  padding: 0 0 15px 0;
}

#mainContentWelcomeHello p {
  font:
    normal normal bold 100px/1.4em "poppins-semibold",
    "poppins",
    sans-serif;
  margin: 0;
}

#mainContentWelcomeWho p {
  font:
    normal normal normal 24px/1.4em "nunito",
    sans-serif;
  margin: 0;
}

#mainContentWelcomeIntro p {
  padding: 0px 20px 0 20px;
}

#mainContentWelcomeIntro p {
  font:
    normal normal normal 16px/1.4em "nunito",
    sans-serif;
}

#mainContentWelcomeLinks {
  display: flex;
  column-gap: 23px;
  margin: 30px 0px 20px 0px;
}

#mainContentWelcomeLinksButtonResume {
  background-color: rgb(0, 80, 255);
  border: solid rgb(0, 80, 255);
  border-radius: 100px;
  border-width: thin;
  width: 130px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#mainContentWelcomeLinksButtonResume:hover {
  background-color: transparent;
  transition: background-color 0.4s ease;
}

#mainContentWelcomeLinksButtonResume a {
  text-decoration: none;
}

#mainContentWelcomeLinksButtonResume a p {
  font:
    normal normal bold 14px/1.4em "nunito",
    sans-serif;
  color: white;
  transition: color 0.2s ease;
}

#mainContentWelcomeLinksButtonResume:hover a p {
  color: black;
  transition: color 0.4s ease;
}

#mainContentWelcomeLinksButtonProjects {
  background-color: white;
  border: solid rgb(0, 0, 0);
  border-radius: 100px;
  border-width: thin;
  width: 130px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#mainContentWelcomeLinksButtonProjects:hover {
  background-color: rgb(0, 80, 255);
  border: solid rgb(0, 80, 255);
  border-width: thin;
  transition: background-color 0.4s ease;
}

#mainContentWelcomeLinksButtonProjects a {
  text-decoration: none;
}

#mainContentWelcomeLinksButtonProjects a p {
  font:
    normal normal bold 14px/1.4em "nunito",
    sans-serif;
  color: black;
  transition: color 0.2s ease;
}

#mainContentWelcomeLinksButtonProjects:hover a p {
  color: white;
  transition: color 0.4s ease;
}

footer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  font:
    normal normal lighter 15px/1.4em "roboto",
    sans-serif;
  text-align: center;
  margin: auto 0 0 0;
}

footer a {
  text-decoration: none;
}

#footerLeft {
  margin: 0 0 0 40px;
}

#footerRigth {
  margin: 0 80px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 640px) {
  footer {
    justify-content: center;
    width: 100%;
  }

  #footerLeft {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
  }

  #footerRigth {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
  }
}

/*RESUME*/

#mainTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

#mainTitleSquare {
  width: 20px;
  height: 20px;
  background-color: blue;
}

#mainTitleName h1 {
  font:
    normal normal bold 35px/1.4em "poppins-semibold",
    "poppins",
    sans-serif;
}

#mainExp {
  width: 724px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 724px) {
  #mainExp {
    width: 100%;
    justify-content: center;
    flex-direction: column;
  }
}

#mainExpCV {
  background-color: rgb(0, 80, 255);
  border: solid rgb(0, 80, 255);
  border-radius: 100px;
  border-width: thin;
  width: 130px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#mainExpCV:hover {
  background-color: transparent;
  transition: background-color 0.4s ease;
}

#mainExpCV a {
  text-decoration: none;
}

#mainExpCV a p {
  font:
    normal normal bold 14px/1.4em "nunito",
    sans-serif;
  color: white;
  transition: color 0.2s ease;
}

#mainExpCV:hover a p {
  color: black;
  transition: color 0.4s ease;
}

#mainExpName h2 {
  font:
    normal normal bold 25px/1.4em "poppins-semibold",
    "poppins",
    sans-serif;
}

.mainContent {
  background-color: white;
  width: 724px;
  min-height: 385px;
  box-shadow: -11.31px 11.31px 25px 0px rgba(138, 131, 124, 0.23);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 0 20px 0;
}

.mainContentJob {
  width: 241px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mainContentJob p {
  margin: 0;
  text-align: center;
}

.mainContentJobDuration p {
  font:
    normal normal bold 20px/1.4em "poppins",
    sans-serif;
  color: rgb(0, 80, 255);
}

.mainContentJobPosition p {
  font:
    normal normal normal 17px/1.4em "nunito",
    sans-serif;
}

.mainContentJobName p {
  font:
    normal normal normal 14px/1.4em "nunito",
    sans-serif;
}

.mainContentJobDescription {
  width: 440px;
  padding: 0px 20px 0 20px;
  font:
    normal normal normal 16px/1.4em "nunito",
    sans-serif;
}

.mainContentJobImg {
  margin: 20px 0 0 0;
}

.mainContentJobImg img {
  width: 100px;
  height: 100px;
  border-radius: 20%;
  box-shadow:
    0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

@media (max-width: 724px) {
  .mainContent {
    width: 100%;
  }

  .mainContentJob {
    padding: 20px 0 0 0;
    margin: 0;
  }
}