@import url("./variables.css");
@import url("./font.css");
@import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");

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

body {
  background: #fefff0;
}

.header {
  padding: 1rem 0 1.2rem;
  position: relative;
  display: grid;
  place-content: center;
  border-bottom: 0.375rem solid #000;
  z-index: 99;
}

.right-end {
  position: absolute;
  right: 0;
}
.left-end {
  position: absolute;
  top: 2rem;
  left: 0;
}

nav {
  position: relative;
  display: inline-flex;
  padding: 0.375rem 0 0.375rem 1rem;
  justify-content: space-around;
  align-items: center;
  gap: 6rem;
  border: 5px solid #000;
  background: #fff;
  box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 0.25);
}

.top-right,
.top-left,
.bottom-left,
.bottom-right {
  border: 3px solid #000;
  background: #fff;
  width: 0.875rem;
  height: 0.875rem;
}

.top-right {
  position: absolute;
  right: -0.62775rem;
  top: -0.3125rem;
}

.top-left {
  position: absolute;
  left: -0.4375rem;
  top: -0.4375rem;
}

.bottom-left {
  position: absolute;
  left: -0.4375rem;
  bottom: -0.4375rem;
}

.bottom-right {
  position: absolute;
  right: -0.62775rem;
  bottom: -0.375rem;
}

.logo {
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.logo > span {
  color: #0c0c0c;
  -webkit-text-stroke-width: 0.5;
  -webkit-text-stroke-color: #0c0c0c;
  font-family: "Handlee", cursive;
  font-size: 2.25rem;
  font-weight: 600;
}

.navigation-links {
  list-style: none;
  display: flex;
}

.navigation-link {
  text-decoration: none;
  border-left: 0.25rem solid #000;
  padding: 1rem 2rem;
  color: #0c0c0c;
  font-family: "Space Grotesk Medium";
  font-size: 1.5rem;
}

.navigation-link:hover {
  background: #000;
  color: #fff;
  transition: 0.3s linear, color 0.5s, background-color 0.5s;
}

.bg-yellow {
  z-index: 999;
  position: relative;
}

.yellow {
  z-index: -1;
  background: #ffdc58;
  width: 6rem;
  height: 0.5125rem;
  position: absolute;
  left: 2.25rem;
  bottom: 0.5rem;
}
.menu-toggle {
  display: none;
  cursor: pointer;
}

main {
  padding-block: 2rem;
  padding-inline: 6rem;
}

.card {
  display: flex;
  padding: 3rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  /*  */
  filter: drop-shadow(2px 4px 0px #000);
  background: #fff;
  color: #2b2839;
  /* border-bottom: 6px solid #d8cefe; */
  border-radius: 0.875rem;
}
.label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label > p {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-family: "Space Grotesk Medium";
}
.live {
  border-radius: 0.875rem;
  border: 1px solid #262626;
  background: #bae6ff;
  padding: 0.25rem 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}

.live > span {
  font-size: 0.8125rem;
  text-transform: uppercase;
  font-family: "Space Grotesk Medium";
}

.second-layer {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}

.hero-img {
  flex-basis: 40%;
}

.avatar {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.avatar:hover {
  box-shadow: #ffdc58 0px 0px 0px 2px inset,
    rgb(255, 255, 255) 10px -10px 0px -3px, #2b2839 10px -10px,
    rgb(255, 255, 255) 20px -20px 0px -3px;
}
.second-layer > div:last-of-type {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.second-layer h3,
.contact-card h3 {
  color: #000;
  -webkit-text-stroke-width: 3;
  -webkit-text-stroke-color: #000;
  font-family: "Space Grotesk SemiBold";
  font-size: 3rem;
}

.second-layer p,
.contact-card p {
  color: #000;
  text-shadow: 0px 4px 0px rgba(231, 231, 231, 0.32);
  font-family: "Space Grotesk Regular";
  font-size: 1.5rem;
}

.btn {
  position: relative;
  text-decoration: none;
  align-self: flex-start;
  display: inline-flex;
  /* padding: 1.875rem 3.4375rem; */
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  /* background: #bae6ff; */
  color: #000;
  text-align: center;
  font-family: "Space Grotesk Bold";
  font-size: 1.25rem;

  /* CSS */

  --b: 4px; /* border thickness */
  --s: 0.45em; /* size of the corner */
  --color: #000;

  padding: calc(0.5em + var(--s)) calc(0.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background: conic-gradient(
      from 90deg at var(--b) var(--b),
      #bae6ff 90deg,
      var(--color) 0
    )
    var(--_p) var(--_p) / calc(100% - var(--b) - 2 * var(--_p))
    calc(100% - var(--b) - 2 * var(--_p));
  transition: 0.3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: 0.6em;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn:hover,
.btn:focus-visible {
  transform: rotate(0.543deg);
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: 0.05em;
}

.btn:active {
  background: var(--color);
  color: #fff;
}

.marks {
  width: 3rem;
  position: absolute;
  bottom: -3.3rem;
  left: 10.8rem;
}

#portfolio {
  margin-block: 4rem;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heading > svg {
  width: 7rem;
}
.heading > h3 {
  position: relative;
  color: #000;
  -webkit-text-stroke-width: 3;
  -webkit-text-stroke-color: #000;
  font-family: "Space Grotesk SemiBold";
  font-size: 3rem;
}

.heading h3 svg {
  position: absolute;
  bottom: 0;
  right: 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  --b: 6.281px; /* border thickness */
  --s: 0.45em; /* size of the corner */
  --color: #000;

  /* padding: calc(0.5em + var(--s)) calc(0.9em + var(--s)); */
  padding: 2rem;
  color: var(--color);
  --_p: var(--s);
  background: conic-gradient(
      from 90deg at var(--b) var(--b),
      #fff 90deg,
      var(--color) 0
    )
    var(--_p) var(--_p) / calc(100% - var(--b) - 2 * var(--_p))
    calc(100% - var(--b) - 2 * var(--_p));
  outline: var(--b) solid #0000;
  outline-offset: 0.6em;
  border: 0;
  background-color: #fff;
}

.project-img {
  justify-self: stretch;
  max-height: 16rem;
  width: 100%;
  border: 4.416px solid #000;
  background: #FAFAF8 3.343px 1.412px / 100% 181.161% no-repeat;
  /* background-size: cover; */
}

.project-img img{
  max-height: 100%;
  width: 100%;
  object-fit: cover;
}

.project-desc {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* gap: 4rem; */
}

.desc-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.desc-links {
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.desc-links a {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25788rem 0.34444rem 0.33638rem 0.25813rem;
  justify-content: center;
  align-items: center;
  background: #000;
  box-shadow: 2.358px 2.358px 0px 0px #8e8f87;
}

.desc-links a:hover {
  background: #262626;
  transition: 0.3s linear, background-color 0.5s;
}

.desc-content > h4 {
  font-size: 2rem;
  font-family: "Space Grotesk SemiBold";
}

.desc-content > p {
  font-size: 1.5rem;
  font-family: "Space Grotesk Medium";
}

.tags {
  display: flex;
  gap: 1rem;
}

.tags > span {
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border: 1px solid #262626;
  border-radius: 0.375rem;
  background: #bae6ff;
  color: #000;
  font-family: "Space Grotesk Medium";
  font-size: 0.75rem;
  line-height: 1rem;
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  text-align: center;
  padding: 3rem 6rem;
  margin-top: 8rem;
  border-radius: 0.125rem;
  border: 6px solid #000;
  background: #fff;
  box-shadow: 21px 21px 0px 0px rgba(0, 0, 0, 0.4);
}

.contact-card > svg {
  position: absolute;
  right: 13rem;
  top: -4rem;
}

.contact-card > div:first-of-type {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.socials > a {
  text-decoration: none;
  background: #fff;
  color: #0c0c0c;
  text-align: center;
  -webkit-text-stroke-width: 0.5;
  -webkit-text-stroke-color: #fff;
  font-family: "Handlee", cursive;
  font-size: 2rem;
  box-shadow: 1px 1px 11.2px 0px rgba(0, 0, 0, 0.08);
}

.socials > a:hover {
  text-decoration: underline;
  color: #fff;
  background: #0c0c0c;
  transition: 0.3s linear, color 0.5s, background-color 0.5s,
    text-decoration 0.5s;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10rem;
  padding: 0.5rem 1.5rem;
  margin-top: 1rem;
  border-top: 0.375rem solid #000;
  background-color: #fefff0;
}

.footer .logo {
  padding-inline: 0.25rem;
}

.footer p {
  color: #000;
  text-align: center;
  font-family: "Space Grotesk Medium";
  font-size: 1.5rem;
}

@media (319px <= width <= 1023px) {
  /* … */
  .header {
    padding-inline: 0.875rem;
    padding-block: 1rem;
    overflow: hidden;
    display: flex;
    width: 100%;
  }

  nav {
    padding-right: 1rem;
    max-width: 500px;
    width: 100%;
    justify-content: space-between;
  }

  .logo {
    padding-block: 0.5rem;
  }

  .navigation-links {
    display: none;
    width: 100%;
    position: absolute;
    top: 6rem;
    left: 0;
    right: 0;
    justify-content: space-around;
    align-items: center;
  }

  .navigation-links.active {
    display: flex;
  }

  .yellow {
    width: 3.5625rem;
    height: 0.3125rem;
    position: absolute;
    left: 1.2rem;
    bottom: 0.3rem;
  }
  .navigation-link {
    border-bottom: 0.2rem solid #000;
    border-top: 0.2rem solid #000;
    font-size: 1rem;
    padding: 0.8rem;
  }

  .navigation-link:last-of-type {
    border-right: 0.25rem solid #000;
  }

  .menu-toggle {
    z-index: 1000;
    display: block;
  }

  .logo > img {
    width: 32px;
    height: 32px;
  }
  .logo > span {
    font-size: 1.5rem;
  }
  .right-end {
    display: none;
  }
  .left-end {
    display: none;
  }

  main {
    padding-inline: 1rem;
  }
  .card {
    flex-direction: column;
  }

  .label {
    flex-direction: column;
    gap: 1rem;
    /* align-items: flex-start; */
  }

  .second-layer {
    flex-direction: column;
    gap: 1rem;
  }

  .second-layer > div:last-of-type {
    text-align: center;
    gap: 1rem;
  }

  .second-layer h3,
  .contact-card h3 {
    font-size: 1.5rem;
  }

  .second-layer p,
  .btn,
  .label > p,
  .contact-card p {
    font-size: 1rem;
  }

  .btn {
    align-self: center;
  }

  .marks {
    position: absolute;
    bottom: -3.5rem;
    left: 8.4rem;
  }

  #portfolio {
    margin-block: 2rem;
  }

  .heading > h3 {
    font-size: 1.5rem;
  }

  .heading h3 > svg {
    width: 8rem;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .heading > svg {
    height: 4rem;
    width: 4rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .project {
    gap: 1rem;
  }

  .project-img {
    border: 2px solid #000;
    background: lightgray 1.965px 0.83px / 100% 181.161% no-repeat;
    background-size: cover;
  }
  .desc-links a {
    width: 1.75rem;
    height: 1.75rem;
  }
  .desc-content > h4 {
    font-size: 1.5rem;
  }

  .desc-content > p {
    font-size: 1rem;
  }

  .contact-card {
    border-radius: 0.03275rem;
    border: 1.571px solid #000;
    background: #fff;
    box-shadow: 5.498px 5.498px 0px 0px rgba(0, 0, 0, 0.4);
    padding: 3rem 0.5rem;
  }

  .contact-card > svg {
    width: 4rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .socials {
    grid-template-columns: 1fr 1fr;
  }

  .socials > a {
    font-size: 1.5rem;
  }
  .footer {
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer p {
    font-size: 1rem;
  }
}