@font-face {
    font-family: ThermalSans;
    src: url("/static/fonts/Merchant\ Copy.ttf");
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

html {
    background-color: white;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: rgb(33, 33, 37);
    }
}
@media (min-width: 600px) {
    .receipt-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .receipt {
        width: 450px;
        padding: 1.5rem;
        transform: rotate(1deg);
        font-size: 20pt;
    }
}

@media (max-width: 599px) {
    .receipt-container {
        width: 100%;
        height: 100%;
    }
    .receipt {
        width: 100%;
        height: 100%;
        padding: 1.5rem;
        font-size: 20pt;
    }
}

.receipt {
    text-align: center;
    font-family: ThermalSans, monospace;
    color: #1a1a1a;

    background-image: url("/static/backgrounds/white-crumpled-paper-texture-background.jpg");
    background-size: cover;
    backdrop-filter: blur(50px);
}

p {
    margin: 1.5rem 0px;
}

.logo {
    width: 70%;
}

.info-table {
    text-align: left;
}

.field-name {
    padding-right: 15px;
}
.info-table td {
    padding-bottom: 10px;
    vertical-align: text-top;
}

.field-name a:link {
    text-decoration: none;
    color: #1a1a1a;
}
.field-name a:visited {
    text-decoration: none;
    color: #1a1a1a;
}
.field-name a:hover {
    text-decoration: underline;
}
.field-name a:active {
    text-decoration: underline;
}

.field-value a:link {
    text-decoration: none;
    color: #555;
}
.field-value a:visited {
    text-decoration: none;
    color: #555;
}
.field-value a:hover {
    text-decoration: underline;
}
.field-value a:active {
    text-decoration: underline;
}

.iamtiny {
    font-size: 18pt;
}
.iamtiny a:link {
    text-decoration: none;
    color: #696969;
}
.iamtiny a:visited {
    text-decoration: none;
    color: #696969;
}
.iamtiny a:hover {
    text-decoration: underline;
}
.iamtiny a:active {
    text-decoration: underline;
}