/* ===== Global ===== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;

  background-image: url("img/gradient.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ===== Main Container ===== */

.desktop {
  width: 100%;
  max-width: 1280px;
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  padding: 24px 24px 32px;
  color: #262626;
}

/* ===== Navigation ===== */

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.frame-wrapper,
.frame-2 {
  display: flex;
  align-items: center;
  gap: 32px;
}

.text-wrapper-2 {
  font-family: var(--link-font-family);
  font-weight: var(--link-font-weight);
  font-size: var(--link-font-size);
  letter-spacing: var(--link-letter-spacing);
  line-height: var(--link-line-height);
  color: #262626;
}

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

/* ===== SECRET SANTA Block ===== */

.footer {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0 24px;

  border-top: 1px solid rgba(38, 38, 38, 0.15);
  text-align: center;
}

.text {
  display: flex;
  justify-content: center;
}

.secret-santa {
  font-family: var(--heading-3-font-family);
  font-weight: var(--heading-3-font-weight);
  font-size: var(--heading-3-font-size);
  line-height: var(--heading-3-line-height);
  letter-spacing: var(--heading-3-letter-spacing);
  color: #262626;
  text-align: center;
}

/* ===== Contact ===== */

.contact {
  margin-top: 32px;
  width: 100%;
  max-width: 900px;
  align-self: center;

  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.insta,
.email {
  font-family: var(--heading-1-font-family);
  font-weight: var(--heading-1-font-weight);
  font-size: var(--heading-1-font-size);
  line-height: var(--heading-1-line-height);
  letter-spacing: var(--heading-1-letter-spacing);
  color: #262626;
}

.footer .logo {
  display: block;
  height: auto;          /* Proportionen beibehalten */

  /* Proportional zur Breite des Viewports */
  width: 24vw;

  /* Grenzen, damit es nicht lächerlich groß/klein wird */
  min-width: 3200px;
  max-width: 720px;

  margin: 32px auto 40px;
  opacity: 0.9;
}



/* ===== Bottom Row ===== */

.div {
  margin-top: auto;
  width: 100%;
  max-width: 900px;
  align-self: center;

  display: flex;
  justify-content: space-between;
}

.text-wrapper {
  font-family: var(--heading-3-font-family);
  font-weight: var(--heading-3-font-weight);
  font-size: var(--heading-3-font-size);
  letter-spacing: var(--heading-3-letter-spacing);
  line-height: var(--heading-3-line-height);
  color: #262626;
  white-space: nowrap;
}