/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*
 * Base structure
 */

body {
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  background-image: url('page-detail.webp');
  background-repeat: no-repeat;
  background-color: #fefdf9 !important;
  background-size: cover;

  /* --fbc-gray-20: #ededf0; */
  /* --fbc-light-gray: #F0F0F4; */
  /* --fbc-white: #ffffff;

  --fbc-gray-20: #fcf1e7;
  --fbc-light-gray: #fcf1e7;
  --fbc-white: #fcf1e7;
   * */
}

.sakura {
    content: ""; /* This is necessary for the pseudo-element to work */
    display: block; /* Makes the pseudo-element a block-level element */
    width: 100%; /* Adjust this to the width of your background image */
    background-image: url('/branch-and-book2.webp'); /* Sets the image as the background */
    background-repeat: no-repeat; /* Ensures the image doesn't repeat */
}

@media (min-width: 1000px) {
  .sakura {
    background-size: cover;
  }
}

.cover-container {
  max-width: 42em;
}

.logo {
  background-image: url('tiny-blossom.svg');
  background-size: 1em;
  background-repeat: no-repeat;
  padding-left: 1.1em;
  font-weight: bold;
  color: #222;
}

.bg-body-tertiary {
  background-size: cover;
  background-color: #fff8f1 !important;
  background-image: url('page-detail.webp');
  background-size: cover;
  background-blend-mode: hard-light;
  color: #2e180b;  /* text color of dark notebook binder */
  border-color: #583e2e !important;
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}


.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: #2e180b;
  --bs-btn-bg: #ffc3c3;
  --bs-btn-border-color: #fff;

  --bs-btn-hover-color: #511212;
  --bs-btn-hover-bg: #fb98a9;

  --bs-btn-hover-border-color: #efadce;
  --bs-btn-focus-shadow-rgb: #efadce;
  --bs-btn-active-color: #de5c9d;
  --bs-btn-active-bg: #de5c9d, 20%;
  --bs-btn-active-border-color: #de5c9d;
}

/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}


.p-4 {
  border-left-style: solid;
  border-left-width: 3px;
  border-top-width: 3px;
  border-top-style: solid;
  border-right-width: 3px;
  border-right-style: solid;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  min-height: 20em;
}