*{
  margin:0;
  padding:0;
}
.container {
 padding:0;
 margin:0;
 background-image: url("bg.png");
 background-size: cover;
 height: 100vh;
 width: 100%;
}



.heading-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 10rem;
}

.text1{
  color: #BC92DD;
  -webkit-text-stroke-width: 0.2rem;
  -webkit-text-stroke-color: black;
  }

  .text2{
    color:#FFE298;
    -webkit-text-stroke-width: 0.2rem;
    -webkit-text-stroke-color: black;
    
  }

  .dice-section{
    display: flex;
    padding-top: 4rem;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    margin-top: 5rem;
    

  }

  .dice-1{
    
    width:15rem ;
    height:15rem;
    background-color: #BC92DD;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }

  .dice-2{
    width:15rem ;
    height:15rem;
    background-color: #FFE298;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    

  }

  .one{
    width:15rem ;
    height:15rem;
    background-color: #B1D4E0;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;

  }

  .two{
    width:15rem ;
    height:15rem;
    background-color: #C0F1AB;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;

  }

  .three{
    width:15rem ;
    height:15rem;
    background-color: #FFDE59;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;

  }

  .four{
    width:15rem ;
    height:15rem;
    background-color: #FFC19B;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;

  }

  .five{
    width:15rem ;
    height:15rem;
    background-color: #FF9B9B;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;

  }

  .six{
    width:15rem ;
    height:15rem;
    background-color: #F8A9DA;
    border: 0.3rem solid black;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;

  }





button {
  --width: 50vw;
  --timing: 2s;
  border: 0;
  width: var(--width);
  padding-block: 1em;
  color: black;
  font-weight: bold;
  font-size: 1em;
  background:white;
  transition: all 0.2s;
  border-radius: 3px;
  cursor: pointer;
  border: 0.2rem solid black;
  border-radius: 5rem;
  
}

button:hover {
 
  animation: var(--timing) linear dance6123 infinite;
  transform: scale(1.1) translateY(-1px);
}



footer{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
  font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;

}