* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* GLOBAL typography (h1, h2, h3, p, etc.) */
h1, h2, h3 {
    color: var(--text-primary);
    text-align: center;
}

/* Profile picture in the profile container */
#profileContainer img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	margin-top: 10px;
}

/* Shared style for small profile pictures (menu thumbnails) */
#profilePicThumbnail.profile-pic-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

/* Menu items */
.menu {
	width: 100%;
	max-width: 100vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background-color: var(--background-light);
	color: var(--text-primary);
	overflow: hidden; /* Prevent extra space due to padding */
}

.menu-container {
    background-color: var(--background-light);
    display: grid;
    grid-template-columns: 2fr 9fr 2fr;
    justify-content: center;
    margin: 0 auto;
    max-width: 400px;
    padding: 10px 0;
    width: 100%;
}

.menu img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
}

.top-menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	background-color: var(--background-light) !important; /* Force background color */
}

/* Calendar icon */
.menu .calendar-icon {
    border-radius: 0;
    box-sizing: border-box !important;
    height: 40px !important;
    margin: 0 !important;
    max-height: 40px !important;
    max-width: 40px !important;
    object-fit: contain;
    padding: 0 !important;
    width: 40px !important;
}

/* Three-dot menu (dots and container) */
.three-dot-menu {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.three-dot-menu-container {
    background-color: transparent;
    display: inline-block;
    position: relative;
    padding: 10px;
    width: 60px;
    height: 60px;
}

.comment a {
    color: blue;
    text-decoration: underline;
}

/* Default light mode - black dots */
#threeDotMenu {
    content: url('images/3-dots-black.png');
}

/* Dark mode - white dots */
.mode-dark #threeDotMenu {
    content: url('images/3-dots-white.png');
}

/* Special case: Hufflepuff theme in light mode - force white dots */
.theme-hufflepuff.mode-light #threeDotMenu {
    content: url('images/3-dots-white.png');
}

/* Special case: Ravenclaw theme in light mode - force white dots */
.theme-ravenclaw.mode-light #threeDotMenu {
    content: url('images/3-dots-white.png');
}

/* Special case: Slytherin theme in light mode - force white dots */
.theme-slytherin.mode-light #threeDotMenu {
    content: url('images/3-dots-white.png');
}

/* Dropdown menu */
.dropdown-menu {
    background-color: var(--background-white);
    border: 1px solid var(--border-input);
    border-radius: 5px;
    box-shadow: 0px 4px 8px var(--shadow-light);
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    width: 150px;
    z-index: 1000;
}

.dropdown-item {
    background-color: var(--background-white);
    border-bottom: 1px solid var(--border-input);
    color: var(--text-primary);
    padding: 10px;
    text-align: center;
    transition: background-color 0.2s, color 0.2s;
}

/* Ensure no dots from the three-dot menu affect the dropdown items */
.dropdown-item div {
	margin: 0; /* Remove any inherited margins */
	background-color: transparent; /* Correct way to reset background */
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: var(--button-primary-bg);
    color: var(--background-white);
}

/* Default Buttons in High-Contrast Dark Mode */
.theme-contrast.mode-dark button {
    background-color: white; /* White buttons by default */
    color: black;            /* Black text for contrast */
    border: 1px solid white; /* Add white border */
}

/* Buttons Inside White Containers */
.theme-contrast.mode-dark .gallery-container button,
.theme-contrast.mode-dark .example-gallery-item button,
.theme-contrast.mode-dark .example-photo-caption button,
.theme-contrast.mode-dark .add-comment-btn,
.theme-contrast.mode-dark .caption-button {
    background-color: black; /* Black buttons on white containers */
    color: white;            /* White text */
    border: 1px solid black; /* Add black border for definition */
}

/* Default Theme - Light Mode */
.theme-default.mode-light {
/* Dynamic Colors */
	--background-main: #c8dbfa;
	--background-overlay: rgba(0, 0, 0, 0.8); 
	--background-white: #fff;

	--text-primary: #826ddd; 
	--text-secondary: #2e3e5c; 
	--text-muted: #605882;
	--highlight-date: #605882;

	--button-primary-bg: #826ddd; 
	--button-hover-bg: #2e3e5c;
	--button-show-bg: black; 

/* Static Colors */
	--border-light: #ddd; 
	--border-input: #ccc;
	--border-white: #fff;

	--text-white: #ffffff; 
	--text-error: red;

	--button-disabled-bg: #ccc;
	--button-close-bg: black;

	--shadow-light: rgba(0, 0, 0, 0.1);
	--shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Default Theme - Dark Mode */
.theme-default.mode-dark {
/* Dynamic Colors */
	--background-main: #1a1a1a;
	--background-overlay: rgba(0, 0, 0, 0.9); 
	--background-white: #2e2e2e;

	--text-primary: #ced1f8;
	--text-secondary: #fff;
	--text-muted: #a3a8f7;
	--highlight-date: white;

	--button-primary-bg: #464cc1;
	--button-hover-bg: #363bad;
	--button-show-bg: blue;

/* Static Colors */
	--border-light: #444;
	--border-input: #555;
    --border-white: #fff;

	--text-white: #fff;

	--button-disabled-bg: #555;
	--button-close-bg: white;

	--shadow-light: rgba(255, 255, 255, 0.1);

}

/* Beach Theme - Light Mode */
.theme-beach.mode-light {
/* Dynamic Colors */
  --background-main: #bedbf1;
  --background-overlay: rgba(0, 123, 167, 0.8);
  --background-white: #eadbd4;

  --text-primary: #3aaeb1; 
  --text-secondary: #0084ad; 
  --text-muted: #fd7359; 
  --highlight-date: #fd7359; /* Comment count */

  --button-primary-bg: #48a9a6; /* cfe9f9 bee3fa bad6e3 Same as primary text color */
  --button-hover-bg: #0084ad; /* e6d6bf Same as secondary text color */

/* Static Colors */
  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc; 
  --button-close-bg: black;
  --button-show-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1); 

}

/* Beach Theme - Dark Mode */
.theme-beach.mode-dark {
/* Dynamic Colors */
  --background-main: #132c49;
  --background-overlay: rgba(0, 123, 167, 0.8);
  --background-white: #547082;

  --text-primary: #7fb8bf; 
  --button-primary-bg: #7fb8bf; /* Same as primary text color */

  --text-secondary: white;
  --button-hover-bg: #d4b483; /* Same as secondary text color ea5b0f*/

  --text-muted: #d4b483;
  --highlight-date: #d4b483; /* Comment count */

/* Static Colors */
  --border-light: #444;
  --border-input: #555;
  --border-white: #fff;

  --text-white: #fff;

  --button-disabled-bg: #555;
  --button-close-bg: white;
  --button-show-bg: black;

  --shadow-light: rgba(255, 255, 255, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Southern Utah Theme - Light Mode */
.theme-soutah.mode-light {
/* Dynamic Colors */
  --background-main: #f3ad59; 
  --background-overlay: rgba(67, 113, 190, 0.8); 
  --background-white: #ffdd96; 

  --text-primary: #38a6f0; 
  --button-primary-bg: #4ab0f2; 

  --text-secondary: #932500; 
  --button-hover-bg: #932500; 

  --text-muted: #4371be; 
  --highlight-date: #4371be; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Southern Utah Theme - Dark Mode */
.theme-soutah.mode-dark {
/* Dynamic Colors */
  --background-main: #022028; 
  --background-overlay: rgba(0, 60, 76, 0.8); 
  --background-white: #69322e;

  --text-primary: #3a758d;
  --button-primary-bg: #3a758d; 
  
  --text-secondary: #f8b77d; 
  --button-hover-bg: #f8b77d; 

  --text-muted: #ab6f44; 
  --highlight-date: #ab6f44; 


/* Static Colors */

  --border-light: #444;
  --border-input: #555;
  --border-white: #fff;

  --text-white: #fff;

  --button-disabled-bg: #555;
  --button-close-bg: white;
  --button-show-bg: black; 

  --shadow-light: rgba(255, 255, 255, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Gryffindor Theme - Light Mode */
.theme-gryffindor.mode-light {
/* Dynamic Colors */
  --background-main: #ecb213; 
  --background-overlay: rgba(211, 166, 37, 0.8); 
  --background-white: #ebcc7b; 

  --text-primary: #740001; 
  --button-primary-bg: #740001; 

  --text-secondary: #ae0001; 
  --button-hover-bg: #ae0001; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Gryffindor Theme - Dark Mode */
.theme-gryffindor.mode-dark {
/* Dynamic Colors */
  --background-main: #ecb213; 
  --background-overlay: rgba(211, 166, 37, 0.8); 
  --background-white: #ebcc7b; 

  --text-primary: #740001; 
  --button-primary-bg: #740001; 

  --text-secondary: #ae0001; 
  --button-hover-bg: #ae0001; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Hufflepuff Theme - Light Mode */
.theme-hufflepuff.mode-light {
/* Dynamic Colors */
  --background-main: #000000; 
  --background-overlay: rgba(236, 185, 57, 0.8); 
  --background-white: #f0c75e; 

  --text-primary: #726255; 
  --button-primary-bg: #726255; 

  --text-secondary: #372e29; 
  --button-hover-bg: #372e29; 

  --text-muted: #372e29; 
  --highlight-date: #372e29; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Hufflepuff Theme - Dark Mode */
.theme-hufflepuff.mode-dark {
/* Dynamic Colors */
  --background-main: #000000; 
  --background-overlay: rgba(236, 185, 57, 0.8); 
  --background-white: #f0c75e; 

  --text-primary: #726255; 
  --button-primary-bg: #726255; 

  --text-secondary: #372e29; 
  --button-hover-bg: #372e29; 

  --text-muted: #372e29; 
  --highlight-date: #372e29; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Ravenclaw Theme - Light Mode */
.theme-ravenclaw.mode-light {
/* Dynamic Colors */
  --background-main: #222f5b; 
  --background-overlay: rgba(148, 107, 45, 0.8); 
  --background-white: #5d5d5d; 

  --text-primary: #000000; 
  --button-primary-bg: #000000; 

  --text-secondary: #0e1a40; 
  --button-hover-bg: #0e1a40; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Ravenclaw Theme - Dark Mode */
.theme-ravenclaw.mode-dark {
/* Dynamic Colors */
  --background-main: #222f5b; 
  --background-overlay: rgba(148, 107, 45, 0.8); 
  --background-white: #5d5d5d; 

  --text-primary: #000000; 
  --button-primary-bg: #000000; 

  --text-secondary: #0e1a40; 
  --button-hover-bg: #0e1a40; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Slytherin Theme - Light Mode */
.theme-slytherin.mode-light {
/* Dynamic Colors */
  --background-main: #1a472a; 
  --background-overlay: rgba(93, 93, 93, 0.8); 
  --background-white: #aaaaaa; 

  --text-primary: #509165; 
  --button-primary-bg: #2a623d; 

  --text-secondary: #000000; 
  --button-hover-bg: #000000; 

  --text-muted: #5d5d5d; 
  --highlight-date: #5d5d5d; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Slytherin Theme - Dark Mode */
.theme-slytherin.mode-dark {
/* Dynamic Colors */
  --background-main: #1a472a; 
  --background-overlay: rgba(93, 93, 93, 0.8); 
  --background-white: #aaaaaa; 

  --text-primary: #509165; 
  --button-primary-bg: #2a623d; 

  --text-secondary: #000000; 
  --button-hover-bg: #000000; 

  --text-muted: #5d5d5d; 
  --highlight-date: #5d5d5d; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Mermaid Theme - Light Mode */
.theme-mermaid.mode-light {
/* Dynamic Colors */
  --background-main: #816eb4; 
  --background-overlay: rgba(40, 104, 198, 0.8); 
  --background-white: #91d2f4; 

  --text-primary: #7a3da9; 
  --button-primary-bg: #cba2ea; 

  --text-secondary: #3771c6; 
  --button-hover-bg: #3771c6; 

  --text-muted: #115b90; 
  --highlight-date: #115b90; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Mermaid Theme - Dark Mode */
.theme-mermaid.mode-dark {
/* Dynamic Colors */
--background-main: #3972c6; 
  --background-overlay: rgba(63, 51, 129, 0.8);
  --background-white: #91d2f4; 

  --text-primary: #3f3381;
  --button-primary-bg: #3f3381; 

  --text-secondary: #eb0578; 
  --button-hover-bg: #f788bf; 

  --text-muted: #8311ee; 
  --highlight-date: #7e14e1; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Forest Theme - Light Mode */
.theme-forest.mode-light {
/* Dynamic Colors */
  --background-main: #69893b; 
  --background-overlay: rgba(145, 180, 53, 0.8); 
  --background-white: #bacb9f; 

  --text-primary: #6091cb; 
  --button-primary-bg: #6091cb; 

  --text-secondary: #2f5271; 
  --button-hover-bg: #2f5271; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Forest Theme - Dark Mode */
.theme-forest.mode-dark {
/* Dynamic Colors */
--background-main: #213d47; 
  --background-overlay: rgba(70, 100, 41, 0.8);
  --background-white: #3e502a; 

  --text-primary: #91b435; 
  --button-primary-bg: #91b435; 

  --text-secondary: #6091cb; 
  --button-hover-bg: #6091cb; 

  --text-muted: #989e50; 
  --highlight-date: #989e50; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: white;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Tropical Theme - Light Mode */
.theme-tropical.mode-light {
/* Dynamic Colors */
  --background-main: #feb7c9; 
  --background-overlay: rgba(149, 187, 216, 0.8); 
  --background-white: #cde6c0; 

  --text-primary: #10b48e; 
  --button-primary-bg: #10b48e; 

  --text-secondary: #f775a9; 
  --button-hover-bg: #f775a9; 

  --text-muted: #08bfb9; 
  --highlight-date: #08bfb9; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Tropical Theme - Dark Mode */
.theme-tropical.mode-dark {
/* Dynamic Colors */
  --background-main: #feb7c9; 
  --background-overlay: rgba(149, 187, 216, 0.8); 
  --background-white: #cde6c0; 

  --text-primary: #10b48e; 
  --button-primary-bg: #10b48e; 

  --text-secondary: #f775a9; 
  --button-hover-bg: #f775a9; 

  --text-muted: #08bfb9; 
  --highlight-date: #08bfb9; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Pastel Theme - Light Mode */
.theme-pastel.mode-light {
/* Dynamic Colors */
  --background-main: #facfe0; 
  --background-overlay: rgba(255, 255, 234, 0.8); 
  --background-white: #caf0b8; 

  --text-primary: #1cb9c4; 
  --button-primary-bg: #97e4ea; 

  --text-secondary: #8889a4; 
  --button-hover-bg: #8889a4; 

  --text-muted: #bea8d6; 
  --highlight-date: #bea8d6; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Pastel Theme - Dark Mode */
.theme-pastel.mode-dark {
  --background-main: #d2b2bf; 
  --background-overlay: rgba(255, 255, 234, 0.8); 
  --background-white: #caf0b8; 

  --text-primary: #54aab0; 
  --button-primary-bg: #97e4ea; 

  --text-secondary: #8788b0; 
  --button-hover-bg: #b4b6ee; 

  --text-muted: #776887; 
  --highlight-date: #8e7ba3; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #979985;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* Contrast Theme - Light Mode */
.theme-contrast.mode-light {
/* Dynamic Colors */
  --background-main: #d9d9d9; 
  --background-overlay: rgba(255, 255, 255, 0.8); 
  --background-white: #fffffa; 

  --text-primary: #000000; 
  --button-primary-bg: #000000; 

  --text-secondary: #000000; 
  --button-hover-bg: #5d5d5f; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #fff;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}

/* High Contrast Theme - Dark Mode */
.theme-contrast.mode-dark {
/* Dynamic Colors */
  --background-main: #000000; 
  --background-overlay: rgba(0, 0, 0, 0.8); 
  --background-white: #fffffa; 

  --text-primary: #000000; 
  --button-primary-bg: #000000; 

  --text-secondary: #000000; 
  --button-hover-bg: #5d5d5f; 

  --text-muted: #000000; 
  --highlight-date: #000000; 

/* Static Colors */
  --button-show-bg: black; 

  --border-light: #ddd;
  --border-input: #ccc;
  --border-white: #7fb8bf;

  --text-white: #ffffff;

  --button-disabled-bg: #ccc;
  --button-close-bg: black;

  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);

}