@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');

/* Custom Fonts */

@media (min-width: 768px) {
  .font-md-1 { font-size: 1.5rem;} /* match fs-1 */
}

@media (min-width: 768px) {
   .fs-md-3rem { font-size: 3.5rem;} /* match fs-1 */
}

.fs-3rem { font-size: 3.5rem;}

.fc-pink{
  color: #e83e8c;
}

/* Custom Widths */
@media (min-width: 768px) {
  .w-md-75 {
    width: 75% !important;
  }
}

/* Custom Widths */
@media (min-width: 768px) {
  .w-md-25 {
    width: 75% !important;
  }
}


/* Google Fonts */
.mynerve-regular {
  font-family: "Mynerve", cursive;
  font-weight: 400;
  font-style: normal;
  size: 3em;
}
.nunito-sans-pt {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

/* Custom Break Points */

/* Nav Bar */
button.navbar-toggler.d-md-none {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  z-index: 1050;
  padding: 0.25rem 0.75rem;

}


.navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
}

/* Fixed overlay menu on mobile */
#navbarSupportedContent.collapse {
  top: 4rem;    /* right below hamburger */
  right: 1rem; Colapse menu on right
  width: 90vw;
  z-index: 1040;

  background-color: #212529;
  border-radius: 0.5rem;
  padding: 1rem;

  /* prevent layout shifts */
  height: auto !important; /* let height be automatic */
  overflow-y: hidden;
  overflow-x: hidden;
  max-height: 70vh;

  /* DISABLE Bootstrap height transition */
  transition: none !important;
}

/* Hide only on mobile */
@media (max-width: 767.98px) {
  #navbarSupportedContent:not(.show) {
    display: none !important;
  }
}


@media (min-width: 768px) {
  #navbarSupportedContent.collapse {
    position: static !important;
    top: unset !important;
    right: unset !important;
    width: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important; /* show desktop menu */
    transition: none !important;
    height: auto !important;
  }
}


/* Custom Colours */

.border-charcoal {
  border: 1px #3d3d3d solid;
}

.border-pink {
  border: 1px #e83e8c solid;
}

.border-orange {
  border: 1px #f55f0eff solid;
}


.border-purple {
  border: solid 1px purple;
}

.border-yellow {
  border: solid 1px yellow;
}

.border-light-yellow {
  border: solid 1px #f4f792ff;
}

.border-red {
  border: solid 1px red;
}

.border-blue {
  border: solid 1px blue;
}

.border-grey {
  border: solid 1px grey;
}

.border-green {
  border: solid 1px green;
}

.border-lime {
  border: solid 1px lime;
}


.border-aqua {
  border: solid 1px aqua;
}

/* Buttons */

.btn-pink {
  background-color: #e83e8c;
  color: #fff;
}
.btn-pink:hover {
  background-color: #d63384;
}

.btn-pink-outline {
  border: 2px solid #e83e8c;
  color: green;
  background-color: transparent;
}

.btn-pink-outline:hover {
  background-color: #e83e8c;
  color: white;
}

.btn-blue-outline:hover {
  border: 2px solid #0f34edff;
  color: pink;
  background-color: transparent;
}

/* Custom Width */

.max-width-500 {
  max-width: 500px;
}

.max-width-300 {
  max-width: 300px;
}

/* Blog Post Styles */

div.post-body h2 {
  padding: 3rem 0;
}

div.post-body ul {
  margin: 0 0 1rem 1rem; 
}

div.post-body li::marker {
  content: "📎 "; 
}


/* Cards */

.card-img-top {
  border: 1px solid #ebebebff;
}

.bg-tan {
  background-color: transparent;
}