body {
    background: rgba(47, 26, 19, 0.70);
}
.card-header:first-child {
    border-radius: 40px 40px 0px 0px;
    background: #E7D8BE;
    text-align: center;
}
.card {
    margin-top: 120px;
    border-radius: 40px;
}

.card-body {
    padding-left: 40px;
    padding-right: 40px;
}

h1 {
    color: #673929;
    text-align: center;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px; /* 147.368% */
    text-transform: capitalize;
}
body {
    color: #673929;
    font-family: Garamond, sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px; /* 102.941% */
}
p {
    text-align: center;
    font-size: 32px;
}
.form-group {
    margin-bottom: 20px;
}
.btn-primary {
    --bs-btn-color:  #E7D8BE;
    --bs-btn-bg: #673929;
    --bs-btn-border-color: rgba(103, 57, 41, 0.10);
    --bs-btn-hover-color:  #E7D8BE;
    --bs-btn-hover-bg: #673929;
    --bs-btn-hover-border-color: rgba(103, 57, 41, 0.50);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color:  #E7D8BE;
    --bs-btn-active-bg: #673929;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    border-radius: 67.059px;
    text-align: center;
    font-size: 20.118px;
    font-style: normal;
    font-weight: 700;
    line-height: 23.471px; /* 116.667% */
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    margin: auto;
    bottom: 20px;
}
.text-danger {
    font-size: 18px;
    text-align: center;
}
.form-control {
    font-size: 22px;
    width: 80%;
    border: 1px solid rgba(103, 57, 41, 0.50);
    display: flex;
    justify-content: center;
    margin: auto;
    text-align: center;
}
.form-control:hover {
    outline: none !important;
    border-color: #E7D8BE;
    box-shadow: 0 0 10px #E7D8BE;
}
body.index {
    background: #E7D8BE;
    padding-top: 30px;
}
body.index .col-md-6 {
    text-align: center;
}
@font-face {
    font-family: 'Verve';
    src: url('/fonts/Verve.ttf');
}
body.index h1 {
    color: #673929;
    text-align: center;
    font-family: Verve;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 94%; /* 30.08px */
}
body.index .subtitle {
    color: #673929;
    font-family: Verve;
    font-size: 69px;
    font-style: normal;
    font-weight: 400;
    line-height: 94%;
}
body.index .btn-primary {
    width: fit-content;
}
p.link {
    font-size: 16px;
}

p.omschrijving {
    font-size: 20px;
    text-align: left;
}

.autocomplete {
    text-transform:uppercase;
    text-align: left;
    font-family: Courier, serif;
}
:where([autocomplete=wincode]) {
    --otp-digits: 9;
    --otp-ls: 2ch;
    --otp-gap: 1.25;

    /* private consts */
    --_otp-bgsz: calc(var(--otp-ls) + 1ch);
    --_otp-digit: 0;

    all: unset;
    background:
        linear-gradient(90deg,
        var(--otp-bg, #BBB) calc(var(--otp-gap) * var(--otp-ls)),
        transparent 0),
        linear-gradient(90deg,
        var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
        transparent 0
        );
    background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
    background-repeat: no-repeat, repeat-x;
    background-size: var(--_otp-bgsz) 100%;
    caret-color: var(--otp-cc, #222);
    caret-shape: block;
    clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
    font-family: ui-monospace, monospace;
    font-size: var(--otp-fz, 2.5em);
    inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
    letter-spacing: var(--otp-ls);
    padding-block: var(--otp-pb, 1ch);
    padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
}