@font-face {
  font-family: 'CuteFont'; /* Define a name for the font */
  src: url('../fonts/CuteFont-Regular.ttf') format('truetype'); /* Path to the font file */
}

@font-face {
  font-family: 'Rubik'; /* Define a name for the font */
  src: url('../fonts/RubikBubbles-Regular.ttf') format('truetype'); /* Path to the font file */
}

@keyframes fadeOutScale {
  from {
      opacity: 1;
      transform: scale(1);
  }
  to {
      opacity: 0;
      transform: scale(0.5);
  }
}

.fade-out-scale {
  animation: fadeOutScale 0.5s forwards;
}

body {
  position: relative;
  font-family: sans-serif;
  margin: 0; /* Ensure body takes full viewport */
}

body:hover::after {
  filter: hue-rotate(360deg); /* End state when body is hovered */
}

h2{
  font-size: 70px;
  font-family: 'CuteFont', sans-serif;
  text-shadow: 
    -1px -1px 0 #333,  
     1px -1px 0 #333,
    -1px  1px 0 #333,
     3px  3px 0 #333; 
}

.white{
  background-color: rgba(255, 255, 255, 0.8);
  color: #666666;
}

.pink{
  color:#fbb4d5;
}
.blue{
  color: #67bcdf;
  
}
.logo{
  font-size: 100px;
  font-family: 'CuteFont', sans-serif;
  text-shadow: 
    -1px -1px 0 #333,  
     1px -1px 0 #333,
    -1px  1px 0 #333,
     3px  3px 0 #333; 
}

.bubble {
  position: relative;
  background: #fdc7dc;
  padding: 20px;
  color: #333;
  border: 2px solid #555;
  max-width: 800px; 
}

.bubble::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #fdc7dc;
  display: block;
  width: 0;
  z-index: 1;
  bottom: 10px;
  left: -15px;
}

.bubble::before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #555; /* コントラストが低い黒色の線 */
  display: block;
  width: 0;
  z-index: 0;
  bottom: 10px;
  left: -17px; /* 線の太さに合わせて調整 */
}

.container {
  display: flex;
  align-items: center; /* 中央揃え */
  gap: 20px; /* 画像と吹き出しの間隔 */
}

/* Colors

Background: #fffdeb (Beige)
Pastel Blue: '#fdc7dc'
Pink: '#fbb4d5'