@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Rubik+Mono+One&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");


body {
  font-family: Verdana;
  background-color: #D1CCC8;
}

.video-thumb {
  transition: transform 0.2s ease;
}

.video-thumb:hover {
  transform: scale(1.03);
}

.protected {
  background-color: transparent;
  border: none;
}

p {
  font-family: Verdana;
}

.rubik-mono-one-regular {
  font-family: Verdana;
  font-weight: 400;
  font-style: normal;
}


.roboto-font {
  font-family: Verdana;
}

#author {
    text-decoration: underline;
}

img {
  display: block;
  margin: auto;
  width: 50%;
}

h1 {
  text-align: center;
}

.navbar {
  background-color: #56514D;
}

.custom-close {
  position: absolute;
  top: -15px;      /* pushes it ABOVE the modal */
  right: -15px;    /* pushes it OUTSIDE the edge */
  font-size: 2rem;
  color: white;
  background: black;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.custom-close {
  background: transparent;
  font-size: 2.5rem;
}

.modal-content {
  overflow: visible;
}

.search-container {
  background-color: #f4f2f0; /* pick your color */
}

.custom-close {
  position: absolute;
  top: -18px;
  right: -18px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  background: #56514D;
  color: #fff;
  border: 1px solid white;

  font-size: 24px;
  line-height: 38px;
  text-align: center;

  cursor: pointer;
  z-index: 1055;
}

.modal-content {
  overflow: visible;
}

.video-thumb {
  border: 3px solid transparent;
  border-radius: 8px;
  transition: 0.2s ease;
  border-color: #56514D;
}

.video-thumb:hover {
  border-color: white;
}

.load-more-btn {
  background-color: #56514D;
  color: white;
  border: none;
}