:root {
    --primary-color: #c1a765;
    --primary-color-alt: #ffc323;
    --primary-font-color: #c6a858;
    --primary-font-muted-color: #897c5d;
}

.qr-text-muted {
    color: var(--primary-font-muted-color);
}

.qr-contact-icon {
    margin: 5px 1vw;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background-color: var(--primary-color-alt);
    border: 1vw solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-contact-icon a {
    color: #fff;
    font-size: 6vw;
}

.qr-card-header {
    padding: 0 5em;
    border-top: 0.6em solid var(--primary-color);
    border-bottom: 0.6em solid var(--primary-color);
}

.qr-main-header {
    text-align: center;
    padding: 1em 0 0;
    color: var(--primary-font-color);
}

.invoice, .invoice table {
    padding-top: 1rem;
    color: var(--primary-font-color);
    position: relative;
}

.invoice table td,
.invoice table th {
    vertical-align: middle;
}

.invoice table tfoot,
.invoice table tfoot *  {
    border: 0;
}

.qr-main-header address {
    font-style: italic;
    font-size: .6em;
}

.qr-contact-icons {
    display: flex;
    position: relative;
    padding: 10px 0;
}

.qr-address {
    position: relative;
    text-align: center;
    padding: 1em;
    color: var(--primary-font-color);
}

.qr-address a {
    color: inherit;
    text-decoration: none;
}

.invoice::before,
.qr-contact-icons::before,
.qr-contact-icons::after,
.qr-address::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    /* Border thickness */
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            /* Transparent at start */
            rgba(255, 255, 255, 1) 20%,
            /* Solid white */
            rgba(255, 255, 255, 1) 80%,
            /* Solid white */
            rgba(255, 255, 255, 0) 100%
            /* Transparent at end */
        );
}

.qr-contact-icons::after {
    bottom: 0;
    top: unset;
}

.qr-contact-icons ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
}

.qr-visible-contacts {
    display: flex;
    list-style: none;
    color: var(--primary-font-color);
    gap: 10px;
    margin: 0;
    padding: 2px;
    justify-content: center;
}

.qr-visible-contacts li {
    position: relative;
    padding: 2vw 0;
}

.qr-visible-contacts li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    width: 1px;
    height: 100%;
    /* Border thickness */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            /* Transparent at start */
            rgba(255, 255, 255, 1) 20%,
            /* Solid white */
            rgba(255, 255, 255, 1) 80%,
            /* Solid white */
            rgba(255, 255, 255, 0) 100%
            /* Transparent at end */
        );
}

.qr-visible-contacts li a {
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.qr-visible-contacts li a i {
    color: var(--primary-color-alt);
}

.qr-visible-contacts li a span {
    font-size: 3vw
}

.qr-visible-contacts li a h5 {
    font-size: 5vw;
    margin-bottom: 0;
}

@media (max-width: 312px) {
    .qr-card-header {
        padding: 0 1em;
    }
}

@media (min-width: 576px) {
    body {
        font-size: 20px;
    }

    .qr-card {
        border: .5em solid var(--primary-color);
        box-shadow: 5px 5px 20px;
        max-width: 500px;
        align-self: end;
        margin: 10vh 5vw;
        box-shadow: 0px 0 35px var(--primary-color-alt);
    }

    .qr-card-header {
        border-bottom: 0.2em solid var(--primary-color);
    }

    .qr-contact-icon {
        width: 50px;
        height: 50px;
        border-width: 4px;
    }

    .qr-contact-icon a {
        font-size: 25px;
    }

    .qr-visible-contacts li {
        padding: 20px 0;
    }

    .qr-visible-contacts li a span {
        font-size: 15px;
    }

    .qr-visible-contacts li a h5 {
        font-size: 20px;
    }
}