html, body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-color: #ffdd95; /* Replace with your desired flat color */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
  color: white;
  height: auto;
  position: relative; 
  overflow: hidden; 
  font: 1.2em;
  font-family: "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "MS PGothic", Arial, Helvetica, clean, sans-serif;
  background-image: linear-gradient(#ffdd95, #ffdd95, #ffdd95, white, white);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 800%;
  background-image: url('https://www.toptal.com/designers/subtlepatterns/uploads/pixel-heart.png');
  background-repeat: repeat; /* Tile the image */
  background-size: auto auto; /* Ensure background-size is set to 'auto' for tiling */
  opacity: 0.35; /* Set the opacity */
  animation: moveBackground 60s linear infinite; /* Animation */
  z-index: -1; /* Ensure it stays behind the content */
}

@keyframes moveBackground {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

.sparkle {
  position: absolute;
  background-color: rgb(255, 250, 173); /* Pink color for stars */
  box-shadow: 0 0 10px rgb(255, 250, 173), 0 0 20px rgb(255, 250, 173);
  opacity: 0.75;
  clip-path: polygon(
      50% 0%, 
      61% 35%, 
      98% 35%, 
      68% 57%, 
      79% 91%, 
      50% 70%, 
      21% 91%, 
      32% 57%, 
      2% 35%, 
      39% 35%
  ); /* Star shape */
  width: 15px;
  height: 15px;
  animation: descend 1s linear;
}

@keyframes descend {
  0% {
      transform: translateY(0);
      opacity: 1;
  }
  100% {
      transform: translateY(100px);
      opacity: 0;
  }
}

.blossom {
  position: absolute;
  top: 0;
  opacity: 0.8;
  animation: fall 7s linear infinite; /* Combined animation */
}

@keyframes fall {
  0% {
    opacity: 1; /* Start fully visible */
    transform: translateY(0) rotate(0deg); /* Start from the top and no rotation */
  }
  100% {
    opacity: 0; /* Fade out */
    transform: translateY(100vh) rotate(var(--rotation-angle)); /* Move to bottom of viewport and apply rotation */
  }
}

#banner {
  text-align: center;
  margin-top: 20px;
  max-width: 80%;
  height: auto;
}

h1 {
  font-size: 3em;
  text-shadow: 
      1px 1px 0 #1987df, 
      -1px -1px 0 #1987df,
      1px -1px 0 #1987df, 
      -1px 1px 0 #1987df,
      1px 0px 0 #1987df, 
      -1px 0px 0 #1987df,
      0px 1px 0 #1987df, 
      0px -1px 0 #1987df;
}

#NoWallet {
text-align: center;
font-size: 12px;
}

.TextNoWallet {
font-size: 16px;
font-style: italic;
color: rgb(75, 75, 75);
}

.TextInstallWallet {
font-size: 18px;
}


.m_box {
border: 1px solid #7e5200;
margin: 1em;
background-color: white;
width: 80%;
}

.m_box_red {
border: 1px solid #800000;
margin: 1em;
background-color: #ffffee;
width: 80%;
}

a {
color: blue;
text-decoration: underline;
}

.m_box_bar {
background: #7e5200;
color: white;
}

.m_box_bar_red {
background: #800000;
color: white;
}

h2.m_box {
background-color: #7e5200;
}

h2.box {
background-color: #fca;
}

p {
margin: 0.5em;
margin-left: 1em;
color: black;
}

.box {
border: 1px solid #7e5200;
color: #7e5200;
margin: 1em;
background-color: white;
width: 80%;
}

.box img {   
border: 1px solid purple;
}

.box_bar {
background: #d9d7b7;
color: #7e5200;
}

h2 {
margin-top: 0.001em;
margin-bottom: 0.001em;
margin-left: 0.25em;
font-size: 1.1em;
}

h3 {
margin-left: 0.3em;
font-size: 1em;
margin-top: 0.3em;
margin-bottom: 0.1em;
text-decoration: underline;
text-align: center;
font-weight: bold;
}

li {
margin-left: 0.3em;
}

ul {
list-style-type: circle;
}

a:hover {
color: red;
text-decoration: underline;
}

.gallery_container {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5em;
width: 100%;
}

div.gallery_item {
object-fit: cover;
}

.gallery_item img {
border: 1px solid #777;
height: auto;
width: auto;
max-width: 80%;
max-height: 80%;
object-fit: cover;

}

div.desc {
padding: 1em;
text-align: center;
font-size: smaller;
width: 80%;
max-height: 100%;
}

.mascot {
  display: flex;
  justify-content: center;
}

.mascot img {
  width: 50%; /* Reduce the size to 50% of its current size */
  display: block;
  margin: 0 auto; /* Center the image */
  border: 1px solid purple;
}


@media only screen and (max-width: 600px) {
  img {
    width: 100%;
  }

  hr {
    border: 0;
    height: 1px;
    background: #2f4d0c;
    margin: 1em 0;
  }

  body {
    width: 100%;
  }

  .a_box {
    margin: 0 auto; 
    width: auto; 
    padding: 0.5em;
  }
}