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

h1 {
  color: lightblue;
  border-bottom: 3px solid #3498db;
  display: inline-block;
}

video {
  width: 400px;
}

 .body {
        font-size: 25px;
}

div {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

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


/* 2. クラスセレクター：特定のグループ（枠線や余白）を指定 */
.love {
	background-color: lightpink;
	border: solid 4px  #8ec6ff;
    margin:10px 0;
}

.will {
	background-color: lightgreen;
	
}

.msg {
	background-color: lightyellow;
}

/* 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);
}

.img_wrap img{
  transform: scale(1.0);
  cursor: pointer;
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
.img_wrap img:hover{
  filter: grayscale(0);
  transition-duration: 0.5s;
}