@import url("css/satoshi.css");
@font-face {
  font-family: EBGaramond;
  src: url(.fonts/EBGaramond-VariableFont_wght.ttf);
}

:root {
  background-color: #ffffff;
  --primary-font-family: Satoshi-Variable;
  --secondary-font-family: EBGaramond;
  font-family: var(--primary-font-family);
  --primary-color: #000000;
  --secondary-color: #565656;
  --header-color: #4731D4;
  color: var(--primary-color);
  font-style: normal;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

p {
  font-family: var(--secondary-font-family);
}

.contact-details a {
  text-decoration: none;
  color: var(--primary-color);
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  height: 100vh;
}

.section-header-img {
  display: none;
}

.section {
  padding: 10px 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 414px;
}

.main-section {
  padding: 0 24px;
}

.section h1 {
  padding: 64px 0 40px 0;
  font-size: 80px;
  font-weight: 700;
  line-height: 108px;
  /* color: var(--header-color); */
}

.personal-info {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 24px;
}

.personal-info-profile-img {
  align-self: center;
}

.profile-img {
  width: 164px;
  height: 164px;
  border-radius: 50%;
  margin: 29px;
}

.name {
  color: var(--header-color);
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}

.jobtitle {
  font-size: 24px;
  font-weight: 900;
  text-align: left;
}

.secondary-jobtitle {
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--secondary-color);
}

.summary {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  margin: 20px 0;
}

.summary a {
  text-decoration: none;
  color: (var)--header-color;
  font-weight: bolder;
}

.contact-img {
  width: 23px;
}

.section-contact {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.footer-contact {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.contact-icon i {
  color: #000000;
}

.contact-icon i:hover {
  color: #4731D4;
}

.section-scroll {
  padding: 0 24px;
  width: 300px;
}

.section-tech {
  background: #4731D4;
  color: #CBF281;
  height: 530px;
  padding: 0 24px;
}

.section-tech p {
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  color: #ffffff;
}

.span-js {
  background-color: #eb5577;
  color: #ffffff;
}

.span-react {
  background-color: var(--header-color);
  color: #ffffff;
}

.span-mobprog {
  background-color: #2483e0;
  color: #ffffff;
}

.section-featured-projects {
  padding: 0 24px;
}

.featured-projects-title {
  color: #4731D4;
}

.subsection-featured-project {
  padding: 24px 0 18px 0;
}

.section-featured-projects h1 {
  font-size: 72px;
}

.featured-project-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.featured-project-img img {
  height: 280px;
  width: 327px;
  padding: 0 0 12px 0;
  width: 100%;
}

.subsection-featured-project a {
  text-decoration: none;
}

.subsection-featured-project h2 {
  font-size: 32px;
  font-weight: 900;
  line-height: 43px;
  padding: 12px 0 9px 0;
}

.subsection-featured-project p {
  font-size: 22px;
  font-weight: 400;
  line-height: 29px;
  padding: 9px 0 10px 0;
}

.tech-stack {
  flex-direction: row;
  justify-content: flex-start;
  gap: 4px;
  margin: 10px 0 14px 0;
}

.tech-stack p {
  font-family: var(--primary-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  background-color: #4730D3;
  color: #ffffff;
  padding: 2px 6px;
}

.button {
  font-family: var(--primary-font-family);
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  height: 48px;
  border-radius: 40px;
  background-color: #f5f5f5;
  color: #333333;
  border-style: none;
  margin: 12px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  gap: 7px;
  padding: 0px 16px 0px 8px;
  width: 200px;
}

.github-btn:hover svg path {
  fill: #ffffff;
}

.github-btn:hover {
  color: #ffffff;
  background: #4730D3;
  cursor: pointer;
}

.livedemo-btn:hover svg path {
  fill: #ffffff;
}

.livedemo-btn:hover {
  background-color: #4730D3;
  color: #ffffff;
  cursor: pointer;
}

.section-skills {
  background-color: #4730D3;
  padding: 0 24px 64px 24px;
  justify-content: center;
}

.section-skills h1 {
  color: #CBF281;
}

.skill-group {
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  padding: 34px;
  color: #ffffff;
}

.skill-group h4 {
  color: #CBF281;
  margin: 0 0 18px 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.contact-details {
  margin: 56px 0 103px 0;
}

.contact-details h3 {
  font-size: 24px;
  font-weight: 900;
  line-height: 32px;
  font-family: var(--primary-font-family);
}

.section-time-to-talk {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.section-time-to-talk h1 {
  color: #4730D3;
  font-weight: 900;
  font-size: 58px;
  line-height: 78px;
}

.footer {
  padding: 0 0 97px 0;
}

i:hover {
  color: #000000;
}

/* MOBILE */
@media (min-width: 375px) {
  .name {
    color: var(--header-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 0em;
    text-align: left;
  }

  .jobtitle {
    font-size: 32px;
    font-weight: 900;
    line-height: 43px;
    letter-spacing: 0em;
    text-align: left;
  }

  .secondary-jobtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--secondary-color);
  }

  .summary {
    font-weight: 400;
    font-size: 22px;
    line-height: 29px;
    margin: 40px 0;
  }
}

/* TABLET */
@media (min-width: 744px) {
  .header {
    justify-content: space-between;
  }

  .section {
    max-width: 991px;
  }

  .section-header-img {
    display: block;
    width: 100%;
  }

  .main-img {
    width: 100%;
    max-width: 991px;
    height: 50vh;
  }

  .personal-info {
    display: grid;
    grid-template-columns: 0.1fr 0.8fr;
    grid-template-rows: 0.4fr 0.4fr 0.1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "personal-info-profile-img personal-info-summary"
      "personal-info-paragraph personal-info-paragraph"
      "contact-details contact-details"
      "section-contact section-contact"
      "footer-contact footer-contact";
  }

  .personal-info-profile-img {
    justify-self: end;
    align-self: center;
    grid-area: personal-info-profile-img;
  }

  .personal-info-summary {
    justify-self: start;
    align-self: center;
    grid-area: personal-info-summary;
  }

  .personal-info-paragraph {
    justify-self: start;
    align-self: center;
    grid-area: personal-info-paragraph;
  }

  .section-contact {
    justify-self: start;
    align-self: stretch;
    grid-area: section-contact;
    justify-content: start;
    gap: 41px;
    padding: 40px 0;
  }

  .section-scroll {
    position: absolute;
    left: calc(50% - 150px);
    top: 98vh;
  }

  .section-tech p {
    margin: 0 122px;
  }

  .subsection-featured-project {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    grid-template-rows: 0.5fr 0.1fr 0.2fr;
    gap: 0 24px;
    grid-template-areas:
      "featured-project-img featured-project-description featured-project-description"
      "featured-project-img tech-stack tech-stack"
      "featured-project-img livedemo-btn github-btn";
  }

  .github-btn {
    grid-area: github-btn;
  }

  .livedemo-btn {
    grid-area: livedemo-btn;
  }

  .tech-stack {
    grid-area: tech-stack;
  }

  .featured-project-description {
    grid-area: featured-project-description;
  }

  .featured-project-img {
    grid-area: featured-project-img;
  }

  .featured-project-img img {
    height: 100%;
    object-fit: cover;
    width: 184px;
  }

  /* SKILLS */

  .skill-group-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 39px 33px;
  }

  /* TIME TO TALK */

  .section-time-to-talk h1 {
    font-weight: 900;
    font-size: 120px;
    line-height: 162px;
  }

  .contact-details {
    justify-self: center;
    grid-area: contact-details;
  }

  .contact-details h3 {
    font-size: 32px;
  }

  .footer-contact {
    justify-self: center;
    grid-area: footer-contact;
  }
}

/* DESKTOP */
@media (min-width: 1280px) {
  .section-scroll {
    position: absolute;
    top: 98vh;
  }

  .header {
    flex-direction: row-reverse;
    justify-content: stretch;
  }

  .section-header-img {
    width: 50vw;
  }

  .main-img {
    height: 100vh;
    object-fit: cover;
  }

  .personal-info {
    padding: 0 48px;
    grid-template-columns: 0.1fr 1fr;
    width: 50vw;
  }

  .section {
    max-width: 100%;
  }

  .section-tech {
    flex-direction: row;
    padding: 0 230px;
  }

  .section-featured-projects {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .subsection-featured-project {
    max-width: 820px;
  }

  .featured-project-img {
    align-self: stretch;
  }

  .featured-project-img img {
    width: 280px;
  }

  .skill-group-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* TIME TO TALK */

  .section-time-to-talk {
    max-width: 700px;
  }
}