/* General styles */

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  width: 100%;
  height: 100%;
  overflow: overlay;
  position: relative;
  overflow-x: hidden;

  --primary-text-color: #181820;
  --secondary-text-color: #5c5c62;
  --primary-light-text-color: #fff;
  --durability-text-color: #26292cb9;
  --text-decoration-color: #383838c7;
  --dark-background : #161616;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 0;
}

@font-face {
  font-family: sans-serif, "Matter Regular";
  src: url('assets/fonts-ttf/matter-regular.ttf') format('truetype');
}

@font-face {
  font-family: sans-serif, "Matter Light";
  src: url('assets/fonts-ttf/matter-light.ttf') format('truetype');
}

#main {
  width: 100%;
  background-color: var(--primary-light-text-color);
}

.container {
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
}

.fh {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.fv {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Herp styles */

.content-container {
  width: 100%;
  padding: 15vw 11vw;
}

.cover {
  width: fit-content;
  height: fit-content;
  overflow: hidden;
  padding-bottom: 0%;
}

.content {
  display: flex;
  flex-direction: column;
}

.content-upper {
  font-family: sans-serif, "Matter Regular";
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1px;
  margin-left: 6px;
  color: var(--primary-text-color);
}

.content-upper::selection {
  color: var(--primary-light-text-color);
  background-color: var(--primary-text-color);
}

.content-medium {
  font-family: sans-serif, "Matter Regular";
  font-size: 7.5rem;
  color: transparent;
  -webkit-text-stroke: 2px #605d5d;
  letter-spacing: -6px;

}

.end-home-page {
  width: 100%;
  padding: 1vw 11vw;
  display: flex;
  flex-direction: column;
}

.end-content {
  font-family: sans-serif, "Matter Regular";
  font-size: 30px;
  font-weight: 600;
  word-spacing: 2px;
  line-height: 40px;
}

.end-content::selection {
  color: var(--primary-light-text-color);
  background-color: var(--primary-text-color);
}

/* Contact info styles */

#third-page, #fifth-page {
  width: 100%;
  padding-top: 13vw;
  padding-bottom: 13vw;
  background-color: var(--primary-light-text-color);
}

.third-page-content, .fifth-page-content {
  margin-top: -15vh;
}

.third-page-upper, .fifth-page-upper {
  color: var(--primary-text-color);
  font-family: sans-serif, "Matter Regular";
  font-size: 100px;
  display: flex;
  flex-direction: column;
  padding: 5vw 11vw;
  padding-bottom: 1vw;
}

.third-page-upper h2 {
  font-size: 100px;
}

.hey {
  font-family: sans-serif, "Matter Light";
  font-style: italic;
}

.third-page-middle, .fifth-page-middle, .sixth-page-middle {
  padding: 3vw 11vw;
  margin-top: 2vw;
}

.third-page-middle p {
  font-family: sans-serif, "Matter Light";
  font-size: 30px;
}

.third-page-lower {
  padding: 0 11vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 2vw;
}

.third-page-lower-btn {
  display: flex;
  align-items: center;
}

.contact-icon {
  width: 30px;
  height: 30px;
  padding-right: 7px;
}

.third-page-lower a {
  padding: 1.3vw 2vw;
  font-family: sans-serif, "Matter Regular";
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-text-color);
  background-color: transparent;
  border: 2.5px solid var(--primary-text-color);
  border-radius: 100px;
  text-transform: capitalize;
}

/* Skills styles */

#fourth-page, #sixth-page {
  width: 100%;
  background-color: var(--dark-background);
  padding-top: 10vw;
  padding-bottom: 10vw;
}

.fourth-page-upper, .sixth-page-upper  {
  padding: 3vw 11vw;
  color: var(--primary-light-text-color);
  padding-bottom: 0;
}

.fourth-page-upper h2, .sixth-page-upper h2 {
  font-family: sans-serif, "Matter Regular";
  font-size: 120px;
  font-weight: 500;
  color: var(--primary-light-text-color);
  margin-top: -2vw;
}

.fourth-page-upper h2::selection {
  color: var(--primary-text-color);
  background-color: var(--primary-light-text-color);
}

.resources {
  font-family: sans-serif, "Matter Light";
  font-style: italic;
}

.fourth-page-middle {
  padding: 3vw 11vw;
  padding-top: 4.5vw;
}

#github-btn {
  padding: 10px 45px;
}

.fourth-page-middle a {
  padding: 10px 20px;
  font-family: sans-serif, "Matter Regular";
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary-light-text-color);
  background-color: transparent;
  border: 2px solid #7a7070;
  border-radius: 100px;
  text-transform: capitalize;
  margin-right: 10px;
}

.skill-btn svg, #github-btn svg{
  height: 35px;
  width: 35px;
  position: relative;
  bottom: -11px;
}

.fourth-page-lower {
  padding: 0 11vw;
  margin-top: -1vw;
}

.fourth-page-lower p {
  font-family: sans-serif, "Matter Light";
  width: 62.5%;
  font-size: 24px;
  font-weight: 200;
  color: var(--primary-light-text-color);
}

/* Experience and additional info styles */

.fifth-page-middle {
  display: flex;
  justify-content: space-between;
}

.experiences {
  flex: 1 1 60%;
  margin-right: 50px;
}

.experiences-header {
  color: var(--secondary-text-color);
  text-align: left;
  margin-bottom: 20px;
}

.experiences-company-header-durability {
  color: var(--durability-text-color);
  text-align: left;
  margin-bottom: 11px;
  font-family: sans-serif, "Matter Light";
  font-size: 18px;
}

.experiences-company-header-name {
  color: var(--primary-text-color);
  text-decoration-color: var(--text-decoration-color);
  text-decoration-line: underline;
  text-align: left;
  margin-block: 9px 20px;
  font-family: sans-serif, "Matter Regular";
  font-size: 30px;
}

.experiences-company-project {
  margin-left: 15px;
  margin-bottom: 25px;
}

.experiences-company-project-role {
  color: var(--durability-text-color);
  text-align: left;
  margin-bottom: 10px;
  font-family: sans-serif, "Matter Light";
  font-style: italic;
  font-size: 20px;
}

.experiences-company-project-name {
  color: var(--primary-text-color);
  text-align: left;
  margin-block: 10px;
  font-family: sans-serif, "Matter Regular";
  font-size: 25px;
}

.experiences-company-project-responsibilities {
  color: var(--secondary-text-color);
  padding-left: 15px;
  font-family: sans-serif, "Matter Light";
  font-size: 20px;
}

.experiences-company-project-responsibilities li {
 margin-bottom: 5px;
}

.light-txt {
  color: var(--primary-light-text-color);
}

.align-end {
  text-align: end;
}

.no-underline {
  text-decoration: none;
}


@media (width <=576px) {
  html {
    overflow-x: hidden;
  }

  body {
    width: 100vw;
  }

  .content-container {
    width: 100vw;
    height: 68.4vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 100vw;
    display: flex;
  }

  .content-upper {
    font-size: 30px;
    font-family: sans-serif, "Matter Regular";
    margin-left: 2px;
  }

  .content-medium {
    font-size: 70px;
    letter-spacing: -2px;
    line-height: 63px;
    font-family: sans-serif, "Matter Regular";
    margin-bottom: 4px;
    -webkit-text-stroke: 1px #605d5d;
  }

  .end-content {
    font-size: 25px;
    font-weight: 600;
    word-spacing: 2px;
    line-height: 28px;
    margin-bottom: 10px;
    font-family: sans-serif, "Matter Regular";
  }

  .featured-heading {
    font-size: 70px;
    font-family: sans-serif, "Matter Regular";
  }

  .scroll-instruction {
    font-size: 15px;
    color: #817f7f;
    padding-bottom: 2vw;
    margin-top: -6vw;
    margin-bottom: 4vw;
    font-family: sans-serif, "Matter Regular";
  }

  .featured-body {
    overflow-x: auto;
    height: 60vh;
    width: 78vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .project-name {
    font-family: sans-serif, "Matter Regular";
  }

  .special,
  .special-2,
  .special-3,
  .special-4 {
    font-family: sans-serif, "Matter Regular";
  }

  #third-page {
    height: 110vh;
    width: 100%;
    padding-top: 13vw;
    padding-bottom: 13vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .third-page-upper, .fifth-page-upper {
    color: var(--primary-text-color);
    font-family: sans-serif, "Matter Regular";
    font-size: 48px;
    display: flex;
    flex-direction: column;
    padding: 5vw 11vw;
    padding-bottom: 1vw;
  }

  .third-page-upper h2 {
    font-size: 48px;
  }

  .hey {
    font-family: sans-serif, "Matter Regular";
  }


  .third-page-middle {
    padding: 3vw 11vw;
    margin-top: 2vw;
    margin-bottom: 4vw;
  }

  .third-page-middle p {
    font-family: sans-serif, "Matter Light";
    font-size: 30px;
  }

  .third-page-lower {
    padding: 0 11vw;
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    justify-content: start;
    gap: 2vw;
  }

  .third-page-lower a {
    padding: 2.3vw 3vw;
    font-family: sans-serif, "Matter Regular";
    font-size: 17px;
    font-weight: 500;
    color: var(--primary-text-color);
    background-color: transparent;
    border: 2px solid var(--primary-text-color);
    border-radius: 100px;
    text-transform: capitalize;
    margin: 0.5vh 0;
  }

  #fourth-page {
    width: 100%;
    height: 100vh;
    background-color: var(--dark-background);
    padding-bottom: 10vw;
    padding-left: 11vw;
    padding-right: 11vw;
    display: flex;
    align-items: center;
  }

  .fourth-page-content {
    padding: 0%;
    margin: 0%;
  }

  .fourth-page-upper, .sixth-page-upper {
    color: var(--primary-light-text-color);
    padding: 0;
  }

  .fourth-page-upper h2, .sixth-page-upper h2 {
    font-family: sans-serif, "Matter Regular";
    font-size: 50px;
    font-weight: 500;
    color: var(--primary-light-text-color);
    margin-top: -2vw;
  }

  .fourth-page-middle {
    padding: 4.5vw 0;
  }

  .fourth-page-middle a {
    padding: 1.3vw 2vw;
    font-family: sans-serif, "Matter Regular";
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--primary-light-text-color);
    background-color: transparent;
    border: 2px solid #7a7070;
    border-radius: 100px;
    text-transform: capitalize;
  }

  .fourth-page-lower {
    padding: 3vw 0;
  }

  .fourth-page-lower p {
    font-family: sans-serif, "Matter Light";
    width: 100%;
    font-size: 20px;
    font-weight: 200;
    color: var(--primary-light-text-color);
  }

  #fifth-page {
    width: 100%;
    padding-top: 13vw;
    padding-bottom: 13vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .fifth-page-content {
    margin-top: 15vh;
  }

  .fifth-page-middle {
    flex-direction: column;
    row-gap: 20px;
  }

  #sixth-page {
    width: 100%;
    background-color: #161616;
    padding: 15vh 11vw 10vw;
  }
}