:root {
  --background-color: #f8f7f3;
  --border-color: #ded5cf;
  --cta-color: #ff4023;
  --dark-color: #1a1917;
}
::selection {
  background-color: var(--cta-color);
  color: var(--background-color);
}
* {
  box-sizing: border-box;
}
.m-t-10 {
  margin-top: 10px;
}
.m-t-20 {
  margin-top: 20px;
}
.m-t-30 {
  margin-top: 30px;
}
.m-t-40 {
  margin-top: 40px;
}
body {
  background-color: var(--background-color);
  font-family: "Encode Sans Semi Expanded", sans-serif;
  font-weight: 500;
}
a {
  text-decoration: none;
  color: var(--cta-color);
  /* font-size: 14px; */
}
p {
  font-size: 14px;
}
/* grid layout desktop */
.grid {
  max-width: 1200px;
  width: 100%;
  /* justify-content: center; */
  background-color: var(--border-color);
  margin: 0 auto;
  display: grid;
  gap: 1px;
  grid-template-rows: [top] 80px [header] 280px [projects] auto [tools-title]280px [tools] auto [ask-title] 280px [question-content] 280px [footer-first] 180px [footer-second] 100px;
  border: 1px solid var(--border-color);
}
.nav,
.header-title,
.item,
.items,
.item-git,
.tools-title,
.ask-title,
.ask-container,
.footer-first,
.footer-second {
  background-color: var(--background-color);
  display: flex;
  padding: 40px;
}
/* NAVIGATION */
.nav {
  padding-left: 20px;
  align-items: center;
}
/* HEADER */
.header-title {
  flex-direction: column;
  gap: 10px;
}
.header-title-first,
.header-title-second {
  font-weight: 700;
  font-size: 48px;
}
.header-title-first {
  color: var(--cta-color);
}
.header-title-second {
  color: var(--dark-color);
}
/* PROJECTS */
.projects-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 240px;
  gap: 1px;
}
.item,
.items {
  flex-direction: column;
  gap: 10px;
  /* align-items: center; */
}
.project-name {
  color: var(--dark-color);
  font-weight: 700;
  font-size: 24px;
}
.project-tag {
  color: var(--cta-color);
}
.project-tag,
.project-description {
  font-weight: 500;
  font-size: 14px;
}
.item-links {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  /* border: 1px solid crimson; */
}
.project-link {
  color: var(--cta-color);
  width: 100%;
  height: 100%;
  padding: 10px;
  /* border: 1px solid var(--border-color); */
  font-size: 14px;
  /* border-radius: 6px; */
  transition: 0.4s ease;
}
.project-link:hover {
  background-color: var(--cta-color);
  color: var(--background-color);
}
.item-git {
  justify-content: center;
  align-items: center;
}
.button-git {
  width: 300px;
  height: 70px;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s ease;
  font-weight: 700;
  font-size: 24px;
  color: var(--dark-color);
}
.button-git:hover {
  border: 1px solid var(--cta-color);
}
/* .project-link:hover { */
/*   color: var(--cta-color); */
/* } */
/* TOOLS */
.tools-title,
.ask-title {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title-first,
.title-second {
  font-weight: 700;
  font-size: 48px;
}
.title-first {
  color: var(--cta-color);
}
.title-second {
  color: var(--dark-color);
}

.tools-container {
  padding: 40px 0px;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 540px);
  grid-auto-rows: 220px;
  gap: 40px;
  background-color: var(--background-color);
}
.items {
  border: 1px solid var(--border-color);
}
/* ASK */
.ask-container {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* gap: 10px; */
  /* border: 1px solid crimson; */
}
.ask {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* border: 1px solid crimson; */
}
input[type="text"] {
  text-align: center;
  box-sizing: border-box;
  background-color: var(--background-color);
  width: 460px;
  height: 60px;
  border: 1px solid var(--border-color);
  outline: none;
  font-family: "Encode Sans Semi Expanded", sans-serif;
  font-weight: 500;
  font-size: 24px;
  transition: 0.4s ease;
}
input[type="text"]:focus {
  border: 1px solid var(--cta-color);
}
.button-copy {
  width: 60px;
  height: 60px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s ease;
}
.button-copy:hover {
  border: 1px solid var(--cta-color);
}
.material-symbols-outline {
  font-size: 20px;
  color: var(--cta-color);
}
/* FOOTER FIRST*/
.footer-first {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.f-left {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.f-zeus {
  font-weight: 700;
  font-size: 24px;
}
.f-right {
  display: flex;
  gap: 40px;
  justify-content: flex-end;
  align-items: center;
}
.f-link {
  color: var(--dark-color);
  font-weight: 500;
  font-size: 14px;
}
/* FOOTER SECOND */
.footer-second {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-second-text {
  font-weight: 500;
  font-size: 14px;
}
/* RESPONSIVE - Laptops */
@media screen and (max-width: 1199px) {
  /* body { */
  /*   background-color: Red; */
  /* } */
  .grid {
    max-width: 960px;
    /* width: 100%; */
    display: grid;
    background-color: var(--border-color);
    grid-template-rows: 80px 280px auto 280px auto 280px 280px auto 100px;
    box-sizing: border-box;
  }
  .nav,
  .header-title {
    background-color: var(--background-color);
  }
  .projects-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  .tools-container {
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 40px;
  }
  .footer-first {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 40px;
  }
  .f-left {
    align-items: center;
  }
  .f-right {
    /* gap: 20px; */
    flex-direction: column;
    justify-content: center;
  }
}
/* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
/* RESPONSIVE - Tablets */
@media screen and (max-width: 991px) {
  /* body { */
  /*   background-color: slateblue; */
  /* } */
  .grid {
    max-width: 720px;
  }
  /* .projects-container { */
  /*   grid-template-columns: 1fr; */
  /* } */
}

/* RESPONSIVE - Phones */
@media screen and (max-width: 776px) {
  /* body { */
  /*   background-color: green; */
  /* } */
  .grid {
    max-width: 540px;
  }
  input[type="text"] {
    width: 340px;
    font-size: 18px;
  }
  .header-title-first,
  .title-first {
    font-size: 38px;
  }
  .header-title-second,
  .title-second {
    font-size: 38px;
  }
}

/* RESPONSIVE - Small Phones */
@media screen and (max-width: 575px) {
  /* body { */
  /*   background-color: Red; */
  /* } */
  .grid {
    max-width: 100%;
  }
  input[type="text"] {
    width: 270px;
  }
}