/* 
 Main css file, this one is used on pretty much the entire site, I removed the about.css file.
*/

/* Plyr.js test */
/* https://github.com/sampotts/plyr?tab=readme-ov-file#customizing-the-css */
/*
:root {
  /*--plyr-color-main: #1ac266;*/
  /* --plyr-color-main: #00D4FF;
}
*/

/* ----------- */
/* Video page */
.embed-responsive {
  position: relative;
  padding-bottom: 56.25%; /* Aspect ratio for 16:9 */
  height: 0;
  overflow: hidden;
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------- */

/* Moved out of password_gen.html */

/* https://stackoverflow.com/questions/33656450/trying-to-make-html-box-around-entry-fields-and-make-it-all-nice */
/* This one works the way I want, puts the generated password to the right in a box. */
/* https://stackoverflow.com/questions/39959023/styling-p-tags-within-a-border-box */
/* #passwordtest{
	border: solid 3px #4D545E; padding: 6px;
} */
#passwordtest {
	border: 1px solid black;
	display: inline-block;
}

/* This aligns the login and logout buttons to the right on desktop. */
#login_logout_button {
    margin-left: auto;
    margin-right: 20px;
}

/* ---------------- */
/* Dark Mode fixes */
body[data-bs-theme='light'] a {
  /* color: #007bff; A strong blue for visibility */
  color: #644579; /* A strong blue for visibility */
  text-decoration: underline; /* Underlining links can enhance readability */
}

/* Hover State */
body[data-bs-theme='light'] a:hover,
body[data-bs-theme='light'] a:focus {
  color: #0056b3; /* A darker blue for hover effect */
}

/* Visited Links */
body[data-bs-theme='light'] a:visited {
  color: #6f42c1; /* A distinguishable color for visited links */
}

body {
    background-color: #f5f5f5; /* Light mode background */
}

/* Dark mode background */
/* TODO Implement these when I fix the navbar to work in light/dark mode. */
/* [data-bs-theme="dark"] body { */
    /* background-color: #121212; Dark background */
/* } */

/* Custom CSS for Button Colors */
body {
    --button-light-bg: #f8f9fa; /* Light button background */
    --button-dark-bg: #343a40; /* Dark button background */
}

[data-bs-theme="light"] .btn-outline-dark {
    border-color: #6c757d; /* Light theme border color */
}

[data-bs-theme="dark"] .btn-outline-dark {
    border-color: #ffffff; /* Dark theme border color */
}

/* Set the button background based on theme */
[data-bs-theme="light"] .btn {
    background-color: var(--button-light-bg);
    color: #343a40;
}

[data-bs-theme="dark"] .btn {
    background-color: transparent;
    color: #ffffff;
}

/* ---------------- */


.main_headers {
	text-align: center;
}

/*
.li {
    margin-bottom: 10px;
}
*/

ul.spaced_margins {
	display: flex;
	flex-direction: column;
	/* To make the list vertical */
	gap: 10px;
	/* Adds 10 pixels of space between the list items */
}

.sidebar_paragraph {
	font-size: 20px;
}

header h1.headerIndex {
	margin: auto;
	/* margin: 0;*/
	width: 50%;
	font-size: 1.7em;
	color: #fff;
	/* White */
	/* color: #32a852;  Light Green */
	/*text-transform: uppercase;*/
	text-align: center;
}

div.p1 {
	text-align: center;
}

div.p2 {
	text-align: center;
}

/* Dark mode button customizations */
.change {
	/* cursor: pointer; */
	border: 1px solid #555;
	border-radius: 40%;
	width: 20px;
	text-align: center;
	padding: 2px;
	margin-left: 8px
}

.dark {
	background-color: #222;
	color: #e6e6e6;
}

.mode {
	float: right;
}