/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: 6px;
    scrollbar-color: #C4A484 transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #C4A484;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: ease-in;
    transition-duration: 2s;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgb(184, 154, 125);
    transition: ease-out;
    transition-duration: 2s;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/***** Thumb Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
   background:#5b472b;
   border: 2px solid #5b472b;
   border-radius: 8px;
   height: 1rem;
   width: 1rem;
   cursor: pointer;
}

/***** Focus Styles *****/
/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

*::-webkit-slider-runnable-track {
    background:#C4A484;
    border: 2px solid #5b472b;
    border-radius: 0px 4px 4px 0px;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    height: 100%;
}

:root {
  --fs-dnd-button: 2.4em;
  --fs-dnd-button-small: 2.4em;
  --fs-dnd-file: 1.5rem;
  --center-img: 15rem;
  --side-img: 13rem;
  --owl-img: 11rem;
  --center-img-popup: 5rem;
  --side-img-popup: 3rem;
  --owl-img-popup: 1rem;
  --popup-img: 10rem;
}

@media (min-width: 10em) {
  .popup {
    width: 95%;
  }
  .form-container-flex {
    align-items: center !important;
  }
  .dnd-form {
    width: 100% !important;
  }
  .popup-content > h1:before {
    width: 25% !important;
  }
  .popup-content > h1:after {
    width: 25% !important;
  }
}

@media (min-width: 80em) {
  .popup {
    width: 60%;
  }
  .content-dnd {
    padding-top: 0px !important;
  }
  .form-container-flex {
    flex-direction: row !important;
    align-items: stretch !important;
  }
  .dnd-form {
    width: 45% !important;
  }
  .creatureAdder {
    flex-direction: row !important;
    align-items: stretch !important;
  }
  .scene-btns {
    flex-direction: row !important;
  }
}

h1, h2 {
  color: #5b472b; /* Change to the desired dark bronze color */
  background: linear-gradient(to right, #5b472b, #927449);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  font-family: 'Old Standard TT', serif;
  width: 80%;
  justify-content: center;
  align-self: center;
  text-align: center;
  overflow: hidden;
}

h2 {
  width: 100%;
  justify-content: flex-start;
  display: flex;
}

h1:before,
h1:after {
  background-color: #5b472b;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

.navbar-dnd {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(rgba(9,8,27,0.7105217086834734), rgba(9,8,27,0));
}

.navbar-dnd a{
    float: left;
    color: #60d0d0;
    font-size: var(--fs-navbar);
    margin: 10px 10px 10px 10px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

body {
    /* The image used */
    background-image: linear-gradient(rgba(0, 0, 0, 0.781), rgba(0, 0, 0, 0.616)), url(dnd_background.jpg);

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.content-dnd {
    padding-top: 50px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
}

.form-container-flex {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.image-button {
  position: relative;
  display: inline-block;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  width: 40%; /* Adjust the width as desired */
  height: calc(var(--fs-dnd-button)*4); /* Adjust the height as desired */
  transition: 0.4s;
}

.image-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(button_texture.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1; /* Adjust the opacity as desired */
}

.image-button:hover {
  transform: scale(1.1);
}

.button-text {
  position: relative;
  z-index: 1;
  font-size: var(--fs-dnd-button); /* Adjust the base font size as desired */
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #5b472b; /* Change to the desired dark bronze color */
  background: linear-gradient(to right, #5b472b, #5b472b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  /*font-family: 'Old Standard TT', serif;*/
  font-family: 'AlteSchwabacher';
  transition: background-image 0.4s ease-in-out, font-size 0.2s ease-in-out; /* Added font-size transition */
  background-size: 200% auto;
  background-position: center;
  animation: none;
  filter: brightness(1);
}

.button-text[data-small="true"] {
  font-size: var(--fs-dnd-button-small); /* Adjust the base font size as desired */
  padding: 10px 40px;
}

.scene-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dnd_logo {
  position: relative;
  display: inline-block;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  width: 40%; /* Adjust the width as desired */
  height: 200px; /* Adjust the height as desired */
  transition: 0.4s;
}

.dnd_logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9; /* Adjust the opacity as desired */
}

.image-button-small {
  width: 100%; /* Adjust the width as desired */
  height: calc(var(--fs-dnd-button-small)*4); /* Adjust the height as desired */
}

.image-button-small:disabled {
  display: none;
}

.dnd-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  background-image: linear-gradient(153deg, rgba(0,0,0,1) 0%, rgba(11,0,0,1) 50%, rgba(0,0,0,1) 100%),
    linear-gradient(90deg, #5b472b, #927449);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1.75px solid transparent;
  border-radius: 10px;
  margin: 10px;
  padding: 10px 5% 10px 5%;
  opacity: 0.9;
}

.dnd-form input[type="file"],
.dnd-form input[type="text"],
.dnd-form input[type="number"],
.dnd-form input[type="range"],
.dnd-form select {
  width: 100%;
}

.dnd-form button {
  margin-top: auto;
}

.dnd-select-type {
    cursor: pointer !important;
}

.dnd-select-size {
  display:flex;
  margin-top: 8px;
  margin-bottom: 8px;
}

.dnd-select-size > input {
    margin:0;
}

.dnd-select-size > i {
    background-color: #5b472b;
    color: #C4A484;
    padding: 9px 4px;
    border-radius: 4px 0 0 4px;
}

.dnd-select-size > span {
    background: #C4A484;
    border: 2px solid #5b472b;
    border-radius: 4px;
    padding: 6px;
    margin-left: 8px;
    color: #5b472b;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  --moz-appearance: textfield;
}

input[type="file"] {
    display: none;
}

.dnd-file-upload {
  border: 2px solid #5b472b;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  background: #C4A484;
  color: #846c50;
  font-size: 0.85em;
  font-family: Arial;
}

.dnd-file-upload i {
  background-color: #5b472b;
  color: #C4A484;
  padding: 9px 5px;
  border-radius: 0px 0 0 0px;
  margin-right: 10px;
}

.dualColor {
  background: linear-gradient(to right, #5b472b, #846c50);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

select {
  background: linear-gradient(90deg, rgba(91,71,43,1) 0px, rgba(91,71,43,1) 28px, rgba(196,164,132,1) 28px, rgba(196,164,132,1) 100%);
  border-radius: 4px 0 0 4px;
  /*color: #846c50;*/
  padding: 8px 4px;
  margin: 8px 0;
  outline: none;
  border: none;
}

select option {
    font-family: Arial, FontAwesome;
}

input[type="text"],
input[type="number"] {
  border: 2px solid #5b472b;
  background: #C4A484;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="text"]:focus, 
input[type="number"]:focus {
  background-image: linear-gradient(153deg, white, white) 100% ,linear-gradient(90deg, #5b472b, #927449);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 2px solid transparent;
  border-radius: 4px;
  margin: 10px;
  padding: 10px;
}

.inputWithIcon input[type="text"],
.inputWithIcon input[type="number"] {
  padding-left: 40px;
  color: #5b472b;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #C4A484;
  transition: 0.3s;
}

.inputWithIcon.inputIconBg i {
  background-color: #5b472b;
  color: #C4A484;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i,
.inputWithIcon.inputIconBg input[type="number"]:focus + i {
  color: #C4A484;
  background-image: linear-gradient(90deg, #5b472b, #927449);
  border-radius: 4px 4px 4px 4px;
}

.carousel-80 {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  width: 80%;
  overflow: hidden;
}

.owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .owl-item div {
  display: flex;
  justify-content: center;
  z-index: 0;
}

.owl-carousel .owl-item.outer-sides {
  z-index: 1;
}

.owl-carousel .owl-item div img {
  width: var(--owl-img) !important;
  height: var(--owl-img) !important;
  object-fit: cover;
  opacity: 1;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5); 
  box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5);
}

.owl-carousel .owl-item.sides div img {
  width: var(--side-img) !important;
  height: var(--side-img) !important;
  opacity: 1;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5); 
  box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5);
}

.owl-carousel .owl-item.sides {
  z-index: 2;
}

.owl-carousel .owl-item.center div img {
  width: var(--center-img) !important;
  height: var(--center-img) !important;
  opacity: 1;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5); 
  box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5);
}


.owl-carousel .owl-item.center {
  z-index: 3;
}

.creatureAdder {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.creatureBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  background-image: linear-gradient(153deg, rgba(0,0,0,1) 0%, rgba(11,0,0,1) 50%, rgba(0,0,0,1) 100%),
    linear-gradient(90deg, #5b472b, #927449);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1.75px solid transparent;
  border-radius: 10px;
  margin: 10px;
  opacity: 0.9;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 9998;
  display: none;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  background-image: linear-gradient(153deg, rgba(0,0,0,1) 0%, rgba(11,0,0,1) 50%, rgba(0,0,0,1) 100%),
    linear-gradient(90deg, #5b472b, #927449);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  border: 1.75px solid transparent;
  border-radius: 10px;
  z-index: 9999;
  display: none;
}

.popup.show {
  display: block;
}

.popup-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.popup-content > h2 {
  justify-content: center !important;
}

.scrollable-list {
  width: 80%;
  overflow: auto;
}

.list-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--popup-img), 1fr));
  justify-items: center;
  gap: 10px; /* Adjust the gap between items as needed */
  padding: 10px; /* Optional: Add padding to the container */
}

.list-item.selected > .popup-list-img {
  opacity: 1;
}

.popup-list-img {
  width: var(--popup-img) !important;
  height: var(--popup-img) !important;
  object-fit: cover;
  object-position: top;
  -webkit-mask-image: linear-gradient(black 10%, transparent 90%);
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5); 
  box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5);
  opacity: 0.8;
  cursor: pointer;
}

.popup-settings {
    flex-direction: row;
    display: flex;
}

.creatureImage {
  width: var(--popup-img) !important;
  height: var(--popup-img) !important;
  object-fit: cover;
  object-position: top;
  -webkit-mask-image: linear-gradient(black 10%, transparent 90%);
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5); 
  box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.5);
  padding: 10px;
}

.creature-settings {
    display: flex;
    flex-direction: column;
}

.creature-settings input[type="file"],
.creature-settings input[type="text"],
.creature-settings input[type="number"],
.creature-settings input[type="range"],
.creature-settings select {
  width: 100%;
}

.popup-list-img:hover {
  opacity: 1;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  opacity: 0.9;
}

.popup-close:hover {
  opacity: 1;
}

.filter-bronze {
  filter: invert(76%) sepia(15%) saturate(644%) hue-rotate(349deg) brightness(86%) contrast(92%);
}

.scrollable-list-creature#scrollable-list1 > div > img { z-index: 1; }
.scrollable-list-creature#scrollable-list2 > div > img { z-index: 2;  }
.scrollable-list-creature#scrollable-list3 > div > img { z-index: 3; }
.scrollable-list-creature#scrollable-list4 > div > img { z-index: 2;  }
.scrollable-list-creature#scrollable-list5 > div > img { z-index: 1;  }

.scrollable-list-creature#scrollable-list1 > div > img { margin-bottom: 100px; }
.scrollable-list-creature#scrollable-list2 > div > img { margin-bottom: 50px; }
.scrollable-list-creature#scrollable-list4 > div > img { margin-bottom: 50px; }
.scrollable-list-creature#scrollable-list5 > div > img { margin-bottom: 100px; }

.scrollable-list-creature#scrollable-list1 > div > div { margin: 0 -10vw; /* Adjust the margin as needed */ }
.scrollable-list-creature#scrollable-list2 > div > div { margin: 0 -10vw; /* Adjust the margin as needed */ }
.scrollable-list-creature#scrollable-list4 > div > div { margin: 0 -10vw; /* Adjust the margin as needed */ }
.scrollable-list-creature#scrollable-list5 > div > div { margin: 0 -10vw; /* Adjust the margin as needed */ }

.creatures {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 40px;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  filter: drop-shadow(5px 5px 12px #000000);
}

.creatureInfos {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  justify-content: space-around;
  overflow: hidden;
}

.creature {
  display: flex;
  flex-direction: column;
  align-self: end;
  margin: 0 -6.5vw; /* Adjust the margin as needed */
}

.creatureInfo {
  flex-direction: column;
  display: flex;
  color: #fff;
  font-family: 'AlteSchwabacher';
  text-shadow: 2px 3px 12px #000000;
  font-size: large;
}

.creatureInfo > span[data-behaviour="hostile"] {
  color: red;
}

.creatureInfo > span[data-behaviour="neutral"] {
  color: yellow;
}

.creatureInfo > span[data-behaviour="friendly"] {
  color: green;
}

.creatureInfo > div > span > i.fa-solid {
  font-size: large;
}

.creature > img[data-fade="in"] {
    animation: fadeIn 3s;
}

.creature > img[data-fade="out"] {
    animation: fadeOut 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }    
}

.creature > img {
  padding: 10px;
}

.skills {
    display: flex;
    flex-wrap: wrap;
}

.skill {
    background: #C4A484;
    color: #846c50;
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
    opacity: 0.5;
}

.skill[data-highlight="true"] {
    opacity: 1;
}

.fa-fw {
    width: 1.1em !important;
}