/* Extra small devices (portrait phones, less than 576px) */

/*  No media query for `xs` since this is the default in Bootstrap */

body {
  background: url(images/materia_new.webp) no-repeat center center fixed;
  /* background: url(images/background-artwork.jpg) no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

a {
  text-decoration: none !important;
}

/* Replace with this more specific rule */
a:not(.btn):not(.nav-link):hover {
  text-decoration: underline !important;
}

/* Ensure the background color shows through */
.table > tbody > tr.bg-table-dark > td {
  background-color: inherit;
}

.table > tbody > tr.bg-table-light > td {
  background-color: inherit;
}

.top-text {
  color: black;
}

.bottom-text {
  text-align: center;
  color: black;
}

.border-0 {
  border-width: 0 !important;
  border: 0;
}

#bootstrap-overrides .card {
  border: 0;
  box-shadow: none;
  min-width: 100%;
  padding: 15px 0;
}

#bootstrap-overrides .card-body {
  border: 0;
  box-shadow: none;
  min-width: 100%;
  padding: 15px 0;
}

#bootstrap-overrides .shadow-sm {
  border: 0;
  box-shadow: none !important;
  min-width: 100%;
  padding: 15px 0;
}

#bootstrap-overrides .p-md-5 {
  box-shadow: none;
  min-width: 100%;
  padding: 15px 0;
}

#bootstrap-overrides .my-md-5 {
  box-shadow: none;
  min-width: 100%;
  padding: 15px 0;
}

.white {
  color: white !important;
}

.martel {
  font-family: 'Martel', serif;
}

.logo {
  color: #f3b834;
}

.bg-light-hover:hover {
  background-color: #dbc49a !important; /* Light brown matching theme */
  color: #38210f !important; /* Darker text */
}

@font-face {
  font-family: 'Martel';
  src: url('fonts/martel.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.bg-gray {
  /* background-color: #f3f4f6!important; */
  background-color: #f9eed8 !important;
}

.bg-table-dark {
  background-color: #d4c0a1 !important;
}

.table-dark-border {
  border-color: #d4c0a1 !important;
}

.banner-border {
  border: 3px solid #212529 !important;
}

.bg-table-light {
  background-color: #f1e0c6;
}

td.white {
  color: white !important;
}

.btn-materia {
  background-color: #113edb; /* Changing the primary button color  */
  border-color: #cea444; /* Changing the border color to match */
  color: #ffc107;
  border-width: 3px;
}

.btn-materia:hover {
  background-color: #0d6efd; /* Changing the primary button color  */
  border-color: #cea444; /* Changing the border color to match */
  color: #ffc107;
}

.btn-green {
  /* background-color: #1D2C10;
    border-color: #F3B834; */
  background-color: #5cb85c;
  border-color: #4cae4c;
  border-width: 3px;
  color: #ffc107;
}

.btn-green:hover {
  /* background-color: #1D2C10;
    border-color: #F3B834; */
  background-color: #2d832d;
  border-color: #2a802a;
  border-width: 3px;
  color: #dba605;
}

.text-materia {
  color: #5a2800;
  /* font-family: Verdana, Arial, Times New Roman, sans-serif; */
}

.headline-4 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Spells-page */

.spelltype-tab {
  padding: 10%;
  margin-top: -8%;
}

.spelltype-tab #tabs {
  background: #007b5e;
  color: #eee;
}

.spelltype-tab #tabs h6.section-title {
  color: #eee;
}

.spelltype-tab #tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #000;
  background-color: #f1e0c6;
  border-color: transparent transparent #f3f3f3;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-top: 1px solid #d4c0a1;
  border-left: 1px solid #d4c0a1;
  border-right: 1px solid #d4c0a1;
  border-bottom: 3px solid !important;
  font-size: 16px;
  font-weight: bold;
}

.account-nav-tabs {
  border-bottom: 1px solid #d4c0a1 !important;
}

.account-tabs:hover {
  color: #000;
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
  border-top: 1px solid #d4c0a1 !important;
  border-left: 1px solid #d4c0a1 !important;
  border-right: 1px solid #d4c0a1 !important;
  border-bottom: 3px solid !important;
}

.spelltype-tab .nav-link {
  border: 1px solid;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  color: #000;
  font-size: 16px;
  font-weight: 600;
}

.spelltype-tab .nav-link:hover {
  border: none;
}

.spelltype-tab thead {
  background: #f3f3f3;
  color: #333;
}

.spelltype-tab a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
  .body {
    background: #6c757d;
  }
  .top-text {
    color: black;
  }
  .bottom-text {
    text-align: center;
    color: black;
  }
  .border-0 {
    border-width: 0 !important;
    border: 0;
  }
  #bootstrap-overrides .card {
    border: 0;
    box-shadow: none;
    min-width: 100%;
    padding: 15px 0;
  }
  #bootstrap-overrides .card-body-md {
    border: 0;
    box-shadow: none;
    min-width: 100%;
    padding: 15px 0;
  }
  #bootstrap-overrides .shadow-md {
    border: 0;
    box-shadow: none !important;
    min-width: 100%;
    padding: 15px 0;
  }
  #bootstrap-overrides .p-md-5 {
    box-shadow: none;
    min-width: 100%;
    padding: 15px 0;
  }
  #bootstrap-overrides .my-md-5 {
    box-shadow: none;
    min-width: 100%;
    padding: 15px 0;
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  body {
    background: url(images/materia_new.webp) no-repeat center center fixed;
    /* background: url(images/background-artwork.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  .top-text {
    color: black;
  }
  .bottom-text {
    text-align: center;
    color: black;
  }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  body {
    background: url(images/materia.webp) no-repeat center center fixed;
    /* background: url(images/background-artwork.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  .top-text {
    color: black;
  }
  .bottom-text {
    text-align: center;
    color: black;
  }
}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  body {
    background: url(images/materia.webp) no-repeat center center fixed;
    /* background: url(images/background-artwork.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  .top-text {
    color: black;
  }
  .bottom-text {
    text-align: center;
    color: white;
  }
}