@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap);

body{
    background-color: #1A1A1A;
    overflow-x: hidden;
}

.highlight {
  position: relative;
  font-size: 56px;
  font-weight: bold;
  color: white;
}

.material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: 
    "FILL" 0, 
    "wght" 400, 
    "GRAD" 0, 
    "opsz" 24;
}

.highlight::after {
  content: "";
  position: absolute;
  left: 42px;
  bottom: 5px;
  width: 80%;
  height: 20px;
  background-color: rgb(69, 139, 69);
  z-index: -1;
}


.theme-button{
  background: transparent;
  color: white;
  border: none;
  border-bottom: 3px solid #3a6f0a; /* dark lime */
  padding: 4px 20px;
  font-size: 1.2rem;
  font-weight: bolder;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  text-decoration: none;
}

.theme-button::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background-color: #3a6f0a; /* same dark lime */
  z-index: -1;
  transition: height 0.3s ease;
}

.theme-button:hover::before{
  height: 100%;
}

.theme-button:hover{
  color: white;
}