/* 1. タグセレクター：ページ全体のフォントや背景を設定 */

h1 {
  color: #ffffff;
  border-bottom: 3px solid #ff9d00;
  display: inline-block;
}
h2{
  color: #ff9d00;
  border-bottom: 3px solid #ff9d00;
  display: inline-block;
}

h3{
  color: #ffffff;
  border-bottom: 3px solid #ff9d00;
  display: inline-block;
}


h4{
  color: #ffffff;
  display: inline-block;
}

h5{
  color: #ffffff;
  display: inline-block;
  font-size: 40px;

}

video {
  width: 400px;
}


div {
  border: 7px solid #ff9d00;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}
div.msg1 {
  border: none;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  
}

img {
  width: 300px;
  border-radius: 50px; /* 写真の角を丸くする */
  border: 5px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

img2 {
  width: 300px;
  border-radius: 50px; /* 写真の角を丸くする */
  border: 5px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  color: #ffffff;
  display: inline-block;
  font-size: 40px;

}


/* 2. クラスセレクター：特定のグループ（枠線や余白）を指定 */
.love {
	background-color: lightpink;
}

.will {
	background-color: lightgreen;
}

.msg {
	  color: #ffffff;
   display: inline-block;
   	background-color: rgb(24, 18, 131);
}

.mj {
	background-color: rgb(24, 18, 131);
}

.mj2 {
	background-color: rgb(24, 18, 131);
}

/* 3. IDセレクター：特定の1か所（写真）だけに適用 */
/* HTML側を <img id="profile-img" ...> に書き換えて使用 */
#profile-img {
  width: 200px;
  border-radius: 50%; /* 写真を丸くする */
  border: 5px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

h5 {
     font-family: monospace;
      font-size: 2.25vw;
      color: #ffffff;
      border-right: 3px solid #ffffff;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
}

.typewriter {
      font-family: monospace;
      font-size: 2.25vw;
      color: #ff9d00;
      border-right: 3px solid #ffffff;
      white-space: nowrap;
      overflow: hidden;
      width: 0;
      animation: typing 3s steps(25) 1s forwards,
                 blink 0.75s step-end infinite;
    }

    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width: 65%;
      }
    }