html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

th {
    white-space: nowrap;
}

.no-wrap {
    white-space: nowrap;
}

/* Custom black button color */
/* Button changes to lighter color on hover */
.btn-black {
    background-color: black;
    color: var(--bs-light);
}

.btn-black:hover {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}


#top {
    background: linear-gradient(black 70%, var(--bs-light) 30%);
}

#dropdown-div {
    width: 100%;
    max-width: auto;
}
@media (min-width: 768px) {
    #dropdown-div {
        width: auto;
    }
}

#pictures {
    background: linear-gradient(to top, var(--bs-light) 80%, black 20%);
}

#carousel {
    width: 75%;
}
@media (min-width: 768px) {
    #carousel {
        width: 50%;
    }
}

.noto-serif {
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.truncate {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}