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

body{
  margin: 0;
  padding-top: 10vh;
  background: #ABEDC9;
}

h1{ text-align: center; 
    font-family: 'Sniglet';
     font-size:60px;
}

@font-face{
  font-family: 'ifontmaker';
  src: url("https://sean-mcdonald.com/css/font2024.ttf");
}

#shuffle{
  font-family: 'Sniglet';
  font-size:4em;
  background: yellow;
  border-radius: 3em;
  padding:.25em;
  position: relative;
  width: 80%;
  text-align:center;
  margin-left: 10%;
  z-index: 50;
}

#container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  gap:20px;
  grid-template-rows: repeat(1, 50vh);
  grid-auto-flow: column;
  padding: 25px;
  margin-bottom: 40px;

}

.burst-container{ 
     background: orange;
     border-radius:40px;
     box-shadow: 0px 0px 30px gold;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.burst {
      background: blue;
      width: 200px;
      height: 200px;
      position: relative;
      text-align: center;
      transform: rotate(20deg);
      color:black;
      z-index:1;
      margin:0;
}

.burst-2 {
      content: "";
      position: absolute;
      z-index:15;
      top: 0;
      left: 0;
      height: 200px;
      width: 200px;
      background: blue;
      transform: rotate(135deg);
}

.burst p{
  position: relative;
  z-index: 20;
  transform: rotate(-20deg);
  font-size:7em;
  top: .3em;
  color:white;
  font-family: sans-serif;
  padding: 0;
  margin:0;
  width: 100%;
  height: 100%;
}

.burst {
  cursor: pointer;
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both, 
             backgroundColorPalette 1s infinite;
  position: relative;
}

.shake p{ visibility: hidden; }

@keyframes shake {
  10%, 90% {
    transform: translate3d(-50px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(40px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(0, -40px, 0);
  }

  40%, 60% {
    transform: translate3d(40px, 0, 0);
  }
}

@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

.card{
  
  display: none;
  width:calc(60% - 0px);
  height:calc(80% - 0px);
  position: fixed;
  top: 0;
  left: 0;
  margin-left:20%;
  margin-right: 20%;
  margin-top: 5%;
  margin-bottom: 5%;
  background: lightyellow;
  border: 24px dotted orange;
  z-index: 100;
  font-size:5em;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0px 0px 40px white;
}

.shown{
  display: flex !important;
}

#sad{
  font-size: 4em;
}

.card span{
  position: absolute;
  bottom:1em;
  font-family: 'Sniglet';
}

.sean-font{
  font-family: ifontmaker !important;
  font-size: 2.5em;
}