@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

.bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  color: #fff;
}

.bg.-visible:before {
  transform: translate(0, 0);
}

.bg:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #a33e46;
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) .6s;
  content: '';
}

/* テキストのスタイル */
.title {
  display: block;
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  text-align: center;
}

.title span {
  display: block;
  opacity: 0;
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity linear 0.7s;
}

.title span:first-child {
  transform: translate(0, 40px);
  font-size: 20px;
  transition-delay: 0.25s;
}

.title span:last-child {
  margin-top: 18px;
  transform: translate(0, 30px);
  font-size: 48px;
  transition-delay: 0.45s;
}

.bg.-visible .title span {
  opacity: 1;
  transform: translate(0, 0);
}

.game-container{
    text-aling: center;
}

.game{
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}

h1{
    color: #333;
}

input{
    padding: 8px;
    margin-top: 10px;
    width: 80%;
}

.stats{
    margin-top: 20px;
}

button{
    margin-top:20px;
    padding:10px 20px;
    cursor: pointer;
    background-color:#007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
}

button:hover{
    background-color: #0056b3;
}