/* Imports the necessary fonts from Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");

/* Optimizes the layout for printing */
@media print {
    @page {
        size: auto;
        margin: 0;
        border: 0;
    }
    html,
    body {
        height: auto;
        margin: 0 !important;
    }
}

/* Defines color variables used throughout the stylesheet */
:root {
    --color-primary: #0668B3;
    --color-gray: #747e92;
    --color-black: #3d464b;
}

/* Basic page setup */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Ensures colors are printed correctly */
body {
    -webkit-print-color-adjust: exact !important;
}

/* Allows the certificate to be scrolled horizontally on small screens */
.certificate-scroll-container {
    max-width: 100%;
    overflow-x: auto;
}

/* Sets the dimensions and positioning of the main certificate container */
.certificate-wrapper {
    position: relative;
    width: 29.7cm;
    height: 21cm;
    margin: 0 auto;
}

/* Styles the background image to fill the container */
.main-bg {
    display: block;
    width: 29.7cm;
    height: 21cm;
}

/* Vertically and horizontally centers the certificate content over the background */
.certificate-body {
    position: absolute;
    left: 0;
    top: 0;
    width: 29.7cm;
    height: 21cm;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Styles the logo image */
.certificate-logo {
    display: inline-block;
    margin-bottom: 50px;
    margin-top: 0px;
    height: 90px;
}

/* Container for the main text elements */
.inner {
    max-width: 7000px; /* Note: This value is from the original CSS and is unusually large */
}

/* Styles the recipient's name */
.user-name {
    border-bottom: none;
    color: var(--color-primary);
    font-size: 48px;
    line-height: 40px;
    font-weight: 400;
    display: inline-block;
    padding: 10px 18px;
    margin-top: 16px;
    margin-bottom: 16px;
    word-break: break-word;
}

/* Styles the course name */
.course-name {
    color: var(--color-primary);
    font-size: 48px;
    line-height: 30px;
    font-weight: 300;
    display: block;
    margin-top: 60px;
    margin-bottom: 8px;
}

/* Styles general text elements like "This certificate is proudly presented to" */
.certificate-text {
    text-align: center;
    color: var(--color-gray);
    font-size: 18px;
    line-height: 17px;
}

/* Lays out the bottom section of the certificate */
.certificate-bottom {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Styles the date container */
.date-cert {
    border-bottom: none;
    text-align: center;
    margin-top: 20px;
    height: 25px;
    line-height: 22px;
    font-size: 14px;
    margin-bottom: 2px;
    display: block;
    color: var(--color-black);
}

/* Styles the bolded date text */
.date-cert strong {
    display: block;
    color: var(--color-gray);
    height: 25px;
    line-height: 25px;
    font-size: 14px;
}

/* Positions the certificate ID number at the bottom */
.certificate-number {
    display: block;
    position: absolute;
    left: 0;
    bottom: 120px;
    font-size: 13px;
    font-weight: 300;
    width: 100%;
    text-align: center;
}