style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: black
}

body {background:white}

button {
  transition: ease 150ms;
  background: #1a73e8;
  border: none;
  border-radius: 3px;
  width: 100px;
  height: 30px;
  cursor: pointer;
}

button:hover {
  border-radius: 8px;
  background: #2c7de8;
}

.dropdownli {
  background: linear-gradient(0deg, rgb(18, 90, 184), rgb(18, 90, 184)) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 350ms;
  padding-bottom: 2px;
  --bg-h: 2px;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}
.dropdownli:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}

.dropdownliFocus {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}

.dropdownliFocus.material-symbols-outlined {
  content: "arrow_drop_up"
}

    @media (prefers-color-scheme: dark) { 
      body {background-color:#212121}
      * {color: white}
    }