* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;

  /* force browsers to print background images; otherwise users might need to
   * manually click the settings in the print options */
  -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
  color-adjust: exact !important;                 /* Firefox 48 – 96 */
  print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

.certificate-wrapper {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.certificate {
  /* max-width like A4 */
  width: 100%;
  max-width: 297mm;
  /* dimentions taken from the dimentions of the background image provided by
   * the client; the aspect ration is slightly different from A4 (the hight is
   * larger), so can't use standart size; not an issue, since the goal is to
   * redirect users to another service for certificates */
  aspect-ratio: 2376 / 1836;

  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;

  border: 1px solid #b7b3b2;

  display: flex;
  align-items: center;
  justify-content: center;

  container-type: inline-size;
}

.certificate-content {
  color: #000000;
  font-size: 2.0cqw;
  text-align: center;

  width: 60%;

  display: flex;
  flex-direction: column;
  gap: 4cqh;
}