:root { --surface: #121212; --on-surface: #ffffff; --primary: #6200ee; --secondary: #03dac6; --text-color: #ffffff; --red: #b00020; }
::selection { background-color: var(--secondary); color: var(--text-color); }

body { background-color: var(--surface); color: var(--text-color); font-family: Montserrat; }
h1, h2, h3 { color: var(--primary); font-weight: 600; margin-bottom: 25px; }
a { text-decoration: none; color: var(--secondary); }
a:hover { text-decoration: underline; color: var(--secondary); }

.container { margin: 25px auto; }

.modal-content { background-color: var(--surface); }

.navbar { border-bottom: 1px solid #333333 }
.nav-link { color: var(--text-color); }
.nav-link:hover { color: var(--secondary); }

.input-group-text { border-bottom: 1px solid #fff !important; }
.input-group-text, input[type="file"]::file-selector-button { background-color: transparent; color: var(--text-color); border: 0; border-radius: 0; }
input[type="file"]:hover::file-selector-button { background-color: transparent !important; color: var(--primary); }
.form-control, .form-control:focus { background: transparent; color: var(--text-color); border-radius: 0; border: 0; border-bottom: 1px solid var(--text-color); }
.form-control:focus { box-shadow: none; }

.toast-header { background-color: var(--red); color: var(--text-color); border: 0; border-radius: calc(.25rem - 1px); }
.btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat }
.btn-close:focus { box-shadow: none; }

.card-body { text-align: justify; }
a#card { text-decoration: none; }

.btn-personalized { color: var(--text-color); background-color: var(--primary); border-color: var(--primary); }
.btn-personalized:hover, .btn-personalized:active { color: var(--text-color); font-weight: 600; background-color: transparent; border-color: var(--primary); }
.btn-personalized:focus { color: var(--text-color); background-color: transparent; border-color: var(--primary); box-shadow: 0 0 .25rem rgba(98, 0, 238, 0.4); }

.go-back { position: absolute; top: 75px; left: 10px; }
.qrcode { width: max-content; margin: 0 auto; }
.qr { background-color: var(--on-surface); display: grid; margin: 0 auto; }
.download-qr { display: block; margin-top: 15px; width: 100%; text-align: center; font-size: 24px; }

.footer { position: absolute; bottom: 0; right: 10px; font-size: 12px; }