style.css

@font-face {
  font-synthesis: none;
  font-display: block;
  font-family: "Fira Sans";
  font-weight: 300;
  src: local("FiraSans-ExtraLight"), url("fonts/FiraSans-ExtraLight.woff2") format("woff2"),
    url("fonts/FiraSans-ExtraLight.woff") format("woff"), url("fonts/FiraSans-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-synthesis: none;
  font-display: block;
  font-family: "Fira Sans";
  font-weight: 500;
  src: local("FiraSans-Medium"), url("fonts/FiraSans-Medium.woff2") format("woff2"),
    url("fonts/FiraSans-Medium.woff") format("woff"), url("fonts/FiraSans-Medium.ttf") format("truetype");
}

body, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #1e1e1e;
  font-family: "Fira Sans", sans-serif;
  padding: min(8vw, 40px);
  overflow-x: hidden;
}

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

.header-image {
  height: auto;
  margin-bottom: min(48px, 5vw);
  margin-left: auto;
  margin-right: auto;
  margin-top: min(16px, 2vw);
  width: min(600px, 95%);
}

.header-text {
  text-align: center;
}

.header-faq {
  color: #000;
  cursor: default;
  text-decoration-style: dotted;
  margin: 2em auto 0;
  text-align: center;
}

.header-faq:hover {
  text-decoration-style: solid;
}

.text {
  font-weight: 300;
}

.text--bold {
  font-family: 'Fira Sans';
  font-weight: 500;
}

.image-container {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fill, minmax(0, 250px));
  /*grid-template-rows: repeat(auto-fill, minmax(0, 250px));*/
  margin: 5em auto;
  min-height: 250px;
  width: 95%;
  justify-content: center;
}

image-component {
  aspect-ratio: 1 / 1;
  /* needed to avoid layout shifts with image */
  opacity: 0;
  visibility: hidden;
}

.faq {
  width: 100%;
  max-width: 700px;
  margin: 5em auto 0;
  text-align: center;
}

.faq-headline {
  font-family: 'Fira Sans';
  font-weight: 500;
  margin-bottom: 2rem;
}

.faq-question {
  font-family: 'Fira Sans';
  font-weight: 500;
}

.faq-answer {
  margin-top: 1em;
  margin-bottom: 2em;
}

.socialmedia {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.contact--mail {
  margin-top: -1em;
  color: #000;
  text-decoration: none;
}

.contact--github {
  display: block;
  margin-top: 1em;
}

lightbox-component {
  display: none;
}

/* For path animation in image*/
image-component svg > path {
  visibility: hidden;
}

@keyframes pathAnimation {
  from {
    visibility: hidden;
    stroke-dashoffset: var(--strokeDasharray);
  }
  to {
    visibility: visible;
    stroke-dashoffset: 0;
  }
}

@keyframes hideAndShowImage {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}