:root,[data-theme="dark"] {
     --bg:#e4abba;
     --bgimg:url('https://files.catbox.moe/yzyg9i.png');
  --layout:url("https://cinni.net/img/site/layoutneopolitan-dark.png");
    --text: #333333;
    --link: #e4abba;
    --accent: #e4abba;
  --filter:brightness(1.8) hue-rotate(40deg);
  --audiofilter:sepia(100%) hue-rotate(295deg) saturate(600%) contrast(60%) brightness(210%);
  --imood:url('https://moods.imood.com/display/uname-cinni/fg-e8a0ae/bg-372c38/imood.gif');
}


[data-theme="light"]{
  --bg: papayawhip;
  --bgimg:url("https://files.catbox.moe/yzyg9i.png");
  --layout:url("https://cinni.net/img/site/layoutneopolitan-light.png");
  --text: #333333;
  --link: #e4abba;
  --accent: #e4abba;
  --filter:brightness(.9) hue-rotate(120deg);
  --audiofilter:sepia(100%) hue-rotate(295deg) saturate(600%) contrast(60%) brightness(210%);
  --imood:url('https://moods.imood.com/display/uname-cinni/fg-a0522d/bg-ffefd5/imood.gif');
}


@font-face{
  font-family: 'basiic';
  src: url(https://cinni.net/fonts/basiic.ttf);
}

@font-face{
    font-family:'tiny';
    src: url(https://cinni.net/fonts/Basiic%20Sans%2012pt.ttf);
}
@font-face{
    font-family:'bold';
    src: url(https://cinni.net/fonts/Basiic%20Sans%2018pt.ttf);
}
@font-face{
    font-family:'title';
    src: url(https://cinni.net/fonts/Basiic%20Style%20Sans.ttf);
}


*{
  box-sizing: border-box;
  cursor: url('https://cinni.net/img/site/cur-pointer.png'), pointer;
}

::selection{
  background:var(--accent);
}

body{
  color:var(--text);
  scrollbar-color: #e4abba #e4abba;
  scrollbar-width: thin;
  font-family:'tiny','ＭＳ Ｐゴシック', verdana, sans-serif;
  font-size:1rem;
  padding:0;
  padding-left:25px;
  max-width:800px;
  margin:auto;
  cursor: url('https://cinni.net/img/site/cur-pointer.png'), pointer;
}

.index{
  background:var(--bg);
  background-image:var(--bgimg);
  padding:0;
  margin:0;
  margin-top:50px;
  max-width:100%;
}

a{
  color:var(--link);
  font-weight:bold;
  text-decoration:none;
}
a,button,a img, a span{
	  cursor: url('https://cinni.net/img/site/cur-grab.png'), grab;
}


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

audio{
  background:white;
  filter:var(--audiofilter);
  height:20px;
  border-radius:15px;
  margin-left:20px;
  margin-top:20px;
}

.filter{
    filter:var(--filter);
}
p{
  margin:5px 15px;
}

h1,h2,h3,h4,h5,h6{
  font-size:1.2rem;
  font-family:'title';
  letter-spacing:1px;
}
h1{
  text-align:center;
  padding:10px;
  font-size:1.4rem;
}

h1:before{
 content:url('https://cinni.net/images/icon/wing_r.png');
 padding-right:5px;
 filter:var(--filter);
}
h1:after{
 content:url('https://cinni.net/images/icon/wing_l.png');
 padding-left:5px;
  filter:var(--filter);
}

h2{
margin:10px;
  border-bottom:1px solid;
  background:var(--bg);
font-size:1.3rem;
}

h2:before{
content: ' ✿ ';
padding:0 5px;
}

nav h2{
  text-align:center;
  padding:0;
  margin:0;
  background-image:url('https://cinni.net/img/site/pink-star-checker-inv.png');
}

nav h2:nth-child(3),nav h2:nth-child(5){
  border-top:1px solid;
}

nav h2:before{
  content:none;
}

h3:before{
content:' ☆  ';
}
h3{
  padding-left:10px;
}

h3{
margin:0;
padding:2px 5px;
border-bottom:1px solid var(--link); 
color:sienna;
}

h3:before{
	content:url('https://cinni.net/images/adopt/lilstar.png');
	padding:0 5px 0 0;
}

.pink{
	background:#ffbfbf;
}
.orange{
	background:#ffd7ae;
}
.yellow{
	background:#fff2a5;
}
.green{
	background:#e6ff7b;
}
.blue{
	background:#ebfced;
}
.purple{
	background:#dcccff;
}


button{
font-family:'basiic';
  font-size:1rem;
padding: 0 2px;
margin: 0;
background: var(--bg);
color: var(--text);
border: 1px solid;
}
button:hover{
    cursor:pointer;
}
ul{
  list-style-type: "✿ ";
}

nav ul{
  margin:2px;
  padding:0;
}


.imood{
  content:var(--imood);
}


ul li:nth-child(1), ul li:nth-child(6), ul li:nth-child(11), ul li:nth-child(1), ul li:nth-child(6), ul li:nth-child(11), ul li:nth-child(16) {
  list-style-image: url('https://cinni.net/images/tinystar-blue.png');
}
ul li:nth-child(2), ul li:nth-child(7), ul li:nth-child(12), ul li:nth-child(2), ul li:nth-child(7), ul li:nth-child(12), ul li:nth-child(17) {
  list-style-image: url('https://cinni.net/images/tinystar-green.png');
}
ul li:nth-child(3), ul li:nth-child(8), ul li:nth-child(13), ul li:nth-child(3), ul li:nth-child(8), ul li:nth-child(13), ul li:nth-child(18) {
  list-style-image: url('https://cinni.net/images/tinystar-orange.png');
}
ul li:nth-child(4), ul li:nth-child(9), ul li:nth-child(14), ul li:nth-child(4), ul li:nth-child(9), ul li:nth-child(14), ul li:nth-child(19) {
  list-style-image: url('https://cinni.net/images/tinystar-pink.png');
}
ul li:nth-child(5), ul li:nth-child(10), ul li:nth-child(15), ul li:nth-child(5), ul li:nth-child(10), ul li:nth-child(15), ul li:nth-child(20) {
  list-style-image: url('https://cinni.net/images/tinystar-purple.png');
}

.index ul, .index ul li{
  list-style:none;
}
.index ul li{
  background:var(--bg);
  border-bottom:1px dotted var(--link);
}

.index ul li:nth-child(odd):hover{
  background-repeat:no-repeat;
  background-position:right;
  background-image:url('https://cinni.net/img/site/tiny-strawb.png');
}
.index ul li:nth-child(even):hover{
  background-repeat:no-repeat;
  background-position:right;
  background-image:url('https://cinni.net/img/site/tiny-clover.png');
}




.header,.marquee,.clock,.potd,.stats,.side,iframe,nav{
  position:relative;
}

.layout{
  background:var(--layout);
  background-repeat:no-repeat;
  width:1125px;
  height:740px;
  margin:10px auto;
  overflow:hidden;
}
.header{
  top:50px;
  left:137px;
  padding:40px 450px;
}

.marquee{
  width: 596px;
  top: 87px;
  left: 245px;
}

.potd{
  top:168px;
  left:110px;
  width:135px;
  height:135px;
  padding:7px;
}
.stats{
  top:212px;
  left:110px;
  width:135px;
  height:100px;
  padding:10px 5px;
}
.side{
  top:240px;
  left:110px;
  width:135px;
  height:185px;
  padding:10px;
}
.side img{
  margin:1px;
}
#mainframe{
  top:-318px;
  left:255px;
}

nav{
top: -834px;
left: 837px;
width: 159px;
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
background: #d6ecf3;
}

::-webkit-scrollbar-track {
   background: #e4abba;
border-radius: 0px;
width: 0px;
border: 1px dotted #8f38ff;
}
::-webkit-scrollbar-thumb {
background: #f7e5ea;
border: 1px dotted #8f38ff;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #8f38ff;  
cursor:url(/emoticon/cursor_default.png), auto;
}

.column {
  float: left;
  width: 50%;
  column-rule: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


#o_5665914{
  background:none;
}

.header:hover{
    background:none;
}

#current{
  font-size:.9rem!important;
  padding: 0;
  margin:0;
  margin-top:3px;
  font-weight:bold;
}
      .weatherIcon{
        margin:0;
        vertical-align:bottom;
        filter:var(--filter);
      }
      
.flex{
	display:flex;
	flex-wrap:wrap;
	border:none;
	padding:0;
	margin:0;
}
.flex li{
	margin:0 auto;
	list-style:none;
	text-align:center;
}



.stat{
    background-image:url('https://files.catbox.moe/dt44yk.png');
  
  padding:0;
  max-width:500px;
  margin:10px auto;
  border:10px solid;
  border-image:url(https://files.catbox.moe/7mr3u0.png) 10 round;
}
.stat:before{
  display:block;
  position:relative;
  margin-top:-15px;
  z-index:2;
  text-align:center;
  content: url('https://files.catbox.moe/rs643p.png');
}
.stat p{
  margin:0;
  padding:5px;
}
.stat a{
	background:var(--bg);
}

.fancy-border{
  background:var(--bg);
  margin:10px auto;
  margin-bottom:0;
  padding:1px;
  border:1px solid var(--accent);
    border:10px solid;
  border-image:url(https://files.catbox.moe/7mr3u0.png) 10 round;
}


figure{
	height: fit-content;
	padding:0;
	margin:0;
	border:10px solid;
	border-image:url(https://files.catbox.moe/7mr3u0.png) 10 round;
}

figcaption{
	background-image:url('https://files.catbox.moe/dt44yk.png');
	font-weight:bold;
	border-bottom:1px dashed;
	padding:5px;
	font-family:'title';
	letter-spacing:2px;
}

figure ul{
	margin:0;
	padding:0 0 0 20px;
}
figure ul li{
	border-left:1px solid;
	padding:0;
	font-variant: small-caps;
	padding-left:5px;
	min-width:100px;
	border-bottom:1px dashed;
	list-style:'x ';
}


#lastfm{
  height:20px;
  width:100%;
  padding:0;
  background:var(--bg);
  color:var(--text);
  text-align:left;
}




 @media screen and (max-aspect-ratio:16/9) {

.stat{
     margin:10px;
   }
}