@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&display=swap');


.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;

}

body {
  background-color: #393E46;
}

h1 {
  margin: 5px;
  font-family: 'Lobster', cursive;
  text-shadow: 5px 0 #232931;
  font-size: 5rem;
  color: #4ECCA3;
}

p {
  font-size: 3em;
  color: #4ECCA3;
  font-family: 'Indie Flower', cursive;
}

img {
  width: 80%;
}


button {
  font-size: 2em;
  cursor: pointer;
  font-family: 'Dosis', sans-serif;
  margin-top: 2em;
  padding: auto;
}
footer {
  margin-top: 5%;
  color: #EEEEEE;
  text-align: center;
  font-family: 'Indie Flower', cursive;

}

/* confetti style */



body .textcontainer{
  padding: 0;
  text-align:center;
}

body .particletext{
  text-align:center;
  font-size:48px;
  position:relative;
  color: #393E46;;
}

body .particletext.bubbles>.particle{
  opacity:0;
  position:absolute;
  background-color:rgba(33,150,243,0.5);
  animation:bubbles 3s ease-in infinite;
  border-radius:100%
}

body .particletext.hearts>.particle{
  opacity:0;
  position:absolute;
  background-color:#cc2a5d;
  animation:hearts 3s ease-in infinite
}

body .particletext.hearts>.particle:before,body .particletext.hearts>.particle:after{
  position:absolute;
  content:'';
  border-radius:100px;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#cc2a5d
}

body .particletext.hearts>.particle:before{
  transform:translateX(-50%)
}

body .particletext.hearts>.particle:after{
  transform:translateY(-50%)
}

body .particletext.lines>.particle{
  position:absolute;
  background-color:rgba(244,67,54,0.5);
  animation:lines 3s linear infinite;
}

body .particletext.confetti>.particle{
  opacity:0;
  position:absolute;
  animation:confetti 3s ease-in infinite;
}

body .particletext.confetti>.particle.c1{
  background-color:rgba(76,175,80,0.5)
}

body .particletext.confetti>.particle.c2{
  background-color:rgba(156,39,176,0.5)
}
body .particletext.fire>.particle{
  position:absolute;
  background-color:rgba(255,193,7,0.5);
  border-radius:40px;
  border-top-right-radius:0px;
  animation:fires 0.8s linear infinite;
  transform:rotate(-45deg);
  opacity:0
}

body .particletext.fire>.particle:before{
  position:absolute;
  content:'';top:60%;
  left:40%;
  transform:translate(-50%, -50%);
  width:50%;
  height:50%;
  border-radius:40px;
  border-top-right-radius:0px;
  background-color:rgba(251,140,0,0.5)
}

body .particletext.sunbeams>.particle{
  position:absolute;
  background-color:rgba(253,216,53,0.5);
  animation:sunbeams 3s linear infinite
}

@keyframes bubbles{
  0%{
    opacity:0
  }
  20%{
    opacity:1;
    transform:translate(0, -20%);
  }
  100%{
    opacity:0;
    transform:translate(0, -1000%);
  }
}

@keyframes hearts{
  0%{
    opacity:0;
    transform:translate(0, 0%) rotate(45deg)
  }
  20%{
    opacity:0.8;
    transform:translate(0, -20%) rotate(45deg)
  }
  100%{
    opacity:0;
    transform:translate(0, -1000%) rotate(45deg)
  }
}

@keyframes lines{
  0%,50%,100%{
    transform:translateY(0%)
  }
  25%{
    transform:translateY(100%)
  }
  75%{
    transform:translateY(-100%)
  }
}

@keyframes confetti{
  0%{
    opacity:0;
    transform:translateY(0%) rotate(0deg)
  }
  10%{
    opacity:1
  }
  35%{
    transform:translateY(-800%) rotate(270deg)
  }
  80%{
    opacity:1
  }
  100%{
    opacity:0;
    transform:translateY(2000%) rotate(1440deg)
  }
}

@keyframes fires{
  0%{
    transform:rotate(-70deg) translateY(0%)
  }
  25%{
    transform:rotate(-20deg) translateY(-5%);
    opacity:1
  }
  50%{transform:rotate(-70deg) translateY(-10%)
  }
  75%{
    transform:rotate(-20deg) translateY(-20%)
  }
  100%{
    transform:rotate(-70deg) translateY(-40%);opacity:1
  }
}

@keyframes sunbeams{
  0%{
    transform:translateY(40%) rotate(0deg)
  }
  50%{
    transform:translateY(-40%) rotate(180deg)
  }
  100%{
    transform:translateY(40%) rotate(360deg)
  }
  0%,14%,17%,43%,53%,71%,80%,94%,100%{
    opacity:0
  }
  6%,15%,24%,28%,48%,55%,78%,82%,99%{
    opacity:1
  }
}