/* COLOR VARIABLES */
/* VARIABLES */
/* BREAKPOINTS */
*,
:after,
::before {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #e0e2e8;
}

::-webkit-scrollbar-thumb {
  background: #7b7a7a;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

html,
body {
  min-height: 100%;
  min-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  background-color: #2d3134;
  color: #f3f4f6;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

a {
  position: relative;
  color: #51b0d2;
  cursor: pointer;
  text-decoration: none;
  word-break: break-all;
}
a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  inset: auto auto 0 0;
  background: currentColor;
  visibility: hidden;
  border-radius: 7px;
  transform: scaleX(0);
  transition: 0.25s linear;
}
a:hover, a:focus {
  outline: none;
}
a:hover:before, a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

nav {
  height: 3rem;
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  gap: 2rem;
  z-index: 10;
  background-color: #2d3134;
  font-size: clamp(0.75rem, 3vw, 1.5rem);
  padding: 0.5rem 1em;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 720px) {
  nav {
    justify-content: center;
  }
}
nav a {
  color: #f3f4f6;
}

main {
  margin-top: 3rem;
}
main h2 {
  font-size: clamp(1.2rem, 3vw, 2rem);
  margin: 0 0 0.5em 0;
  text-align: center;
  font-weight: 800;
}
main section {
  scroll-margin-top: 3rem;
  padding: 2.5rem 10vw;
}
main section:nth-child(2n) {
  background-color: #e0e2e8;
  color: #403f3f;
}
main #contact .container > p {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: bold;
}
main #contact .container .contact_icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}
main #contact .container .contact_icons a {
  height: 2.5rem;
  width: 2.5rem;
  background-position: center;
  background-repeat: no-repeat;
}
main #contact .container .contact_icons a::before {
  display: none;
}
main #contact .container .contact_icons a:focus, main #contact .container .contact_icons a:hover {
  filter: invert(0.25);
}
main #contact .container .contact_icons a#gmail {
  background-image: url("../img/icon-gmail.svg");
}
main #contact .container .contact_icons a#github {
  background-image: url("../img/icon-github.svg");
  background-size: cover;
}
main #contact .container .contact_icons a#instagram {
  background-image: url("../img/icon-instagram.svg");
  background-size: cover;
}
main #portfolio .portfolio_cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem;
}
@media screen and (max-width: 720px) {
  main #portfolio .portfolio_cards {
    flex-direction: column;
  }
}
@media screen and (max-width: 480px) {
  main #portfolio .portfolio_cards {
    gap: 0.75rem;
  }
}
main #portfolio .portfolio_cards .portfolio_card {
  flex: 1;
  display: grid;
  grid-template-areas: "header header" "desc icon" "link link";
  gap: 0.75rem 1vw;
  padding: 0.75rem;
  border: 2px solid #f3f4f6;
  border-radius: 7px;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_header {
  grid-area: header;
  margin: 0;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 1.25rem;
  font-weight: bold;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_desc {
  grid-area: desc;
  align-self: center;
  max-height: 10rem;
  min-width: 5rem;
  margin: 0;
  font-style: italic;
  overflow-x: hidden;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_desc::-webkit-scrollbar {
  width: 3px;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_icon {
  --padding: 5px;
  grid-area: icon;
  align-self: center;
  height: calc(3em + var(--padding));
  width: calc(3em + var(--padding));
  padding: var(--padding);
  margin-left: auto;
  border: 2px solid #f3f4f6;
  border-radius: 50%;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_icon.no-padding {
  padding: 0;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_icon img {
  width: 100%;
  aspect-ratio: 1;
}
main #portfolio .portfolio_cards .portfolio_card .portfolio_card_link {
  grid-area: link;
  align-self: end;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
main #soc {
  text-align: center;
  font-size: larger;
}
main #soc .container > div {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0.5rem;
}
main #soc .container > div img {
  --padding: 5px;
  height: calc(3em + var(--padding));
  width: calc(3em + var(--padding));
  padding: var(--padding);
  background-color: #2d3134;
  border: 2px solid #2d3134;
  border-radius: 50%;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  font-size: clamp(0.75rem, 3vw, 1rem);
  background-color: #2d3134;
}
footer > p {
  margin: 0;
}/*# sourceMappingURL=main.css.map */