h1{
  font-family:'Saira Stencil';
}
.inj{
 color:black; 
}
.highlight{
 background-color:blue; 
}
.button{width:200px;height:75px;font-size:1em;}
html{
       font-size:1.2em;
       text-shadow:7px 7px 12px black;
    background:linear-gradient(#444444, #222222, #444444); 
    background-size: 100vw 100vh;
    font-family:'Helvetica', sans-serif, cursive, system-ui;
     user-select:none;
     color:#efefef;
    }
  ul, ol {
    width: 80vw;
  }
    button {
  position: relative; /* Needed to anchor the hover layer */
  z-index: 1;
  border: none; /* Recommended for cleaner look */
  border-radius: 10px;
  width: 200px;
  height: 75px;
  font-size: 1em;
  color: black;
  cursor: pointer;
  /* Original Background */
  background: linear-gradient(cyan 10%, #9999dd 90%, turquoise 100%);
  transition: color 0.7s ease;
  overflow: hidden; /* Keeps the hover layer inside the rounded corners */
}

/* Create the "Hover Layer" */
button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  /* The Hover Gradient */
  background: linear-gradient(#efefef 10%, #666666 90%, black 100%);
  opacity: 0; /* Start invisible */
  transition: opacity 0.7s ease; /* This handles the smooth fade */
}

button:hover {
  color: white;
}

button:hover::before {
  opacity: 1; /* Fade the hover layer in */
}