/* Add styles here */
body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  color: #333;
  margin: -22px 20px 40px 20px;
}

/* Add styles here */

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px; /* Optional: limit form width */
    margin: 20px auto; /* Center the form within its container */
}

#contact-form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block; /* Make labels block elements for better spacing */
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    background-color: #f9f9f9; /* Light background for inputs */
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: none; /* Hidden by default */
}

.dialog-container {
  position:fixed;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 10px; 
  max-width: 30%; 
  max-height: 42vh; /* Set a maximum height relative to the viewport height */
  min-width: 300px;
  overflow-y: auto; /* Add a vertical scrollbar if content exceeds max height */
  color: #333;
  margin: -22px 20px 40px 20px;
}

.dialog-container a {
  color: #333;
}

body.dark-mode .dialog-container a {
  color: #fff;
}

#contact-dialog .dialog-container {
  width: 21%;
}

#contact-form button[type="submit"] {
    background-color: #a0d8b3; /* Greenish background */
    color: #1e1e1e; /* Dark text */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Align button to the start */
}
 
body.dark-mode {
  background-color: #1e1e1e;
  color: #eee;
}



body.dark-mode .dialog-container {
  background-color: #333;
  color: #eee;
}

.dialog-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: #ddd;
  color: #333;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}



/* Optional: Add styles to limit the zoomed area or provide controls for panning */
.scale-diagram-container {
  overflow: hidden;
 }



.mode {
    margin-bottom: 8px;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #dadada;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    position:relative;
}


body.dark-mode .mode {
    border: 1px solid #555;
    background-color: #333;
    color: #eee;
}

.mode label {
    font-size: 1.5em;
    font-weight: bold;
    z-index:99;
}

.mode select {
    font-size: 1.2em;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width:250px;
}

#key-select {
  width: 68px;
}

#scale-select {
  width: auto;
  margin: 0 10px;
}

body.dark-mode .mode select {
  background-color: #555;
  color: #eee;
  border: 1px solid #666;
}

.container {
    width: 100%;
    max-width: 960px;
    margin-top: 20px;
}

.selected-scale-info {
    border:1px solid #ddd;
}

.selected-scale-info {
    background-color: #e9e9e9;
    border-radius: 8px;
    padding: 1px 20px;
}


#scale-diagram, body.dark-mode #scale-diagram {
  background-color: transparent;
}


body.dark-mode .selected-scale-info {
  background-color: #545454;
  border: 1px solid #555;
}



.selected-scale-info p {
 margin: 0;
}



.extra-info {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top:10px;
    justify-content: flex-start;
}

.extra-info div {    
    background-color:#fff9eb;
    border-radius:8px;
    border:1px solid #ddd;
    padding: 0 20px;
    margin-right:10px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 1.1em;
}

body.dark-mode .extra-info div {
  background-color: #2e4244; /* Darker shade of the light mode color */
  border: 1px solid #555;
}

.selectedScaleName {
 display:none;
}

/* Add styles here for the toggle switch */
.toggle-switch {
  position: relative;
  display: flex; /* Use Flexbox for layout */
  align-items: center; /* Vertically center items */
  justify-content: space-between; /* Space out the items inside */
  height: 34px;
  left: 44px;
  width: 150px;
}

/* Hide the default HTML checkbox - keep it for functionality */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  height: 34px;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 34px; /* Match height for rounded corners */
  width:60px;
  background-color: #afafaf;
}

body.dark-mode .slider, body.dark-mode #SharpFlatToggle:checked ~ .slider {
  background-color: #555;
}



.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  top:4px;
 width: 26px;
 left: 4px;
  transition: .4s;
  background-color: white; /* Color of the thumb */
  border-radius: 50%; /* Make the thumb round - should be on :before */
}

.labels {
 display: flex; /* Use Flexbox for label alignment */
 align-items: center; /* Vertically center labels */
 margin: 0 5px; /* Add horizontal spacing */
 position: absolute;
 left: -31px;
}



.toggle-text {
  font-size: 0.9em; /* Adjust size as needed */
  color: #333; /* Default text color */
}




body.dark-mode .sharp-text, body.dark-mode .flats-text, body.dark-mode .notes-text, body.dark-mode .degrees-text {
 color:#fff;
  transition: opacity 0.4s;
}

.flats-text, .sharp-text {
  font-size: 2.3em;
  font-weight: bolder;
}

.notes-text, .degrees-text {
  font-size: 1em;
  font-weight: bolder;
}

.notes-labels {
  display: flex;
  align-items: center;
  margin: 0 5px;
  position: absolute;
  left: -39px;
  gap: 74px;
}

.sharp-text {
  margin-right: 72px;
  z-index: 0;
}

input:checked ~ .labels .sharp-text {
  opacity: 0.5; /* Dim Sharps when Flats is active */
}
input:not(:checked) ~ .labels .flats-text {
    opacity: 0.5; /* Highlight Flats when active */
}
input:not(:checked) ~ .notes-labels .notes-text {
  opacity: 0.5;
}
input:checked ~ .notes-labels .degrees-text {
    opacity: 0.5; /* Highlight Flats when active */
}
/* Move the thumb to the right when the input is checked */
input:checked + label .slider:before {
  left: 30px; /* Position the thumb on the right */
}
#dark-mode-toggle {
  border-radius:50%;
}

body.dark-mode #compatible-scales li a {
  color:#fff;
}

#compatible-scales li a {
  color:#333;
}
iframe {
  margin-right:10px;
}

#backing-track {
  margin-top: -27px;
  padding: 18px;
  margin-bottom: 16px;
  background-color: #ddd;
  border-radius: 16px;
}
body.dark-mode #backing-track {
  background-color: #333;
}
.backing-track-title {
  display: block;
  padding: 0 0 11px 0;
}
#key-select-container {
  display: flex; /* Arrange children (note circles) in a row */
  flex-wrap: wrap; /* Allow circles to wrap to the next line if needed */
  /* Add any other styling you want for the container, like margin or padding */
}
.note-circle {
  width: 35px; /* Adjust size as needed */
  height: 35px; /* Adjust size as needed */
  border-radius: 50%; /* Makes the element a circle */
  background-color: #eee; /* Light background color */
  color: #333; /* Dark text color */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 5px; /* Add some spacing between circles */
  border: 1px solid #ccc; /* Add a border */
  transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition for hover and selected states */
}

.note-circle:hover {
  background-color: #ddd; /* Slightly darker background on hover */
}

.note-circle.selected {
  background-color: #a0d8b3; /* Greenish background for selected circle */
  color: #1e1e1e; /* Darker text color for selected */
  border-color: #77b28c; /* Darker border for selected */
  font-weight: bold;
}

/* Dark mode styles for note circles */
body.dark-mode .note-circle {
  background-color: #555; /* Darker background in dark mode */
  color: #eee; /* Light text in dark mode */
  border-color: #666; /* Lighter border in dark mode */
}

body.dark-mode .note-circle:hover {
  background-color: #666; /* Slightly lighter background on hover in dark mode */
}

body.dark-mode .note-circle.selected {
  background-color: #5a8d6e; /* Darker greenish background for selected in dark mode */
  color: #eee; /* Light text for selected in dark mode */
  border-color: #4a7b5c; /* Darker border for selected in dark mode */
}

/* Styles for the icon toggle button */
.icon-toggle-button {
  width: 50px; /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */
  border-radius: 50%; /* Make it a circle */
  border: 3px solid #ccc; /* Add a border */
  background-color: #fff; /* White background for light mode */
  color: #333; /* Dark icon color for light mode */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0; /* Remove default padding */
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; /* Smooth transitions */
  position: relative; /* Needed for absolute positioning of icons */
  font-size: 1.5em;
}

/* Hide one icon at a time */
.icon-toggle-button .fa-sun {
  display: none; /* Hide sun by default (in light mode) */
}

body.dark-mode .icon-toggle-button {
  background-color: #333; /* Dark background for dark mode */
  color: #eee; /* Light icon color for dark mode */
  border-color: #555; /* Darker border in dark mode */
}

body.dark-mode .icon-toggle-button .fa-moon {
  display: none; /* Hide moon in dark mode */
}

body.dark-mode .icon-toggle-button .fa-sun {
  display: inline-block; /* Show sun in dark mode */
}

/* Hover state */
.icon-toggle-button:hover {
  background-color: #ddd; /* Slightly darker background on hover in light mode */
}

body.dark-mode .icon-toggle-button:hover {
  background-color: #555; /* Slightly lighter background on hover in dark mode */
}

/* Styles for Color Note Circles */
.color_note_circle {
  fill: #00519a; /* Green color for color notes */
  stroke: rgb(0, 27, 79); /* Slightly darker green border */
}

/* Dark mode styles for Color Note Circles */
body.dark-mode .color_note_circle {
  fill: #00519a; /* Brighter green for dark mode */
}

/* Styles for the toggle switch container (adjust as needed based on your layout) */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between label and button */
}
#toggle-videos-button, #copy-link-button {
  cursor:pointer;
  padding: 8px 18px;
  border-radius: 8px;
  color: #333;
  background-color: #fff;
  border: 2px solid #a2a2a2;
  font-size: 1em;
  width: 200px;
}
body.dark-mode #toggle-videos-button, body.dark-mode #copy-link-button {
    color: #fff;
    background-color: #383838;
    border: 2px solid #333;
}
#toggle-videos-button:hover, #copy-link-button:hover {
    background-color: #ededed !important;
}
body.dark-mode #toggle-videos-button:hover, body.dark-mode #copy-link-button:hover {
    background-color: #444 !important;
}

.header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  align-content: flex-start;
}

.header .logo {
  position: relative;
  left: -62px;
  top: 22px;
  z-index: 0;
}
.header-links {
  padding:16px 0 16px 0px;
}
.header-divs {
  padding:0 0 0 41px;
}



.header .header-text {
  padding: 20px 0;
  font-size: 1.2em;
  font-style: italic;
  color: #6fd2ff;
}

.footer {
  padding: 20px 0;
  z-index: 1001;
  color:#333;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.footer a, .header a {
  color: #427fb5;
  z-index: 1000;
  text-decoration: none;
}
.footer a:hover, .header a:hover {
  text-decoration: underline!important;
}

body.dark-mode .footer, body.dark-mode .header {
  color:#fff;
}
body.dark-mode .footer a,body.dark-mode .footer span, body.dark-mode .header a {
  color:#709fa3;
  text-decoration: none;
}


/* Styles for the Mode Interval Pattern section */
#mode-interval-pattern {
  background-color: transparent;
  width:100%;
}


/* Styles for the interval pattern text */
/* Styles for the interval pattern text container */
#mode-interval-pattern #interval-pattern-text {
 display: block; /* Use flexbox to display children horizontally */
 align-items: center; /* Vertically align items */
}

/* Style for the Interval Pattern: text */
#mode-interval-pattern #interval-pattern-text p {
 margin-right: 10px; /* Add some space between text and visual pattern */
}

/* Styles for the visual representation of the intervals */
.interval-pattern-visual {
 display: none; /* Use flexbox to display interval boxes horizontally */
  gap: 5px; /* Add some spacing between the interval boxes */
}

/* Styles for the interval boxes */
.interval-box {
  width: 30px; /* Fixed width for the box */
  height: 30px; /* Fixed height for the box */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc; /* Default border */
  border-radius: 4px;
  font-weight: bold;
}

/* Styles for Whole Steps */
.whole-step {
  background-color: #a0d8b3; /* Greenish background for whole steps */
  border-color: #77b28c;
  color: #1e1e1e;
}

/* Styles for Half Steps */
.half-step {
  background-color: #ffecb3; /* Yellowish background for half steps */
  border-color: #ffcc80;
  color: #1e1e1e;
}

body.dark-mode .whole-step {
  background-color: #5a8d6e; /* Darker greenish background in dark mode */
}

body.dark-mode .half-step {
  background-color: #ffb347; /* Darker yellowish background in dark mode */
}


#chord-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  background: transparent;
  border: 0px;
  padding:0;
}

.single-triad {
  width:110px;
}

h1 {
  font-size:1.5em;
  margin-bottom: 0px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}



h5 {
  text-wrap-mode: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h2 {
  margin: 20px 0 0 0;
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
}
body.dark-mode h2 {
  color: #ede8b4;
}
p {
  margin: 10px 0 20px 0;
  line-height: 1.3em;
  font-size: 1em;
  color: #333;
}
body.dark-mode p {
  color: #e7e7e7;
}
.color-notes-text, .all-notes-text {
  color:#333;
  font-size: 0.9em;
  font-weight: bolder;
}
body.dark-mode .color-notes-text, body.dark-mode .all-notes-text {
  color:#fff;
}
.color-labels {
  display: flex;
  align-items: center;
  margin: 0 5px;
  position: absolute;
  left: -42px;
  gap: 102px;
}

input:not(:checked) ~ .color-labels .color-notes-text {
  opacity: 0.5;
}
input:checked ~ .color-labels .color-notes-text {
  opacity: 1;
}
.dark-toggle {
  position: absolute;
  right: 10px;
  left: unset;
  top: 10px;
  zoom: 70%;
  width: 51px;
  height: 51px;
}
select, option {
  font-size: 16px!important;
}
.intro {
  color:#444;
  font-size: 0.88em;
  margin: 0px 0 16px 0px;
  line-height: 1.3em;
  max-width: 1080px;
}
.header-key-links {
  padding:4px 0;
}
body.dark-mode .intro {
  color: #8e8e8e;
  font-size: 0.88em;
  margin: 0px 0 16px 0px;
  line-height: 1.3em;
}
#zoom-controls {
  margin: 0 0 0 20px;
  display: inline-block;

}
#zoom-slider {
  cursor:pointer;
}
svg:not(:root) {
  overflow-clip-margin: content-box;
  overflow: visible;
}
.note {
  display: inline-flex;
  font-weight: 100;
  font-size: 0.9em;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-direction: row;
  position: relative;
  top: 9px;
  margin-left: 52px;
  color: #aaa;
  cursor:pointer;
}
.utilities {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  gap: 20px;
  padding:20px;
}

.note_circle.scale-note.highlighted-shape-note {
  fill: #169e45 !important; /* Example highlight color */
  stroke: #fff;
  stroke-width: 1;
}
.dark-mode .note_circle.scale-note.highlighted-shape-note {
  fill: #169e45 !important; /* Example highlight color for dark mode */
  stroke: rgb(255, 255, 255);
  stroke-width: 1;
}
.note_circle.scale-note.highlighted-shape-occurrence {
  fill: #169e45 !important; /* Example highlight color */
  stroke: rgb(255, 255, 255);
  stroke-width: 1;
}
.dark-mode .note_circle.scale-note.highlighted-shape-occurrence {
  fill: #169e45 !important; /* Example highlight color for dark mode */
  stroke: rgb(255, 255, 255);
  stroke-width: 1;
}
#prev-shape, #next-shape {
  background-color: transparent;
    color: #000;
    font-size: 1.5em;
    border-radius: 50px;
    border: 0px;
    cursor: pointer;
    width: 31px;
}
.dark-mode #prev-shape, .dark-mode #next-shape {
  background-color: transparent;
  color: #fff;
  font-size: 1.5em;
  border-radius: 50px;
  border: 0px;
  cursor: pointer;
  width: 31px;
}


/* Styles for the shape select container */
.shape-select-container {
  display: flex;
  align-items: center; /* Vertically center items */
  gap: 5px; /* Add spacing between items */
}
/* Styles for the clear shape button */
#clear-shape-button {
  background: none; /* No background */
  border: none; /* No border */
  cursor: pointer;
  padding: 0; /* Remove default padding */
  font-size: 1em; /* Adjust size as needed */
  color: #333; /* Default icon color */
  display: none; /* Hide by default */
  margin-left: -20px; /* Adjust positioning to be closer to the dropdown */
  position: relative;
  left: -17px;
  top: 2px;
}
/* Dark mode styles for the clear shape button */
body.dark-mode #clear-shape-button {
  color: #eee; /* Light icon color in dark mode */
}
/* Show the clear shape button when a shape is selected */
.shape-select-container.shape-selected #clear-shape-button {
  display: inline-block; /* Or flex, etc., depending on your layout */
}



.dark-mode #fullscreen-button {
  display: block; /* Or inline-block if you prefer */
  margin-top: -5px; /* Adjust spacing as needed */
  padding: 10px 15px;
  font-size: 1em;
  cursor: pointer;
  background-color: transparent;
  border:0;
  color: #fff;
  position: absolute;
  right: 15px;
}
#fullscreen-button {
  display: block; /* Or inline-block if you prefer */
  margin-top: -5px; /* Adjust spacing as needed */
  padding: 10px 15px;
  font-size: 1em;
  cursor: pointer;
  background-color: transparent;
  border:0;
  position: absolute;
  right: 15px;
}
.page-section {
  margin-bottom: 40px;
  position:relative;
}
.page-section img {
  margin-bottom: -10px;
}
.page-main {
  margin-top:40px;
}
body.dark-mode .page-h2 {
  color:#fff;
  font-size: 1em;
  text-align: center;
  margin-bottom: -10px;
  margin-top: 10px;
}
.page-h2 {
  font-size: 1em;
  text-align: center;
  margin-bottom: -10px;
  margin-top: 10px;
}
.page-h1 {
  font-size:2em!important;
  margin-bottom: 10px;
}
.page-body {
  padding: 40px;
}
.scale-navigation a {
  color:#222;
  text-decoration: none;
  display: inline-block;
  padding: 0 5px;
}
body.dark-mode .scale-navigation a {
  color: #99bcdb;
  text-decoration: none;
  display: inline-block;
  padding: 0 5px;
}
body.dark-mode .back-to-top {
  position: absolute;
  top: 21px;
  right: 25px;
  color: #c8c8c8;
  text-decoration: none;
}
.back-to-top {
  position: absolute;
  top: 21px;
  right: 25px;
  color: #222;
  text-decoration: none;
}
@media (max-width: 768px) {
  .header .logo img {
    width: 200px; /* Adjust the width as needed */
  }
  #scale-diagram:-webkit-full-screen svg {
    transform: rotate(90deg)!important;
    scale: 2!important;
  }
  #scale-diagram:-moz-full-screen svg {
    transform: rotate(90deg)!important;
    scale: 2!important;
  }
  #scale-diagram:-ms-fullscreen svg {
    transform: rotate(90deg)!important;
    scale: 2!important;
  }
  #scale-diagram:fullscreen svg {
    transform: rotate(90deg)!important;
    scale: 2!important;
  }
  body.dark-mode .page-h2 {
    color: #fff;
    font-size: 0.5em;
    text-align: center;
    margin-bottom: -2px;
    margin-top: 3px;
  }
  .page-h2 {
    color: #222;
    font-size: 0.5em;
    text-align: center;
    margin-bottom: -2px;
    margin-top: 3px;
  }
  body.dark-mode .back-to-top {
    position: absolute;
    top: 1px;
    right: 7px;
    color: #c8c8c8;
    text-decoration: none;
    font-size: 0.5em;
  }
  .back-to-top {
    position: absolute;
    top: 1px;
    right: 7px;
    color: #222;
    text-decoration: none;
    font-size: 0.5em;
  }
}
@media (min-width: 1500px) {
  body.dark-mode .page-h2 {
    color: #fff;
    font-size: 2em;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 15px;
  }
  .page-h2 {
    color: #222;
    font-size: 2em;
    text-align: center;
    margin-bottom: -10px;
    margin-top: 15px;
  }
}
@media (min-width: 769px) {
  body.dark-mode .back-to-top {
    position: absolute;
    top: 7px;
    right: 11px;
    color: #c8c8c8;
    font-size: 0.75em;
    text-decoration: none;
}
  .back-to-top {
    position: absolute;
    top: 7px;
    right: 11px;
    color: #222;
    font-size: 0.75em;
    text-decoration: none;
  }
}
.faq-answer {
  display: none;
}

.faq-answer.open {
  display: block;
  background-color: #263637;
  padding: 20px;
  border-radius: 0 0 8px 8px;
}
.faq-question {
  cursor:pointer;
  padding: 0 15px;
}
.faq-item {
  background-color: #2e4244;
  border-radius: 8px;
  margin-right: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 1.1em;
}
.faq-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1080px;
}

/* Announcement Bar */
.announcement-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, rgba(160, 216, 179, 0.2) 0%, rgba(66, 127, 181, 0.15) 100%);
  border: 1px solid rgba(160, 216, 179, 0.3);
  border-radius: 8px;
  padding: 10px 20px;
  margin: 22px 0 5px 0;
  font-family: sans-serif;
  color: #2c3e50;
  transition: all 0.3s ease;
  z-index: 1002;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.announcement-bar.hidden {
  display: none !important;
}

body.dark-mode .announcement-bar {
  background: linear-gradient(135deg, rgba(90, 141, 110, 0.2) 0%, rgba(66, 127, 181, 0.15) 100%);
  border-color: rgba(90, 141, 110, 0.3);
  color: #e0e0e0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.announcement-content {
  font-size: 0.95em;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.4;
  justify-content: center;
  text-align: center;
}

.announcement-icon {
  color: #3ddc84; /* Android Green */
  font-size: 1.2em;
  margin-right: 4px;
}

.announcement-link {
  color: #1a73e8 !important;
  text-decoration: none;
  font-weight: bold;
  margin-left: 8px;
  padding: 4px 12px;
  background-color: rgba(26, 115, 232, 0.1);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.announcement-link:hover {
  background-color: rgba(26, 115, 232, 0.2);
  text-decoration: none !important;
  transform: translateY(-1px);
}

body.dark-mode .announcement-link {
  color: #8ab4f8 !important;
  background-color: rgba(138, 180, 248, 0.15);
}

body.dark-mode .announcement-link:hover {
  background-color: rgba(138, 180, 248, 0.25);
}

@media (max-width: 600px) {
  .announcement-bar {
    padding: 12px 15px;
    margin: 22px 0 10px 0;
  }
  .announcement-content {
    font-size: 0.85em;
    gap: 4px;
  }
  .announcement-link {
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
    justify-content: center;
  }
}