:root{
--text:#828282;
--bg:#fff;
--link:#7cceff;
--selection:#e2f8fc;
--accent:#7cceff;
--gradient:radial-gradient(ellipse, rgba(194,240,255,.8) 0%, rgba(255,255,255,0) 81%);
--gradient2:radial-gradient(ellipse, rgba(194,240,255,.8) 25%,rgba(233,210,255,.5) 55%, rgba(255,255,255,0) 80%);
--filter:hue-rotate(-40deg) brightness(1.9) saturate(.8);
--bullet:url("/x/img/icon/bullet.png");
--bullet2:url("/x/img/icon/bulletb.png");
--bgimg:url("https://files.catbox.moe/stecym.png");
--bgimg:url("http://www.cute.illust-ya.com/gazou01/kumo01_kabe_yoko.gif");
--bgimg:url("https://files.catbox.moe/ylufo1.gif");
--bgimg:url("https://files.catbox.moe/t0l1cy.png");
--div:url("https://files.catbox.moe/aqvq3a.gif");
}

[data-theme="dark"]{
--text:#d3bfe1;
--bg:#1b181f;
--link:#ca74ff;
--selection:#423957;
--accent:#ca74ff;
--gradient:radial-gradient(ellipse, rgba(103,29,175,1) 0%, rgba(255,255,255,0) 81%);
--gradient2:radial-gradient(ellipse, rgba(103,29,175,1) 20%, rgba(255,255,255,0) 81%);
--filter:none;
--bullet:url("/x/img/icon/bulleta.png");
--bullet2:url("/x/img/icon/bulleta.png");
--bgimg:none;
--div:url("https://files.catbox.moe/c6h7wi.png");
--bgimg:url("https://cinni.net/images/web/bg/cloudsky-darker.png");
}


*{
	margin:0;
	padding:0;
	font-size:.8rem;
	box-sizing: border-box;
}
@font-face{
font-family: 'emoji';
src: url(https://cinni.net/fonts/EmojiFont.ttf);
}
@font-face{
font-family: 'basiic';
src: url(https://cinni.net/fonts/basiic.ttf);
}
@font-face{
	font-family: 'globules';
	src: url(https://cinni.net/fonts/Globules-Regular.ttf);
}
@font-face{
	font-family:'pixa';
	src: url(https://cinni.net/fonts/Pixa.otf);
}
@font-face{
	font-family:'berrie';
	src:url(https://cinni.net/fonts/Berrie.otf);
}

body{
	color:var(--text);
	background:var(--bg);
	font-family:Verdana;
	padding:20px;
	margin:0 auto;
	max-width:800px;
	background-image:var(--bgimg);
	background-repeat:repeat-y;
}
::selection{
	background:var(--selection);
	color:var(--accent);
}
a{
	color:var(--link);
}
a:hover{
background:var(--gradient);
}
img{
	max-width:100%;
}

hr{
	border:none;
	border-bottom:1px dotted var(--text);
}

button{
	font-family:Verdana;
	font-size:.9rem;
	text-decoration:underline;
	color:var(--link);
	background:none;
	border:none;
	padding: 5px 0px;
}
button:hover{
	cursor:pointer;
	background:var(--gradient);
}



ul{
	list-style-position:inside;
	list-style-type: "✿";
	margin:0 15px;
	border-left:1px dotted;
	padding:0 5px;
}
li{
	padding:2px;
}
li a{
	padding:5px;
}

h1,h2,h3,h4,h5,h6{
	font-size:.9rem;
}
h1,h2,h3,h4,h5,h6,p{
	padding:5px;
}
h1{
	text-transform:uppercase;
}
h2{
padding:2px;
margin:3px 0;
border-bottom:1px dotted;
}
h2:before{
content:'✎ ';
}

header{
	border-bottom:1px dotted;
}
header h1 a{
	font-size:2.5rem;
	padding:10px;
	text-decoration:none;
	color:var(--text);
	opacity:.5;
	text-transform:lowercase;
		font-family: 'pixa';
}
header h1 a:hover{
	background:var(--gradient2);
}
header span{
font-size: 5rem;
font-family: 'berrie';
letter-spacing: -11px;
line-height: 0px;
}

main{
	display:flex;
}
section{
	padding:5px;
	width:100%;
}
nav{
	padding:5px;
	width:200px;
}
  

nav ul{
	list-style-type: "V";
	font-family: 'emoji';
	list-style-image:var(--bullet2);
	border:none;
}
nav li{
padding:2px;
}
nav li a{
	font-family: verdana;
	padding:5px 0;
	font-size:.85rem;
}

footer img{
	padding-left:100px;
	content:var(--div);
	filter:none;
	border:none;
	box-shadow:none;
	height:38px;
}
footer pre{
	font-size:.7rem;
	padding-left:125px;
}



.flex{
	display:flex;
	flex-wrap:wrap;
	border:none;
}
.flex li{
	padding:15px;
	margin:0 auto;
	list-style:none;
	text-align:center;
}
.flex img{
filter:var(--filter);
}
.flex li a:hover{
background:none;
}
.flex li a span:hover{
background:var(--gradient);
}
	 .notflex{
	display:flex;
	}
	.aboutimg{
		width:200px;
		float:left;
		padding:10px;
		filter:var(--filter);
	}
	
.clicker {
outline:none;
cursor:pointer;
}

.hiddendiv{
display:none;
}

.clicker:focus + .hiddendiv{
display:block;
}

.clicker h1:before{
content:'➜ ';
}



/*MOBILE STYLING*/
  @media screen and (max-aspect-ratio:16/9) {
	  body{
		  font-size:1rem;
		  background-image:none;
	  }
	  main{
		  display:block;
	  }
	  nav{
		  width:100%;
	  }
	  
	  nav:before{
		  content:var(--div);
		  width:380px;
		  margin:0 -10px;
		  
	  }
	  
	  
	  nav ul{
		  display:flex;
		  flex-wrap:wrap;
		  padding:0;
		  margin:0;
	  }
	  nav ul li{
		  padding:10px;
	  }
	  nav ul{
	list-style-image:var(--bullet);
	}

footer img{
	padding-left:0;
	/*display:none;*/
}
footer pre{
	padding-left:0;
}

	 .notflex{
	display:block;
	}
	.aboutimg{
		float:none;
	}
	header span{
		font-size:2rem;
		display:none;
		padding:5px 0;
	}
	header{
		padding:0;
	}
	header h1 a{
		font-size:2.3rem;
	}
  }