@font-face{font-family:"Alata";src:url(/resources/Alata-Regular.ttf)}
#addBarcodeContainer{background-color:transparent;border:0;color:#171614;cursor:pointer;font-family:inherit;font-size:1rem;width:100%}
#header-margin{height:2vh}
#main-content{margin-bottom:10vh;transition:margin-right .1s linear}
#sticky-header{align-items:center;backdrop-filter:blur(20px);background:linear-gradient(to bottom,#171614,70%,#171614cc);color:#EBEBD3;display:flex;font-size:.5em;height:8vh;justify-content:space-between;margin:0;padding-left:5vw;padding-right:5vw;position:fixed;top:0;width:calc(100% - 10vw);z-index:1020}
#sticky-header h1{cursor:pointer;opacity:1;transition:opacity .4s ease-in-out}
#sticky-header img{height:2rem}
.actions{box-sizing:border-box;display:inline-flex;gap:14px;resize:vertical;width:100%;width:100%}
.barcode-container{align-items:stretch;display:flex;gap:40px}
.barcode-form{flex:1}
.barcode-output{align-items:center;background-color:#fff;border:3px solid #171614;border-radius:8px;box-shadow:3px 3px 0 #171614;display:flex;flex:1;justify-content:center;max-width:100%;overflow-x:auto;padding:20px;text-align:center;transition:.4s;white-space:nowrap}
.barcode-output svg{height:auto;max-width:100%}
.barcodeData{background-color:#fff;border:3px solid #171614;box-shadow:3px 3px 0 #171614;cursor:pointer;margin:10px 0 20px;transition:.4s}
.borderless{border:0;box-shadow:none;margin:0;padding:0}
.borderless:hover{border:0;box-shadow:none;transform:none}
.container{background-color:#EBEBD3;border-radius:16px;margin:5vw 5vw 0;padding:36px}
.custom-select{border:3px solid #171614;border-radius:8px;box-shadow:3px 3px 0 #171614;cursor:pointer;margin:10px 0 20px;position:relative;transition:.4s}
.custom-select::after{color:#171614;content:"▼";font-size:.8rem;pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.options{background-color:#fff;border:3px solid #171614;border-radius:8px;cursor:pointer;display:none;font-size:1rem;max-height:200px;overflow-y:auto;position:absolute;width:100%;z-index:1010}
.options div{cursor:pointer;padding:10px}
.options div:hover{background-color:#808073;color:#f7f7f7}
.random img{height:28px;width:28px}
:root{--safe-area-inset-bottom:env(safe-area-inset-bottom,0px);--safe-area-inset-top:env(safe-area-inset-top,0px)}
body,html{background:#171614ff;font:18px Alata;margin:0;overflow-x:hidden;overscroll-behavior:auto;padding:0;scroll-behavior:smooth}
button{background-color:#EBEBD3;border:3px solid #171614;border-radius:8px;box-shadow:3px 3px 0 #171614;box-sizing:border-box;color:#171614;cursor:pointer;display:flex;font-family:inherit;font-size:1rem;justify-content:center;margin:20px 0;padding:10px;text-align:center;transition:.4s;width:100%}
button:hover{box-shadow:5px 5px 0 #171614;transform:scale(1.01);transition:.2s}
input,textarea{background-color:#fff;border:0;border-radius:8px;box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:1rem;outline:none;padding:10px;resize:vertical;width:100%}
@media (max-width: 1080px) {
#header-margin{height:7vh}
.barcode-container{flex-direction:column;gap:20px}
.barcode-output{height:auto}
.container{padding:24px}
button{align-items:center;box-sizing:border-box;display:flex;justify-content:center;width:100%}
}