body{
    background-image: radial-gradient(rgb(255, 0, 212), rgb(0, 0, 0));
    color:white;
    text-align: center;
    font-size: 125%;
}

.outlined-text {
  color: rgb(0, 0, 0); /* text color */
  text-shadow:
    -1px -1px 0 rgb(255, 255, 255),
     1px -1px 0 rgb(255, 255, 255),
    -1px  1px 0 rgb(255, 255, 255),
     1px  1px 0 rgb(255, 255, 255);
}

.rainbow {
    font-size: 4rem;
    font-weight: bold;
    background: linear-gradient(
        to right,
        red, orange, yellow, green, blue, indigo, violet, red);
    background-size: 400% auto;   
    -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    animation: gradient-shift 10s linear infinite;
}

@keyframes gradient-shift {
    0% {background-position: 0% 50%;}
    100% {background-position: 125% 50%;}
}


.font1 {
    font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}