.gradient-text {
    background-image: linear-gradient(to right, #2892D7, #42A5F5, #592E83);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size:2vw;
    padding: 0;
    margin:16px;
    height:6vh;
    line-height:6vh;
    font-family:sans-serif;
  }
.dark-mode {
    background-color: #121212;
    color: #e0e0e0;


}

body {
    transition: background-color 0.3s, color 0.3s;
    background-color: #fff;
    color: #000;
    font-family: Arial, sans-serif;
}

.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

.switch {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
}

.switch label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.switch input {
    display: none;
}

.slider {
    width: 34px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50px;
    position: relative;
    transition: background-color 0.3s;
}

.slider:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

input:checked + .slider {
    background-color: #4caf50;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* Dark Mode Toggle Switch */
.switch {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

.switch label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.switch input {
  display: none;
}

.slider {
  width: 34px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50px;
  position: relative;
  transition: background-color 0.3s;
}

.slider:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

/* Dark Mode Styles */
.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.dark-mode table {
  background-color: #1e1e1e;
}

.dark-mode th,
.dark-mode td {
  color: #ddd;
  border-color: #333;
}

.dark-mode thead {
  background-color: #2a2a2a;
}

body {
  transition: background-color 0.3s, color 0.3s;
  background-color: #fff;
  color: #000;
  font-family: Arial, sans-serif;
}

body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

body.dark-mode table {
  background-color: #1e1e1e;
}

body.dark-mode th,
body.dark-mode td {
  color: #ddd;
  border-color: #333;
}

body.dark-mode thead {
  background-color: #2a2a2a;
}