/*　覗くな危険　*/

@charset "utf-8";

/*
滲み出す混濁の紋章
不遜なる狂気の器
湧き上がり・否定し・痺れ・瞬き・眠りを妨げる
爬行する鉄の王女
絶えず自壊する泥の人形
結合せよ 反発せよ
地に満ち己の無力を知れ
破道の九十・黒棺
*/

@import url("https://use.fontawesome.com/releases/v7.1.0/css/all.css");
@import url(https://fonts.googleapis.com/icon?family=Material+Icons+Outlined);
@import url(https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined);
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=family_home&display=block);

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Kaisei+Decol&family=UnifrakturMaguntia&family=Zen+Maru+Gothic&display=swap");


* {
  margin: 0;
  padding: 0; 
  border: none;
  color: var(--main-color);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 9px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

body {
  padding: 1em 0;
  border: none;
  background-color: #eee;
  color: var(--main-color);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 9px;
  line-height: 1.6;
}
:root {
--rou-color: #5A5FAA; 
--main-color: #65658c;
--sub-color: #C7c3d2;
}

hr {
  border: none;
}
#container {
  color: transparent;
}
a{
  color: var(--main-color) !important;
  text-decoration: none;
}
a:visited {
  color: var(--main-color);
}
blur {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
p {
  color: transparent;
}
span {
  color: var(--main-color);
}


.main {
  margin: 1em auto;
  padding: 1em;
  position: relative;
  display : flex;
  width: 350px;
  height: 200px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main .decoration_01 {
   z-index: 1;
}
.main .decoration_01::before {
  margin: 0 auto;
  position: absolute;
  content: "♰";
  top: 35px;
  left: 154px;
  color: var(--sub-color); 
  font-size: 100px;
}
.main .decoration_01::after {
  margin: 0 auto;
  position: absolute;
  content: "Koyanagi Rou";
  top: 20px;
  left: 30px;
  font-size: 20px;
  color: var(--main-color); 
  font-family: "UnifrakturMaguntia", cursive;
}
.main .decoration_02 {
  margin: 0 auto;
  padding: 1.5em;
  position: absolute;
  width: 200px;
  bottom: -5px;
  left: 75px;
  align-items: center;
  font-size: 10px;
  color: var(--main-color);
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0.05em;
  text-align: center;
}
.main .decoration_02 a{
  font-size: 20px;
  color: var(--sub-color) !important;
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}

.main .round {
  margin: 0 auto;
  padding: 0;
  position: absolute;
  width: 100px;
  height: 150px;
  border-radius: 50px 50px 0 0;
  background-color: #65658c;
  color: var(--sub-color);
  letter-spacing: 0.01em;
  text-align: center;
}
.main .round::before {
  position: absolute;
  display: flex;
  content: "✦✦✦";
  left: -30px;
  top: 20px;
  color: var(--main-color);
  font-size: 15px;
  transform: rotate(90deg);
  flex-direction: column;
}
.main .round::after {
  position:absolute;
  display: flex;
  content:"✦✧✦"; 
  right:-30px;
  bottom: 10px;
  color: var(--main-color);
  font-size:20px;
  transform:rotate(90deg); 
  flex-direction: column;
}
.main .wawa {
  width: 150px;
  height: 50px;
  position: absolute;
  top: 100px;
  border-radius: 50%;
  border-bottom: 1px solid var(--sub-color);
  border-left: 1px solid var(--sub-color);
  border-right: 1px solid var(--sub-color);
  transform:rotate(-20deg);
}


.contents {
  margin: 0 auto;
  padding: 0.5em;
  position: relative;
  display : flex;
  width: 350px;
  justify-content: left;
}

ul.cp_list {
  padding: 3px;
  min-width : 110px;
  list-style-type: none;
}
ul.cp_list li {
  padding: 5px;
  display: flex;
  border-top: 1px solid var(--main-color);
}
ul.cp_list li:last-of-type {
  border-bottom: 1px solid var(--main-color);
}
.contents p {
  color: var(--main-color);
}
p a {
  color: var(--main-color);
}

.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.stars span {
  position: relative;
}
.stars span::before {
  position: absolute;
  content: "";
  color: var(--sub-color);
  font-size: 10px;
}

.stars span:nth-child(1){left:10%; top:1%; animation: star-anim 8s 0s infinite;}
.stars span:nth-child(2){left:5%; top:10%; animation: star-anim 6s 1s infinite;}
.stars span:nth-child(3){left:80%; top:30%; animation: star-anim 5s 2s infinite;}
.stars span:nth-child(4){left:25%; top:60%; animation: star-anim 7s 3s infinite;}
.stars span:nth-child(5){left:85%; top:70%; animation: star-anim 7s 4s infinite;}
.stars span:nth-child(n+1):nth-child(-n+5)::before{content: "・";}

.stars span:nth-child(6){left:35%; top:15%; animation: star-anim 4s 0s infinite;}
.stars span:nth-child(7){left:15%; top:25%; animation: star-anim 7s 1s infinite;}
.stars span:nth-child(8){left:25%; top:45%; animation: star-anim 8s 2s infinite;}
.stars span:nth-child(9){left:95%; top:70%; animation: star-anim 5s 3s infinite;}
.stars span:nth-child(10){left:75%; top:35%; animation: star-anim 7s 5s infinite;}
.stars span:nth-child(n+6):nth-child(-n+10)::before{content: "✦";}

.stars span:nth-child(11){left:90%; top:1%; animation: star-anim 5s 0s infinite;}
.stars span:nth-child(12){left:5%; top:65%; animation: star-anim 6s 1s infinite;}
.stars span:nth-child(13){left:25%; top:10%; animation: star-anim 7s 2s infinite;}
.stars span:nth-child(14){left:60%; top:5%; animation: star-anim 8s 3s infinite;}
.stars span:nth-child(15){left:20%; top:60%; animation: star-anim 7s 4s infinite;}
.stars span:nth-child(n+11):nth-child(-n+15)::before{content: "𖥔"}


@keyframes star-anim {
  0% {opacity:0;}
  5% {opacity:1;}
  10% {opacity:0;}
  55% {opacity:0;}
  60% {opacity:1;}
  95% {opacity:0;}
  100% {opacity:1;}
}



[class*='warp__'] {
  position: absolute;
  display: block;
  top: 20px;
  left: -50px;
  color: var(--sub-color);
  text-shadow: 0 0 5px #fff, 0 0 10px var(--sub-color), 0 0 15px var(--sub-color), 0 0 20px var(--main-color);
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
}

.warp__0 {
  transform-origin: 50% 7px;
  transform: translate(104.5214px,13.5015px) rotate(0.032825rad);
}
.warp__1 {
  transform-origin: 50% 7px;
  transform: translate(113.5139px,13.948599999999999px) rotate(0.067991rad);
}
.warp__2 {
  transform-origin: 50% 7px;
  transform: translate(122.5708px,14.7744px) rotate(0.11722rad);
}
.warp__3 {
  transform-origin: 50% 7px;
  transform: translate(131.5243px,16.1713px) rotate(0.202192rad);
}
.warp__4 {
  transform-origin: 50% 7px;
  transform: translate(140.1843px,18.8365px) rotate(0.461064rad);
}
.warp__5 {
  transform-origin: 50% 7px;
  transform: translate(148.4055px,22.9617px) rotate(0.252691rad);
}
.warp__6 {
  transform-origin: 50% 7px;
  transform: translate(157.4661px,24.4511px) rotate(0.100197rad);
}
.warp__7 {
  transform-origin: 50% 7px;
  transform: translate(166.6431px,25.031999999999996px)  rotate(0.032709rad);
}
.warp__8 {
  transform-origin: 50% 7px;
  transform: translate(175.7687px,25.1271px)  rotate(-0.009333rad);
}
.warp__9 {
   transform-origin: 50% 7px;
  transform: translate(184.9505px,24.8915px) rotate(-0.040745rad);
}
.warp__10 {
  transform-origin: 50% 7px;
  transform: translate(194.2552px,24.3867px) rotate(-0.066993rad);
}


a[href*="/thread-setting"] {
  padding: 0;
  font-size: 0;
}
a[href*="/thread-setting"]::before {
  padding: 3px;
  content: "\e897";
  color: var(--main-color) ;
  font-family: "Material Icons Outlined";
  font-size: 12px;
  font-weight: 100;
}

a[href*="/edit?"] {
  font-size: 0;
}
a[href*="/edit?"]::before {
  padding: 3px;
  content: "\e746";
  color: var(--main-color) ;
  font-family: "Material Icons Outlined";
  font-size: 12px;
  font-weight: 100;
}

a[href*="https://nanos.jp/starry0eyed/"] {
  font-size: 0;
}
a[href*="https://nanos.jp/starry0eyed/"]::before{
  padding: 3px;
  content: '\e166';
  color: var(--main-color) ;
  font-family: "Material Icons Outlined";
  font-size: 12px;
  font-weight: 100;
}

a[href*="/delete?"] {
  padding: 0;
  font-size: 0;
}
a[href*="/delete?"]::before {
  padding: 3px;
  content: "\e92b";
  color: var(--main-color) ;
  font-family: "Material Icons Outlined";
  font-size: 12px;
  font-weight: 100;
}