style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 
}
body {
  font-family: 'Indie Flower', cursive;
text-align: center;
color: white;
background-color: black;
}
#loginForm, #homePage {
display: none;
}
.gameButton {
margin: 10px;
padding: 10px;
font-size: 18px;
cursor: pointer;
}
.underline {
  text-decoration:underline;
  cursor: pointer;
}

.detailContainer{
  z-index: 1;
  border-radius: 20px;
  border: 1px solid white;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  align-items: center;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 500px;
  background-color: rgba(255, 255, 255, 0.059);
}

#signUp,#login{
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  text-align: left;
}

.button{
  font-size:15px;
  font-weight: 400;
  font-family: 'Indie Flower', cursive;
  background-color: yellow;
  border: 3px solid white;
  border-radius: 20px;
  padding: 5px 0;
}

input {
  font-family: 'Indie Flower', cursive;
  color: white;
  border: none;
  border-bottom: 2px solid white;
  background-color:rgba(255, 255, 0, 0);
  padding:5px;
  outline: none;
}

.img-style{
opacity: 0.2;
z-index: -1;
height: 120px;
width: auto;
position: relative;
}
.img-style:nth-child(1){
animation: example1 10s ease-in-out 0.1s infinite alternate;

}
.img-style:nth-child(2){
animation: example 10s ease-in-out 0.1s infinite alternate;

}
.img-style:nth-child(3){
animation: example2 10s ease-in-out 0.1s infinite alternate;

}
.img-style:nth-child(4){
animation: example3 10s ease-in-out 0.1s infinite alternate;

}
.img-style:nth-child(5){
animation: example4 10s ease-in-out 0.1s infinite alternate;

}
.img-style:nth-child(6){
animation: example5 10s ease-in-out 0.1s infinite alternate;

}
.img-style:nth-child(7){
animation: example6 10s ease-in-out 0.1s infinite alternate;

}
@keyframes example1 {
0%   {top: 0px; left:0px;}
25%  {top:0px; left:100px;}
50%  {top:120px; left:-300px;}
100% {top:500px; left:300px;}
}

@keyframes example2 {
0%   {top: 200px; left:0px;}
25%  {top:120px; right:-200px;}
50%  {top:51px; left:500px;}
100% {top:60px; left:-400px;}
}

@keyframes example3 {
0%   {top:400px; left:-400px;}
25%  {top:60px; left:-400px;}
50%  {top:400px; left:-30px;}
100% {top:58px; left:160px;}
}

@keyframes example {
0%   {top: 100px; left:300px;}
25%  {top:100px; left:200px;}
50%  {top:550px; left:300px;}
100% {top:100px; left:-100px;}
}

@keyframes example4 {
0%   {top: 100px; left:50px;}
25%  {top:400px; left:20px;}
50%  {top:500px; left:530px;}
100% {top:200px; left:100px;}
}

@keyframes example5 {
0%   {top: 300px; left:0;}
25%  {top:50px; left:200px;}
50%  {top:170px; left:30px;}
100% {top:530px; left:100px;} /* Corrected 'buttom' to 'bottom' */
}

@keyframes example6 {
0%   {top: 80px; left:30px;}
25%  {top:300px; left:20px;}
50%  {top:190px; left:300px;}
100% {top:100px; left:100px;}
}

.home-page{
  display: block;
}

.Heading{
  font-weight:300;
  font-family: 'Sacramento', cursive;
  font-size: 45px;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  color: yellow;
}

.game-container{
  margin: 60px 60px;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
  column-gap: 60px;
}

.game-card{
  font-size: 30px;
  font-family: 'Indie Flower', cursive;
  background-color: rgba(240, 248, 255, 0.048);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 300px;
  border: 1px solid white;
  flex: 2;
  border-radius: 40px;
}

.game-buttons{
  color: white;
}