/* import the font from google */
@import url("https://fonts.googleapis.com/css2?family=National+Park:wght@400;500&display=swap");
@font-face {
  font-family: "BrushScriptMT";
  src: url("./mb_include/BRUSHSCI.TTF") format("truetype");
}

/* set defaults for common elements on the entire page */
* {
  box-sizing: border-box;
  font-family: "National Park", sans-serif;
  color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* set the html and body to take up the entire height of page */
html,
body {
  height: 100%;
  width: 100%;
}

/* content-container is the main container for the content of the page */
.content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 320px;
  background-color: #000;
}

/* mishnock logo on the top of the page, making sure it is centered with aspect ratio intact */
.mb-logo {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* the navbar for the user pages */
nav {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 25px;
}

.fab {
  font-size: 40px; /* Set the font size for the icons */
  color: #f5f5f5; /* Set the color for the icons */
  cursor: pointer; /* Change cursor to pointer on hover */
}

.fa-circle-xmark {
  font-size: 40px;
  color: #000;
  cursor: pointer;
  border: none;
}

.fa-bars,
.fa-store {
  font-size: 40px;
  color: #f5f5f5;
  cursor: pointer;
  background: #000;
  border: none;
}

.menu {
  border: none;
}

ul.menu-opened {
  display: block;
  list-style: none;
  padding-left: 0;
  width: 95%;
  z-index: 1;
  background-color: #f5f5f5;
  padding-bottom: 10px;
  margin: 10px;
  border-radius: 10px;
}

ul li {
  cursor: pointer;
  padding-left: 5px;
  padding-top: 10px;
}

li.menu-li {
  margin-bottom: 10px;
}

.menu-options {
  color: #000;
  font-size: 22px;
}

#userMenu {
  position: fixed;
  max-width: 600px;
  width: 90%;
  background-color: #f5f5f5;
  border-radius: 10px;
  z-index: 998;
  transition: top 0.2s ease;
  left: 50%;
  transform: translateX(-50%);
}


.hide-menu {
  display: none;
}

.show-menu {
  display: block;
}

/* CSS for centering and adding margin to the "Close Menu" icon*/
#userMenu .menu-opened li:last-child {
  text-align: center; /* Center the text */
  margin-top: 5px; /* Add a 5px top margin */
  font-size: 45px;
}

#userMenu .menu-opened li:last-child a.menu-options {
  font-size: 30px;
}

ul li:hover {
  background-color: #d5d5d5;
}

#overlay {
  display: none; /* start hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  z-index: 997; /* under the menu (menu is 998) */
  transition: opacity 0.3s ease;
  opacity: 0;
}
#overlay.show-overlay {
  display: block;
  opacity: 1;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #000; /* Background color to match the rest */
  z-index: 999; /* So it stays on top of other elements */
}

h2 {
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
  color: #f5f5f5;
}

.hr-wrapper {
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
  margin: 20px auto;
}
hr {
  width: 100%;
  height: 2px;
  background-color: #f5f5f5;
  border: none;
}

h3 {
  font-size: 26px;
  font-weight: 400;
  margin: 10px 0;
  text-align: center;
  color: #f5f5f5;
}

p {
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0;
  text-align: center;
  color: #f5f5f5;
}

.mb-hours {
  width: 100%;
  max-width: 600px;
  height: auto;
  padding: 0 10px;
}

.mb-ytvideo {
  width: 100%;
  max-width: 600px;
}

.mb-ytvideo iframe {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16/9;
  border: none;
  padding: 0 20px;
}
address.mb-address {
  font-style: normal; /* override browser italic */
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #f5f5f5;
  margin: 10px 0;
  cursor: pointer !important;
}

.date-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.date-modal-content {
  background-color: #f5f5f5;
  margin: 15% auto; /* Center the modal */
  padding: 20px;
  border: 1px solid #000;
  width: 90%;
  max-width: 500px;
  text-align: center;
  border-radius: 10px;
}

.date-modal-content p {
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0;
  color: #000;
}

.date-modal-button {
  margin: 20px 0;
  border-radius: 10px;
  width: 100%;
  padding: 8px 0;
  background-color: #000;
  color: #f5f5f5;
  border: none;
  cursor: pointer;
  font-size: 20px;
}

#copy-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #f5f5f5;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 1000;
}
#copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}

.faq-container {
  width: 90%;
  max-width: 600px;
}

.lessonLink {
  display: block;
  color: #000;
  font-size: 22px;
  margin-bottom: 8px;
}

.lessons {
  border: 1px solid black;
  background-color: #f5f5f5;
  color: #000;
  width: 90%;
  text-align: center;
  padding-bottom: 10px;
  max-width: 600px;
}

.lesson {
  border: none;

}

h3.lesson {
  color: #000;
  font-weight: 500;
  margin-bottom: 0;
}

.lessonNoLink {
  display: block;
  font-size: 22px;
  margin-bottom: 8px; 
  color: #000;
}

.flyers {
  width: 90%;
  height: auto;
  max-width: 600px;
}

a {
  font-size: 20px;
}