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

html,
body {
  color: #565656;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.35;
  font-family: 'Open Sans', 'Arial', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Tektur';
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

.hero {
  background: #212121;
  min-height: 60vh;
  padding: 2rem;
  color: white;
  display: grid;
  justify-content: center;
  align-items: center;
}

.hero .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero > .hero-content > h1 {
  margin-bottom: 2rem;
  text-align: center;
}

.about-container {
  background: #fff;
  padding: 6rem 2rem;
}

.about-container .about-text {
  max-width: 75ch;
  margin: 0 auto;
  hyphens: auto;
  text-align: justify;
}

.technologies-section {
  margin-inline: auto;
  max-width: 75ch;
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, .05);
  margin-bottom: 6rem;
}

.technologies-container {
  container-type: inline-size;
  max-width: 572px;
  padding: 3rem 2rem 3rem 2rem;
  margin-inline: auto;
}

.technologies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 1rem;

  @container (width >=calc(50px * 2 + 1rem)) {
    > * {
      grid-column-end: span 2;
    }
  }

  @container (calc(50px * 4 + 3rem) < width < calc(50px * 6 + 5rem)) {
    > *:last-child:nth-child(odd) {
      grid-column-start: 2;
    }
  }

  @container (calc(50px * 6 + 5rem) < width < calc(50px * 8 + 7rem)) {
    > *:nth-child(3n + 4):last-child {
      grid-column-start: 3;
    }

    &:has(:nth-child(3n + 5):last-child) > :nth-last-child(2) {
      grid-column-start: 2;
    }
  }

  @container (calc(50px * 8 + 7rem) < width < calc(50px * 10 + 9rem)) {
    > *:nth-child(4n + 5):last-child {
      grid-column-start: 4;
    }

    &:has(:nth-child(4n + 6):last-child) > :nth-last-child(2) {
      grid-column-start: 3;
    }
  }
}

.technology {
  box-shadow: 0px 2px 6px #eee;
  padding: 2rem;
  background-color: #fff;

  @media (max-width: 1024px) {
    padding: 1.75rem;
  }

  @media (max-width: 768px) {
    padding: 1.5rem;
  }

  @media (max-width: 425px) {
    padding: 1.25rem;
  }
}

.email {
  display: flex;
}

.email a {
  margin-left: 0.5rem;
}