*,*::before,*::after {
    box-sizing: border-box;
}

html {
    width: 210mm;
    height: 297mm;

    /*
    display: flex;
    align-items: center;
    justify-content: center;
    */
}

body {
    font-family: 'Roboto Mono', monospace;
    font-size: 2cm;
    display: flex;
    flex-direction: column;
    padding: 0.1in;
    margin: 0;
}

/*@page {
    size: A4 portrait;
    margin: 10%;
}*/
@media print {
    print-card {
      break-inside: avoid;
    }

    #controls {
        display: none !important;

    }
}

print-card {
    /*border: 1px dashed rgba(100, 100, 100, .5);*/
    padding: 1mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.2mm;
    position: relative;

    &.datamatrix svg {
        width: 12mm;
        height: 12mm;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }


}

.octet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0.3cm;
}

.barcode {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 10mm;
    position: relative;
    display: flex;
    overflow: hidden;
}

.logo {
    font-size: 2.5mm;
    line-height: 1em;
    margin-top: 1mm;
    display: flex;
    align-items: center;

    width: 100%;

    > img {
        height: 5em;
        border-radius: 5px;
    }

    > h1 {
        display: flex;
        flex-direction: column;
        
        > span {
            &:first-child {
                line-height: 1.4em;
            }
            &:last-child {
                color: gray;
                text-transform: uppercase;
                font-size: 0.5em;
                letter-spacing: 3px;
            }
        }
    }
}

.human_readable_part {
    font-size: 3mm;
}


#controls {
    font-size: 1rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;


    width: 100%;

    > .form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;

        > .group {
            border: 2px solid seagreen;
            padding: 1rem;
            border-radius: 5px;
        }
    }


}

h2 {
    color: seagreen;
}


input, select, button {
    padding: 10px 20px;
    background-color: #DFDFDF;
    border: none;
    border-radius: 7px;
}

label {
    display: flex;
    flex-direction: column;
}

#content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    grid-auto-rows: 1fr 1fr;
}

print-spacer {
    content: ".";
    margin: 0 auto;
}