body {
    background-color: #000;
    font-family: "Inter", "Sofia Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
a:link, a:visited, a:active {
    color: #ff9100;
    text-decoration: none;
}
a:hover {
    color: #fff !important;
}
.logo {
    max-height: 4rem;
}
.kb-filo {
    border-bottom: 0.5rem solid #ff9100;
}
.kb-brewery {
    border-top: 0.5rem solid #ff9100;
}
.kb-brewery h1, .kb-filo h1 {
    margin-bottom: 2rem;
}
.kb-brewery .p-5, .kb-filo .p-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.kb-brewery .p-5 p, .kb-filo .p-5 p {
    font-weight: 300;
}
.kb-spacer {
    background-color: #ff9100;
    height: 1rem;
    border-bottom: 0.2rem solid #ff4800;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
}
.kb-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #333;
    color: #111;
    font-size: 1.2rem;
}
.kb-spaced-heading {
    margin-top: 4rem;
    margin-bottom: 2rem;
}
.kb-footer {
    margin-top: 4rem;
}
.kb-roomu {
    font-size: 0.8rem !important;
}
.flex-column h3 {
    font-size: 1.5rem;
}
.flex-column tiny {
    font-size: 0.8rem;
}
.flex-md-row {
    background-color: #111;;
}
#juomat .flex-md-row .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4rem;
    filter: drop-shadow(0 0 0.2rem #000);
}
.list-group {
    width: 100%;
    max-width: 460px;
    margin-inline: 1.5rem;
  }
.kb-icon {
    fill: rgba(222, 226, 230, 0.75);
    fill-opacity: 1;
}
.kb-logo {
    fill: #ff9100;
    fill-opacity:1;
}
@media (prefers-color-scheme: light) {
  body {
    background-color: #ddd;
    color: #111;
  }
  .kb-content {
    background-color: #bbb;
    color: #eee;
  }
  .flex-md-row {
      background-color: #eee;;
  }
  .kb-icon {
    fill: rgba(33, 37, 41, 0.75);
  }
  .navbar a:link, .navbar a:visited, .navbar a:active {
    color: #ec8600;
    text-decoration: none;
  }
  .navbar a:hover {
    color: #af6300 !important;
  }
  .kb-logo {
    fill: #ec8600;
  }
}  
.form-check-input:checked + .form-checked-content {
opacity: .5;
}

.form-check-input-placeholder {
border-style: dashed;
}
[contenteditable]:focus {
outline: 0;
}

.kb-flex {
    background-color: transparent;
    padding-top: 0;
}

.list-group-checkable .list-group-item {
cursor: pointer;
}
.list-group-item-check {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
background-color: var(--bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
color: #fff;
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
pointer-events: none;
filter: none;
opacity: .5;
}

.list-group-radio .list-group-item {
cursor: pointer;
border-radius: .5rem;
}
.list-group-radio .form-check-input {
z-index: 2;
margin-top: -.5em;
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
background-color: var(--bs-secondary-bg);
}

.list-group-radio .form-check-input:checked + .list-group-item {
background-color: var(--bs-body);
border-color: var(--bs-primary);
box-shadow: 0 0 0 2px var(--bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {
pointer-events: none;
filter: none;
opacity: .5;
}

#tyonalla h1 {
    margin-bottom: 0;
}
#tyonalla .badge {
    position: absolute;
    right: 3px;
    top: 3px;
}
#tyonalla h5 {
    color: var(--bs-body-color);
}

#age-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
}

.modal-box {
    background: #444;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

button {
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
