:root {
	--base: #1e1e2e;
	--text: #cdd6f4;
	--crust: #11111b;
	--surface0: #313244;
	--subtext0: #a6adc8;
	--subtext1: #bac2de;
	--pink: #f5c2e7;
	--rosewater: #f5e0dc;
	--blue: #89b4fa;
	--mauve: #cba6f7;
	color-scheme: dark;
}

body {
    margin: 0;
	overflow: auto;
    width: 100%;
	height: 100%;
	line-height: 1.5;
	color: #444;
	font-size: 83.3%;
	font-family: Verdana, "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "�l�r �o�S�V�b�N", "MS PGothic", Sans-Serif;
	background: #FFF url(css_tyou008.jpg) repeat-y 250px 0 fixed;
}

div#out {
	height: 100%;
	min-height: 100%;
}

div#header {
	margin-top: 30px;
}

div#main_column {
	padding: 30px 50px 10px 360px;
	color: #E1E1E1;
}

div#about {
    width: 450px;
}

div#meow {
    width: 450px;
    font-size: 12px;
}

div#sidebar {
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	overflow: auto;
	text-align: center;
	background: url(nor_sephiroth001.jpg) no-repeat 50% 90%;
}

div#out > div#sidebar {
	position: fixed;
}

div.write {
	margin: 20px 0 0 15px;
}

div.write ul, div.write ol {
	margin: 0 0 1em 10px;
}

div.write ul li {
	list-style: disc inside;
}

div.write ol li {
	list-style: decimal;
	margin: 0 0 0 20px;
}

div.write ul.parallel {
	margin: 0;
}

ul.parallel li {
	display: inline;
	list-style: none;
}

ul.parallel li img {
	margin:0 2px 3px 0;
}

dl {
	margin: 0 0 1em 0;
}

dt {	}

dd {
	margin: 0 0 5px 15px;
	padding: 0 0 0 10px;
}

dl.parallel dt {
	width: 120px;
	line-height: 1.6;
}

dl.parallel dd {
	margin: -1.6em 0 5px 120px;
	padding: 0 0 0 15px;
}

p.info {
	margin: 0 0 1em 0;
	padding: 2px 10px 0 0;
	height: 80px;
	overflow: auto;
	border: 0;
}

.deco {
	line-height: 22px;
	background: url("line001.gif") left top;
}

.gallery-img {
  width: 500px;
  height: auto;
}

.madoker {
  width: 300px;
  height: auto;
  margin-left: 100px;
}

img.deco {
	padding: 5px;
	border: 1px solid #444;
	background: #000;
}

div#menu {
    margin: 30px 10px;
	color: #E1E1E1;
}

div#menu li {
	display: inline;
	list-style: none;
	padding: 0 5px;
}

div#menu li a {
	padding-left: 5px;
	color: var(--pink);
}

#menu li a:hover {
	color: var(--rosewater);
}

div#footer {
	clear: both;
	text-align: right;
}

div#friends {
    gap: 0px;
}

div#friends2 {
    margin-top: 5px;
}

div#friends3 {
    margin-top: 5px;
}

div#footer li {
	display: inline;
	list-style: none;
	margin-right: 30px;
	font-size: 131%;
	font-family: Georgia, serif;
}

#copy, #copy a {
	color: #BBB;
	font-size: 11px;
	font-family: Arial, Helvetica, Sans-Serif;
}

#entrance {
    margin: 30px 20px 0 360px;
	color: #E1E1E1;
}

#entrance a {text-decoration: none;}

.left-side {
  width: 40%;
  position: relative;
}

.left-side img {
  position: absolute;
  width: 250px;
  left: 15px;
  top: 10px;
}

.popup {
  display: none;
}

div#blog {
  width: 450px;
}

.popup:target {
  display: block;
}

h1 {
    color:#f5c2e7;  
}

.slideshow {
  width: 450px;
}

.gallery-img input[type="radio"] {
  display: none;
}

.slide {
  display: none;
  position: relative;
}

.slide img {
  width: 100%;
  height: auto;
}

#slide1:checked ~ .slides .s1,
#slide2:checked ~ .slides .s2,
#slide3:checked ~ .slides .s3 {
  display: block;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  font-size: 40px;
  cursor: pointer;
  color: white;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

@media (max-width: 700px) {

  body {
    background-position: 0 0;
    background:#11111b;
  }

  div#sidebar {
    display: none;
  }

  div#main_column {
    padding: 20px;
  }

  div#about,
  div#meow,
  div#blog,
  .slideshow {
    width: 100%;
    max-width: 100%;
  }

  .gallery-img {
    width: 100%;
    height: auto;
  }

  .madoker {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-left: 0;
  }

  .left-side {
    display: none;
  }

  .left-side img {
    position: static;
    width: 100%;
    max-width: 250px;
  }

  div#menu {
    margin: 20px 0;
  }

  div#menu ul {
    padding: 0;
  }

  div#menu li {
    padding: 2px 0;
  }

  #entrance {
    margin: 20px;
  }
}