:root {
  --root-color-start: #ffc902;
  --root-color-end: #ff550e;
}

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


/*
 * Base structure
 */
body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  width: 100%;
  max-width: 100%;
  /* Avoids horizontal scroll */
  min-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Prevents horizontal scroll */
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 100%;
}

/*
 * Header
 */
.nav-masthead .nav-link:hover {
  cursor: pointer;
}

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

.nav-masthead .active {
  color: #EEEEEE;
}

.nav-masthead .active:hover {
  color: #EEEEEE !important;
}

/* Default state: No border */
.nav-masthead .nav-link {
  position: relative;
  color: #999999;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0.5rem !important;
  /* Adjust spacing */
}

/* Underline effect using ::after */
.nav-masthead .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  /* Adjust based on spacing */
  width: 100%;
  height: 0.25rem;
  /* Thickness of underline */
  background: transparent;
  /* Default hidden */
  transition: background 0.5s ease-in-out;
}

/* Hover effect: Gradient underline */
.nav-masthead .nav-link:hover::after {
  background: linear-gradient(to right, #ffc902, #ff550e);
}

/* Active Link */
.nav-masthead .nav-link.active {
  color: #EEEEEE;
}

/* Active Link Underline with Gradient */
.nav-masthead .nav-link.active::after {
  background: linear-gradient(to right, #ffc902, #ff550e);
}


/* Active Link */
.nav-masthead .active {
  color: #EEEEEE;
}

.nav-masthead .active::after {
  background: #EEEEEE;
  /* Active state underline color */
}

/* 
 * Custom footer text 
 */
.footer-text {
  font-size: 0.9em;
}

/* 
 * Custom svg button 
 */
.svg-button {
  fill: #EEEEEE !important;
  transition: fill 0.3s ease-in-out;
}

.svg-button:hover {
  fill: url(#HEX-gradient) !important;
  cursor: pointer;
}

#HEX-gradient {
  --color-start: var(--root-color-start);
  --color-end: var(--root-color-end);
}

/*
 * Custom anchor
 */
.a-transparent {
  color: transparent;
}

.a-transparent:hover {
  color: transparent;
}

.a-hex {
  color: #999999;
}

.a-hex:hover,
.a-hex:active,
.a-hex:focus {
  color: #ff800d;
  cursor: pointer;
}

/*
 * Custom inputs (form-control)
 */
.form-wrapper {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
}

.form-label {
  color: #999999 !important;
  font-size: 0.8em;
}

.form-control {
  color: #EEEEEE !important;
  border: none;
  border-bottom: 1px solid #EEEEEE;
  background: none;
  border-radius: 0;
}

.form-control:active,
.form-control:hover,
.form-control:focus {
  color: #BBBBBB !important;
  border-bottom: 1px solid #999999;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
}

.form-textarea {
  min-height: 6vh !important;
}

.form-check-input {
  border-radius: 1px !important;
  background: none;
  border: 2px solid #999999;
  outline: none !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: #999999 !important;
  color: #EEEEEE !important;
  border: 2px solid #EEEEEE;
}

.form-check-input:hover {
  border: 2px solid #777777;
  background-color: #555555 !important;
}

.form-check-label {
  vertical-align: middle;
}

::placeholder {
  color: #999999 !important;
  opacity: 1;
}

/*
 * BUTTONS
 */
.btn-hex {
  border: none;
  border-radius: 2px;
  background: #999999;
  color: #CCCCCC;
}

.btn-hex-secondary {
  border: none;
  border-radius: 2px;
  background: #505050;
  color: #CCCCCC;
}

.btn-hex:hover,
.btn-hex-secondary:hover {
  border: none;
  color: #ffffff;
  background: linear-gradient(to right, var(--root-color-start), var(--root-color-end));
}

.btn-hex:active,
.btn-hex:focus,
.btn-hex-secondary:active,
.btn-hex-secondary:focus {
  color: #ffffff;
  border: none;
  background: linear-gradient(to right, var(--root-color-start), var(--root-color-end));
}

.btn-hex:disabled {
  cursor: default;
  background: #333333;
  border: #505050;
}

/*
 * MODAL
 */
.modal {
  z-index: 200;
}

.modal-backdrop {
  z-index: 10;
}

.modal-content {
  background-color: #333333;
  color: #999999;
}

.modal-content h1 {
  font-size: 1.2em;
  color: #CCCCCC;
}

.modal-content h2 {
  font-size: 1.1em;
  color: #CCCCCC;
}

.modal-content h3 {
  font-size: 1em;
  color: #CCCCCC;
}

.modal-body {
  padding: 1.5rem;
  text-align: justify;
}

.modal-body a {
  color: #A5A5A5;
}

.modal-body {
  overflow-y: auto;
  /* Enable vertical scrolling */
}

/* Style scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background-color: #333333;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #242424;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #444444;
}

/* Style scrollbar for Firefox */
.modal-body {
  scrollbar-color: #242424 #333333;
  scrollbar-width: thin;
}

.modal-body a:hover,
a:active,
a:focus {
  color: #828282;
  cursor: pointer;
}

.modal-header {
  background: #242424;
  font-size: 1.2em;
  color: #CCCCCC;
  justify-content: center;
  align-items: center;
  display: flex;
  /* Use flexbox */
  position: relative;
  border: none;
  padding: 1rem;
}

.modal-title {
  flex-grow: 1;
  /* Pushes the title to the left */
  text-align: center;
  width: 100%;
}

.modal .btn-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #ffffff;
  opacity: 1;
  padding: 0;
  margin: 0;
  outline: none;
  text-align: center;
  line-height: 1;
}

.modal .btn-close:hover {
  color: #cccccc;
  cursor: pointer;
}

.modal .btn-close:focus,
.modal .btn-close:active {
  box-shadow: none;
  outline: none;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-top: none;
}

/*
 * SVG
 */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-logo {
  width: 20%;
  /* Adjust size */
  height: auto;
  margin-bottom: 1%;
  min-width: 128px;
}

.hex-logo-text {
  width: 20%;
  /* Adjust size */
  height: auto;
  margin-bottom: 2.5%;
}

/*
 * Jumbotron styling
 */
.jumbotron-container {
  display: flex;
  justify-content: space-evenly;
  /* Distributes jumbotrons evenly */
  align-items: center;
  flex-wrap: wrap;
  /* Ensures responsiveness */
  width: 100%;
  padding: 5%;
  /* Flexible spacing */
}

.jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 30%;
  height: 30%;
  min-width: 300px;
  min-height: 300px;
  background: #222222;
  border: 2px solid #CCCCCC;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  /* Default shadow */
}

.jumbotron:hover {
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
  /* Glow effect */
}

.jumbotron-image {
  width: 100%;
  height: 75%;
  object-fit: cover;
}

.jumbotron-footer {
  width: 100%;
  background: #333333;
  padding: 10px;
}

.title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #EEEEEE;
  margin: 0;
}

.subtitle {
  font-size: 1rem;
  color: #AAAAAA;
  margin: 0;
}



/* COOKIE BANNER STYLES */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #242424;
  color: #cccccc;
  padding: 1rem;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  width: 90%;
}

.banner-content p {
  margin: 0;
  font-size: 0.9rem;
  flex-grow: 1;
  text-align: left;
}

.banner-btn-wrapper {
  display: flex;
  gap: 15%;
}

.btn-banner {
  min-width: 65px;
}