styles.css

:root {
   --header-height: 103px; /* This value should be updated if you make an edit which effects the height of the header. However, it is not required as javascript will update that number. */
   --additional-margin: 0rem; /* Increase value to prevent cert from completely filling the screen */
   font-size: 1px;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
}

#screen {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   margin: 0;
   padding: 0;
}

/* Style the header with a grey background and some padding */
.header {
   overflow: hidden;
   background-color: #f1f1f1;
   padding: 15px 10px;
   margin: 0;
}

/* Style the header links */
.header a {
   float: left;
   color: black;
   text-align: center;
   padding: 12px;
   text-decoration: none;
   font-size: 25px;
   line-height: 25px;
   border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
   font-size: 25px;
   font-weight: bold;
}
.header a.logo img {
   height: 45px;
}

/* Change the background color on mouse-over */
.header a:hover {
   background-color: #ddd;
   color: black;
}

/* Style the active/current link*/
.header a.active {
   background-color: dodgerblue;
   color: white;
}

/* Float the link section to the right */
.header-right {
   float: right;
}

.credit {
	height: 45px;
	margin: 15px 10px 0 10px;
	font-size: 20px;
	vertical-align: bottom;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
   .header a {
      float: none;
      display: block;
      text-align: left;
   }
   .header-right {
      float: none;
   }
}

.fab {
   width: 70px;
   height: 70px;
   background-color: #5598ee;
   border-radius: 50%;
   box-shadow: 0 6px 10px 0 #666;
   transition: all 0.1s ease-in-out;

   font-size: 50px;
   color: white;
   text-align: center;
   line-height: 70px;

   position: fixed;
   right: 50px;
   bottom: 50px;
   cursor: pointer;
}

.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
   transform: scale(1.05);
}

#downloadIcon {
   position: absolute;
   top: 25%;
   transform: translate(-50%, -10%);
}

#cert {
   /* width: 100vmin;
   max-width: 100%;
   max-height: 100%;
   height: 75.272727272vmin;
   position: relative;
	TODO CENTER */

   width: 100vw;
   height: 77.272727272vw; /* height:width ratio */
   max-height: CALC(
      100vh - var(--header-height) - var(--additional-margin)
   ); /* Subtract height of header */
   max-width: CALC(
      (100vh - var(--header-height) - var(--additional-margin)) * 1.29411764706
   ); /* Subtract height of header */ /* width:height ratio */
   margin: auto;
   box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12);
}

#certWrapper {
   margin: 0;
   padding: 0;
}

@media only print {
   .header,
   .fab {
      display: none;
   }

   #cert {
      /* width: 100vw;
		height: 75.272727272vw;
		max-width: 100%;
		max-height: 100%; */
      width: 10in !important; /* .5 inch margin */
      height: 7.5in !important; /* .5 inch margin */
      max-width: 10in !important;
      max-height: 7.5in !important;
      overflow: hidden;
      box-shadow: none;
   }

   :root {
      font-size: 1.2px !important;
   }

   @page {
      size: landscape;
   }
}

.message {
   margin: 20px;
   font-size: 16px;
}