/*
Theme Name: Nororal
Author: Kadota Meia
Author URI: https://nororal.com/
Version: 1.1
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
 --font-main-color: rgb(77, 73, 70);
 --font-main-color--inactive: rgba(41,39,37,0.3);
 --font-link-color: rgb(160,177,126);
 --font-link-color--hover:rgb(125, 138, 100);

 --bg-color: #fff;
 --sub-color: rgb(238,238,238);
 --accent-color: rgb(202,202,202);
 --accent-color-black: rgb(77, 73, 70);
}
/* ==============================================
   （１）基本事項
============================================== */
html{
 font-family: 'Noto Sans JP', sans-serif;
 font-size:16px;
 overflow-x:hidden;
 color: var(--font-main-color);
 background: var(--sub-color);
}
a:hover{
  cursor: pointer;
  filter: blur(1px);
  transition-duration: 0.1s;
  transition-property: filter;
}
.text-link{ 
  color: var(--font-link-color);
  border-bottom: 1px var(--font-link-color) dashed;
}
.text-link:hover{
  color: var(--font-link-color--hover);
  border-bottom: 1px var(--font-link-color--hover) solid;
}
i{ font-style: italic;}

/* ==============================================
   （２）汎用カテゴリ
============================================== */
#container{
  width:100vw;
  margin:0 auto;
}
#wrapper{
  width: 95vw;
  max-width: 720px;
  margin: 32px auto;
  background: white;
  padding: 16px 32px;
  border-radius: 10px;
}
@media screen and (max-width: 844px) and (orientation: portrait) {
  #wrapper{
    max-width: 95vw;
    padding: 16px;
  }
}

#author{ margin:40px auto 40px; }
#author #profile-icon{
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: 1px var(--accent-color-black) solid;
}
h1{
  margin: 20px auto;
  text-align: center;
  letter-spacing: 0.15em;
}
h1>span{ display: block; }
h1>span.jp{
  font-weight: bold;
  font-size:125%;
}
h1>span.en{font-size:100%;}

.content{ margin:0 auto 40px; }
h2{
  font-weight: bold;
  border-bottom: 1px var(--accent-color-black) solid;
}
h2>span{ display: inline-block; }
h2>span.en::before{
  content: "/";
  margin: 0 16px;
}
.text p{ margin: 16px 0; }
img.screenshot{ margin: 16px auto 0; }

.link-list>.item{ padding: 8px 4px; }
.link-list>.item:not(:last-child) {
  border-bottom: 1px var(--sub-color) solid;
}
.link-list>.item div.header, .link-list>.item div.desc{ margin: 4px auto; }
.link-list>.item .header .header-text{ 
  color: var(--font-link-color);
  border-bottom: 1px var(--font-link-color) dashed;
}
.link-list>.item .header .en::before{
  content: "/";
  margin: 0 8px;
}
.link-list>.item .header .en, .link-list>.item .header .ja{ display: inline-block; }
.link-list>.item .desc{ font-size: 90%; }
.link-list>.item .desc > span{ display: inline-block; }