@font-face {
  font-family: "AUTHENTIC Sans";
  src: url("fonts/auth90.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "CMU Typewriter Text";
  src: url("fonts/cmutwreg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "CMU Typewriter Text";
  src: url("fonts/cmutwboldit.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

html {
  font-size: 12px; 
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* ---------------------------------------------
   Card principale
--------------------------------------------- */
.card {
  position: absolute;
  top: 4rem;
  right: 4rem;
  width: 464px;
  max-width: calc(100% - 8rem);
  display: flex;
  flex-direction: column;
  gap: 2rem; 
  padding: 2rem; 
  background: #ffffff;
  border: 1px solid #999999; 
  border-radius: 1rem; 
  color: #095cd7;
}

.card__heading {
  margin: 0;
  font-family: "AUTHENTIC Sans", sans-serif;
  font-weight: 400;
  font-size: 32px; 
  line-height: 1;
}

.card__body {
  margin: 0;
  font-family: "CMU Typewriter Text", monospace;
  font-weight: 400;
  font-size: 16px; 
  line-height: 1.2;
}

.card__body a {
  color: #095cd7;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* ---------------------------------------------
   Breakpoint mobile
--------------------------------------------- */
@media (max-width: 768px) {
  .background {
    background: linear-gradient(
      to bottom,
      rgba(9, 92, 215, 0) 88.6%,
      #095cd7 99%
    );
  }

  .card {
    position: static;
    margin: 2rem; 
    width: auto;
    max-width: 500px; 
    gap: 1rem; 
    border-radius: 1rem; 
    border-width: 0.5px; 
  }

  .card__heading {
    font-size: 26px; 
  }

  .card__body {
    font-size: 14px; 
  }
}