/* custom.css */
/* Custom margin classes for finer control */
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.ml-5 { margin-left: 5px; }
.ml-50 { margin-left: 50px; }
.ml-100 { margin-left: 100px; }
.mr-5 { margin-right: 5px; }
.mr-50 { margin-right: 50px; }
.max-w-300 { max-width: 300px; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(to bottom, #013338, #011219);
  color: white;
}

a {
  color: #31D5CD; /* This sets the text color to light green */
}


footer {
  margin-top: auto;
}

/* Root variables for easy color changes in the future */
:root {
  --primary-color: #377686;
  --primary-hover-color: #0b5ed7;
  --secondary-color: #14BDB7;
  --secondary-hover-color: #0a58ca;
  --text-color: #012B30; /* Newly defined variable */
}

.btn-primary {
  width: 120px;
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--secondary-color);
}

.button-home {
  margin-left: 100px;
  margin-top: 10px;
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--primary-hover-color);
  border-color: var(--secondary-hover-color);
}


/* Custom classes for colors, borders and backgrounds */
.bg-color {
  border-color: var(--text-color);
  background-color: var(--primary-color);
}

/* Code and Stock pages */

/* Custom CSS class for the row containing widgets */
.custom-row {
    max-width: 1000px; /* maximum width of the row (2*400px widget width + 100px for padding) */
    margin: auto; /* centers the row */
}

.video-container iframe {
  width: 100%; /* Make the video responsive */
  height: 100%;
  /* your other styles... */
}

.youtube-iframe {
    width: 400px;
    height: 225px;
    margin-bottom: 60px;
}

/* Media query for small phone screens */
@media (max-width: 576px) {
  .youtube-iframe {
      width: 300px; /* Adjust this value as needed */
      height: 169px; /* Adjust this value to maintain the 16:9 aspect ratio */
      margin-bottom: 40px; /* Adjust this value as needed */
      display: block; /* This makes the iframe a block-level element */
      margin-left: auto; /* These two lines center the iframe */
      margin-right: auto;
  }
}
.tab-content {
  max-width: 100%;
  width: 400px;
  max-height: 500px;
  overflow-y: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
  border-radius: 10px;
  background-color: #2b3a42; /* Darker background */
  color: white; /* Lighter font color */
}

/* This is for the non-active tabs */
.nav-tabs .nav-link {
  color: #a4dfb6; /* Lighter font color for non-active tabs */
  background-color: #1a1f23; /* Darker tab color */
}

/* This is for the active tab */
.nav-tabs .nav-link.active {
  color: black; /* White color for active tab text */
  background-color: #31D5CD; /* Darker tab color for active tab */
}

.tab-content h5 {
  color: whitesmoke;
  /* Add your other styles here */
}

ul li {
  color:whitesmoke;
}

.div-content-container {
  text-align: left;
}

.rounded-pill {
  background-color: rgba(0,0,0,0.5);
  padding: 5px 0px 1px 0px;
  margin-bottom: 20px; 
}

/* Index Custom CSS */
#waterportal {
  height: 700px;
  /* height: calc(100vh - 140px); */
  /* background-size: cover; */
  background-image: url('../images/MS-RobertTips.webp'), url('../images/MS-RobertTips.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.button-get-joke{
  margin-top: 20px;
  width: 140px; 
 }

/* Treasure Custom CSS */

/* Default style for smaller devices */
.password-container {
  flex-direction: column;
}

/* Flex layout for medium and larger devices */
@media (min-width: 768px) { /* Bootstrap's medium breakpoint */
  .password-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row; /* Row is default, but for clarity */
  }
}

.password-form {
  flex: 1;
  padding-right: 20px;
  padding-left: 40px;
  margin-bottom: 15px; /* Give some space below when stacked */
}

.password-form input[type="password"] {
  max-width: 200px;
}

.treasure-container {
  text-align: center;
  padding: 15px;  
  display: flex;               /* Add this line to use Flexbox */
  align-items: center;         /* Vertically center the content */
  justify-content: center;     /* Horizontally center the content */
  height: 100%;                /* Take the full height of its parent */
}

#treasureImage {
  max-width: 600px;
  min-width: 300px;            /* Minimum width so it doesn't become too small */
  height: auto;
  width: 100%;                 /* This ensures the image takes the full width of its container, respecting the min and max width */
}

/* Webkit browsers */
::-webkit-scrollbar {
  width: 12px;  /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: #0c8882;  /* Color of the scroll thumb (the part you drag) */
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: #012B30;  /* Color of the track (the background) */
  border-radius: 0px;
}

/* Firefox */
* {
  scrollbar-color: #31D5CD #012B30;  /* thumb and track color */
  scrollbar-width: thin;
}


.code-container pre {
  background-color: #282c34;
  border-radius: 5px;
  overflow: hidden;     /* This will ensure that the shifted <code> does not spill out */
  position: relative;   /* Allow positioning of inner <code> element */
}

.code-container code {
  display: block;       /* Make the <code> element block-level */
  padding: 10px;
  margin-left: -200px;   /* Negative margin to shift contents to the left */
  white-space: pre-wrap;
  overflow-x: auto;
}

.hljs {
  color: #abb2bf;
  background: black !important;
}

.joke-container {
  min-height: 275px;
  width: 220px;            
  margin-left: 50px;    
  margin-top: 175px;   
}

.container-fluid {
  padding-bottom: 50px;   /* Ensures enough spacing before the footer */
}

.main-content {
  padding-bottom: 20px;  /* Ensures spacing between the content and footer */
}

@media (max-width: 767px) {
  .joke-container {
      margin-top: 350px;  /* Reduced margin-top for smaller screens */
      margin-left: auto;
      margin-right: auto;
  }

  .main-content {
    padding-bottom: 145px;  /* Ensures spacing between the content and footer */
  }

  #waterportal {
    background-size: 80%; /* reduce the size of the background image */
  }

  .button-home {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
}