* {
  box-sizing: border-box;
  font-family: 'Open Sans', 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%;

  /* A4 dimentions; setting so doesn't shrink on smaller screen sizes */
  min-width: 297mm;
  min-height: 210mm;

  margin: 0;
  padding: 0;
}

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

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

.certificate {
  /* A4 dimentions; setting, so doesn't expand beyond that size */
  width: 297mm;
  height: 210mm;

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

  padding: 30px;
}

.certificate-header {
  height: 20%;

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

.certificate-header .img-wrapper {
  position: relative;
  width: 20%;
}

.certificate-header .img-wrapper .asu-moe-logo {
  position: absolute;
  width: auto;
  height: 90%;
  left: -18%;
}

.certificate-header .img-wrapper .e-she-logo {
  position: absolute;
  height: 145%;
  width: auto;
  top: -35%;
  right: -15%;
}

.verified-text {
  color: #0D8104;
}

.verified-text .first-line {
  font-size: 45.5px;
  font-weight: 300;
  letter-spacing: 8.645px;
}

.verified-text .second-line {
  font-size: 17.94px;
  font-weight: 300;
  letter-spacing: 0.09px;
}

.certificate-content {
  height: 62%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;

  color: #5C5E60;
  font-size: 14px;
  font-weight: 500;
}

.certificate-content .student-name,
.certificate-content .course-title {
  font-size: 28px;
  font-weight: bold;

  color: #000000;
  font-weight: 500;
}

.certificate-content .student-name {
  font-size: 26px;
}

.certificate-content .course-title {
  font-size: 24px;
}

.certificate-footer {
  height: 18%;

  display: flex;
}

.partnership {
  width: 50%;
  height: 100%;

  display: flex;
  flex-direction: column;

  color: #212121;
  font-size: 12px;
  font-weight: 500;
}

.partnership-logos-wrapper {
  /* setting flex-grow, so it doesn't shrink, because the content has no size
   * due to `position: absolute;` */
  flex-grow: 1;
  position: relative;

  display: flex;
  align-items: end;
}

.partnership-logos {
  position: absolute;
  width: 68%;
  height: 80%;

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

.partnership-logos > img {
  width: auto;
  height: 100%;
}

.metadata {
  width: 50%;
  height: 100%;

  display: flex;
  justify-content: space-between;
  align-items: end;

  color: #5C5E60;
}

.metadata .metadata-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.metadata .metadata-value {
  font-size: 12px;
  font-weight: 500;
}

.metadata .valid-certificate-id .metadata-value {
  color: #0579a9;
}

@media print {
  @page {
    /* just landscape, so works well in both A4 and US Letter */
    size: landscape;
    margin: 0;
  }

  html,
  body {
    /* unsetting so fills the whole page */
    min-width: unset;
    min-height: unset;
  }

  .certificate {
    /* setting so fills the whole page */
    width: 100%;
    height: 100%;
  }
}