@import url("https://fonts.googleapis.com/css?family=Audiowide");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&family=Poppins&family=Roboto:wght@100&display=swap');
*{
  margin : 0;
  padding : 0;
  box-sizing: border-box;
}
body{
  background-image: url("./sean-d-AYrHnfpFa24-unsplash.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto;
}
#wel{
  color: rgb(255, 255, 255);
  display : flex;
  justify-content: center;
  align-items: center;
  margin: 13vh 0vw 20vh;
  font-size: 3.3rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  background: conic-gradient(
    #CA4246 16.666%, 
    #E16541 16.666%, 
    #E16541 33.333%, 
    #F18F43 33.333%, 
    #F18F43 50%, 
    #8B9862 50%, 
    #8B9862 66.666%, 
    #476098 66.666%, 
    #476098 83.333%, 
    #A7489B 83.333%);
    background-size: 80%;
    background-repeat: repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent; 
    animation: rainbow-text-animation-rev 1s infinite alternate;
    cursor: pointer;
}
#wel:hover {
  animation: rainbow-text-animation 0.5s ease forwards;
  transform:scale(1.03);
  transition:0.5s ease-in;
}
@keyframes rainbow-text-animation {
  0% {
    background-size: 17%;
    background-position: 0 0;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 37%;
    background-position: -9em 1em;
  }
}
@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 85%;
    background-position: -9em 1em;
  }
  70% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}

.game{
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  align-items: center;
}
#name{
  width: 280px;
  height: 40px;
  padding: 10px;
  border-radius: 1rem;
  border-color: transparent;
  font-size: 20px;
  box-shadow: rgba(255, 255, 255 , 0.8) 5px 5px 6px ;
}
#start{
  width:200px;
  font-size: 1.6rem;
  font-family: "Audiowide", sans-serif;
  color:#d0e612fd;
  margin: 16%;
  border: none;
  outline: none;
  background: transparent ;
  transform:scale(1) ;
}
#start:hover {
  stroke-opacity: 0.6;
  cursor: pointer;
  transition:0.35s ease-out;
  transform:scale(1.07) ;
}
#start:active{
  transform:scale3d(1.1,0.8,0.6);
  color : rgba(0, 0, 0, 0.295);
}
#logo{
  color : rgb(63, 136, 126);
  font-size:60px ;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  
}