/* Romek Sharp Regular */
@font-face {
  font-family: "Romek Sharp Regular";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/romek-regular.woff2") format("woff2");
}

/* Romek Sharp Semibold */
@font-face {
  font-family: "Romek Sharp Semibold";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/romek-semibold.woff2") format("woff2");
}

html,
body {
  font-family: "Romek Sharp Semibold", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #e7adbc; /* Pink */
  color: #2a68aa; /* Blue */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main,
footer {
  padding: 2rem;
}

header {
  padding: 0 2rem 0 2rem;
  position: relative;
  z-index: 1;
}

header h2 {
  margin: 1rem 0 1rem 0;
}

main {
  display: flex;
  gap: 3rem;
  flex: 1;
  position: relative;
  z-index: 1;
}

footer {
  position: relative;
  z-index: 1;
}

.intro-text,
main img {
  width: 50%;
  max-height: 100dvh;
}

main img {
  height: auto;
  object-fit: cover;
}

h1,
h2 {
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  display: inline-block;
}

p {
  font-weight: 600;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

a {
  color: inherit;
}

@media (max-width: 900px) {
  main {
    flex-direction: column;
  }

  .intro-text,
  main img {
    width: 100%;
  }

  main img {
    max-height: none;
  }
}

.symbols {
  display: flex;
  gap: 20px;
  margin-top: 2rem;
}

.symbols img {
  width: auto;
  height: 70px;
  max-height: 70px;
}

.symbols img:nth-child(1) {
  color: #2a68aa;
}

.symbols img:nth-child(2) {
  color: #e8592c;
}

footer::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100%);
  height: 30px;
  top: 0;
  left: 0;
  transform: translate(0, -30px);
  background: linear-gradient(
    to bottom,
    rgba(231, 173, 188, 0),
    rgba(231, 173, 188, 0.9) 70%,
    #e7adbc
  );
  z-index: 2;
}