/* CSS for Blog Posts */

body {
	background-color: #9b619d;
	font-family:"Noto Sans JP";
	font-size:22px;
	line-height:1.3em;
	color:#fff;
	text-align:left;
}

.frame {
	width:80%;
	max-width:900px;
	min-width:900px;
	margin:auto;
	margin-top:100px;
	margin-bottom:400px;
	border-style: solid;
	border-width: 12px;
	border-color: #7d497f;
	border-radius: 24px;
}

.content {
	padding: 30px;		
/* 	hyphens:auto;
	hyphenate-limit-chars: 6 3 2; */
}


.post-header {
	width:100%;
	display:table;
	margin-bottom:20px;
}

.post-title {
	display: table-cell;
	color: #67f5ff;
	font-weight:600;
	font-size:32px;
	line-height:38px;
	float:left;
}

.post-date {
	display: table-cell;
	text-align:right;
	font-size:22px;
	color: #f7c5fa;
	float:right;
	margin-top:7px;
}



.emoji {
	font-size:26px;
	line-height:1em;
}


a { 
	color: #ffe404;
	text-decoration:none;
}

.pink {
	color: #f7c5fa;
}

.cream {
	color: #f7baba;
}

.blue {
	color: #67f5ff;
}

.yellow {
	color: #ffe404;
}

.red {
	color: #f8a489;
}

.link-box {
	font-family:"Press Start 2P";
	font-size:18px;
	word-spacing:-4px;
	line-height:34px;
	text-align:left;
	margin-left:-80px;
	padding:18px 10px 0px 24px;
	width: 360px;
	height: 50px;
	background-color:#9b619d;
	border-style: solid;
	border-width: 12px;
	border-color: #7d497f;
	border-radius: 24px;
	display:block;
	float:left;
}

.utena {
	width:840px;
	height:581px;
	margin: 40px 0 40px 0px;
	display: grid;
    grid-template-columns: 1fr;
}

.utena div {
	grid-row-start: 1;
	grid-column-start: 1;
}

.utena-picture img {
	width:780px;
	height: 518px;
	margin:30px;
	object-fit:cover;
}

.utena-frame {
	z-index:1;
	pointer-events: none;
}

.utena-frame img {
	width:840px;
	height:581px;
}

.utena-rose1 {
	width:160px;
	height:160px;
	animation: rotation 6s infinite linear;
	margin:-25px 0 0 -30px;
	pointer-events: none;
	z-index:2;
}

.utena-rose2 {
	width:160px;
	height:160px;
	animation: rotation 6s infinite linear;
	margin:-25px 0 0 710px;
	pointer-events: none;
	z-index:2;
}

.utena-rose3 {
	width:160px;
	height:160px;
	animation: rotation 6s infinite linear;
	margin:450px 0 0 -30px;
	pointer-events: none;
	z-index:2;
}

.utena-rose4 {
	width:160px;
	height:160px;
	animation: rotation 6s infinite linear;
	margin:450px 0 0 710px;
	pointer-events: none;
	z-index:2;
}

.utena-rose1 img, .utena-rose2 img, .utena-rose3 img, .utena-rose4 img {
	width:160px;
	height:160px;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}