* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@keyframes characterRotate{
  0% {transform: rotateY(0deg);}
  50% {transform: rotateY(180deg);}
  100% {transform: rotateY(360deg);}
}
@keyframes heartPumping{
  0% {transform: scale(1.0);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1.0);}
}
@keyframes recordSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
/* https://unused-css.com/blog/css-shake-animation/ */
@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
body{
  font-family: "moonblossom", sans-serif;
  font-weight: 400;
  font-style: normal;
  background:#2051aa
}
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap:50px;
}
.musicPlayers button{
  display: flex;
  justify-content: center;
  align-items: center;
  width:10%;
}
.title{
  display: flex;
  align-items: center;
}
.title h1{
  color: white;
  font-size: 48px;
  text-align: center;
}
.scoreBox{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15%;
  color: black;
  background-color: #e7c065;
  border-radius: 10px;
}
.carolSpin{
  animation-name: characterRotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
.zosiaSpin{
  animation-name: characterRotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
.carolCharacter{
  display: flex;
  justify-content: flex-end;
  margin-top:-100px;
}
.zosiaCharacter{
  display:flex;
  justify-content: flex-start;
  margin-top:-100px;
}
.happyCarolCharacter{
  display:flex;
  justify-content: flex-start;
  margin-top:-100px;
}
.text{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 55%;
  margin: auto;
}
.text p{
  font-size: 32px;
  color: white;
  padding: 10px;
  text-align: center;
}
.enterContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap:70px;
}
.enterContainer h1{
  font-size: 70px;
  color: white;
}
button{
  padding: 20px 40px;
  border-radius: 10px;
  font-family: "moonblossom", sans-serif;
  background-color: #e7c065;
  cursor: pointer;
}
.characters{
  display: flex;
  justify-content: center;
  align-items: center;
}
.HeartAnimation{
  animation-name: heartPumping;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function:ease-in-out;
}
body{
  font-family: "moonblossom", sans-serif;
  font-weight: 400;
  font-style: normal;
  background:#2051aa
}
.game{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
#playArea{
  background-color: #c49015;
  background-size: cover;
  width: 50%;
  height: 500px;
  position:relative;
  overflow:hidden;
}
.HeartRow{
  display: flex;
  height:100%;
  flex-direction: column;
  width:100px;
}
#playArea .row {
  width:100%;
  height:100%;
  position:relative;
  display:flex;
}
#playArea .row_carol {
  width:100%;
  height:100px;
  position:relative;
}
.score{
  display: flex;
  justify-content: center;
  align-content: space-between;
  flex-direction: column;
  align-items: center;
}
.row img.item {
 width:40%;
 position:absolute;
 bottom:0px;
}
.shake{
  animation-name: shake;
  animation-duration: 0.25s;
}
.row_carol .carol img {
  width: 100%;
  padding: 0px;
  margin: 0px;
  animation-name: shake;
}
.CarolRow{
  width:100px;
  height:100%;
  position:absolute;
  right:0;
}