style.css

*{
  margin: 0%;
  padding: 0%;
}


#game_pg{
  background-image: url(bg.png);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  width: 100%;
  height: 100vh;
}

.mode{
    margin-top: 10%;
    margin-bottom: 18px;
}

.login{
  margin-top: 10%;
    display: block;
    background-color: floralwhite;
   
    width: 325px;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;

    border: cyan ridge 10px;
}

#name{
    display: inline;
    margin-left: 5%;
    position: relative;
    width: 50%;
    height: 5%;
    border: black ridge 5px ;
    background-color: rgba(137, 43, 226, 0.096);
    font-size: large;
    color: rgb(32, 14, 32);
    
}

#subm{
    display: block;
    background-color: rgba(255, 217, 0, 0.705);
    margin-right: auto;
    margin-left: auto;
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: xx-large;
    border: rgba(255, 217, 0, 0.397) 3px ridge;
    border-radius: 10px;
    cursor: pointer;
}


#titl{
    font-size: 100px;
    color: bisque;
    text-align: center;
    animation-name: glow;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    
  }

@keyframes glow {
  0%{
    text-shadow:  0 0 10px rgb(255, 0, 255), 0 0 20px rgb(255, 0, 255), 0 0 30px rgb(255, 0, 255), 0 0 40px rgb(255, 0, 255), 0 0 50px rgb(255, 0, 255), 0 0 80px rgb(255, 0, 255);
  }
  50%{
    text-shadow:  0 0 10px rgba(0, 255, 0, 0.486), 0 0 20px rgba(0, 255, 0, 0.548), 0 0 30px rgba(0, 255, 0, 0.432), 0 0 40px rgba(0, 255, 0, 0.384), 0 0 50px rgba(0, 255, 0, 0.466), 0 0 80px rgb(0, 255, 0);
  }
  100%{
    text-shadow:  0 0 10px rgba(0, 0, 255, 0.226), 0 0 20px rgba(0, 0, 255, 0.342), 0 0 30px rgba(0, 0, 255, 0.288), 0 0 40px rgba(0, 0, 255, 0.253), 0 0 50px rgb(0, 0, 255), 0 0 80px rgb(0, 0, 255);
  }
}