:root {
    --5margin:5mm;
    --7margin:7mm;
}


.certificate {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background: white;
      width:210mm;
      height:297mm;
      zoom:37%;
      border:1px solid grey;
      box-shadow:10px 10px lightblue;
      margin-left:auto;
      margin-right:auto;
/*      font-family: 'CedarvilleCursive';*/
    }

    /* Border offsets and sizes */
    .border-top, .border-bottom {
      position: absolute;
      left: var(--5margin);
      right: var(--5margin);
      height: var(--7margin);
      background-image: url('/static/img/dog_border.png');
      background-repeat: repeat-x;
      background-position: left center, right center;
      background-size: var(--7margin) var(--7margin);
      opacity:25%;
      mask-image:  linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,         /* Fully transparent at top */
        rgba(0, 0, 0, 1) 40%,        /* Fully visible at 10% */
        rgba(0, 0, 0, 1) 60%,        /* Fully visible until 90% */
        rgba(0, 0, 0, 0) 100%        /* Transparent again at bottom */
      );
    }
    .border-top {
      top: var(--5margin);
    }
    .border-bottom {
      bottom: var(--5margin);
      transform:rotate(180deg);
    }

    .border-left, .border-right {
    position: absolute;
      left:198mm;
      top: 12mm;
      bottom: 12mm;
      width: var(--7margin);
      background-image: url('/static/img/dog_border90.png');
      background-repeat: repeat-y;
      background-position: left center, right center;
      background-size: var(--7margin) var(--7margin);
      opacity:25%;
      mask-image:  linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,         /* Fully transparent at top */
        rgba(0, 0, 0, 1) 40%,        /* Fully visible at 10% */
        rgba(0, 0, 0, 1) 60%,        /* Fully visible until 90% */
        rgba(0, 0, 0, 0) 100%        /* Transparent again at bottom */
      );
    }
    .border-left{
      transform:rotate(180deg);
      left:5mm;
    }

    .content {
      position: absolute;
      top: calc(var(--5margin) + var(--7margin));
      bottom: calc(var(--5margin) + var(--7margin));
      left: calc(var(--5margin) + var(--7margin));
      right: calc(var(--5margin) + var(--7margin));
      box-sizing: border-box;
      text-align: center;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title-section {
        padding-top:10mm;
        text-transform: uppercase;
/*        font-family: 'EBGaramond';*/
    }

    .image-section {
      height: 30%;
/*      background: url('certificate-banner.jpg') no-repeat center center;*/
      background-size: cover;
      margin-bottom: 20px;
      margin:var(--5margin);
    }

    .image-section img {
         width: auto;
        height : auto;
        max-height: 100%;
        max-width: 100%;
    }

    .text-section {
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: left;
      flex-basis:fit-content;
      padding:var(--5margin);
    }

    .text-section p {
      margin: 15px 0;
      text-align:left;
    }

    .watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-70deg);
      font-size: 90pt;
      color: rgba(200, 250, 200, 0.75);
      white-space: nowrap;
      pointer-events: none;
      z-index: 2;
    }

@font-face {
    font-family: EBGaramond;
    src: url(/fonts/EBGaramond-VariableFont_wght.ttf);
}
@font-face {
    font-family: Diplomata;
    src: url(/fonts/Diplomata-Regular.ttf);
}
@font-face {
    font-family: CedarvilleCursive;
    src: url(/fonts/CedarvilleCursive-Regular.ttf);
}