/*
body{
  background-image: url("https://cinni.net/directory/img/bg-01.png");
  color:#d97934;
        font-family: 'basiic';
  font-size:14px;
}

::selection{
  background:rgb(255, 243, 245);
}

textarea {
  outline: none;
}

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

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

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

@font-face{
      font-family: 'emoji';
  src: url("https://cinni.net/directory/EmojiFont.ttf");
    }
.emoji{
        font-family: 'emoji';
}

a{
  text-decoration:none;
  color:#ff84c9;
  font-weight:Bold;
  padding:0 1px; 
  border-radius:2px;
}

a:hover{
      background:#ffe2fd;
}

hr{
  margin:1px 0;
  border-top:none;
  border-bottom:1px solid #db9e7d;
}

h1{
  font-size:.6em;
  text-transform:uppercase;
  letter-spacing:2px;
  background:#fff3f5;
  border-radius:2px;
  border-bottom:1px solid;
  border-right:1px solid;
  border-top:1px dotted;
  border-left:1px dotted;
  padding:2px;
  margin:0;
  font-family: 'title';
}

h2{
  font-size:.6em;
  text-transform:uppercase;
  letter-spacing:2px;
  border-radius:2px;
  border-bottom:1px dotted;
  padding:4px;
  margin:0;
        font-family: 'title';
}

ul{
 list-style-image: url('https://cinni.net/fruitykitty/cyworld/pinkarrow.png');
  margin:0;
}


.container{
  margin:20px auto;
  width:60%;
  max-width:100%;
  border-image: url(https://cinni.net/games/pixel-border-pink.png) 6 stretch;
border-style: solid;
  border-width:6px;
  padding:0;
  background:#db9e7d;
}

header, nav, main, footer {
  border:1px solid #db9e7d;
  border-radius:2px;
  margin:0;
}
header, nav, footer {
  max-width:100%;
}

header, footer{
    background:#fedae0;
}

footer{
  height:15px;
  padding:3px 0;
}

footer span{
    text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
}

header{
  max-height:35px;
  height:30px;
  background: linear-gradient(180deg, rgba(254,218,224,1) 0%, rgba(255,243,245,1) 100%);
  border-bottom:none;
}
header section{
  font-size:14px;
  padding:7px;
  padding-left:10px;
  font-family: 'bangalore';
}

nav{
  background:#fffdf6;
  border-top:1px dotted;
}
.nav{
  display:flex;
  padding:2px;
}
.news{
margin-right:5px;
 margin-top:5px;
  margin-left:5px;
}
.search{
   margin-left: auto; 
margin-right: 8px;
margin-top:5px;
}

input[type = submit] {
            background-color:#fff3f5;
            border: 1px solid;
            text-decoration: none;
            color: #db9e7d;
            cursor: pointer;
            padding:1px 3px;
            font-family: 'basiic';
         }
input[type = text] {
            background-color:#fff3f5;
            border: 1px solid;
            text-decoration: none;
            color: #db9e7d;
            padding:1px 3px;
            font-family: 'basiic';
  outline: none;
         }
input{
  color:#db9e7d;
  border: 1px solid;
    border-radius:2px;
}

.icon{
  padding-top:2px;
  margin-right: 5px;
}

.icon img{
    border:1px solid;
  border-radius:2px;
  padding-left:3px;
  padding:3px;
  width:16px;
  height:16px;
}

aside{
    width:250px;
    background:#fff3f5;
  border:1px solid #db9e7d;
  border-radius:2px;
}
.title{
  border-bottom:1px solid #db9e7d;
  padding:2px 5px;
  background:#eab395;
  text-transform:lowercase;
  letter-spacing:0;
    margin:1px 0;
    font-size:12px;
  font-family: 'bangalore';
    color:white;
    text-shadow:0 0 2px brown;
}

.button{
  padding:2px;
}

/*every other cell changes color*/
/*
.cell{
  background-color: #fff3f5;
  border-bottom:1px solid;
  padding:2px 5px;
  margin:0 auto;
}

.cell:nth-child(even){
    background-color: white;
}

li{
    background-color: #fff3f5;
  border-bottom:1px solid;
  padding:1px;

}

li:nth-child(odd){
    background-color: white;
}

main{
  width:100%;
  background:#fff;
}
main section{
  padding:10px;
    font-size:15px;
}

.flex {
display:flex;
}

.flex2 {
display:block;
}
.links{
  width:100%;
}


/*LINK DISPLAY*/
/*
.article-container{
    border:1px solid;
    width:80%;
    margin:20px auto;
    border-radius:2px;
}
.article-title{
    text-transform:uppercase;
    font-weight:bold;
    background:#fff3f5;
    border-bottom: 1px solid;
    padding:4px;
    padding-left:10px;
    letter-spacing:2px;
    font-size:10px;
    font-family: 'title';
    margin: 0 auto;
    text-align: center;
}
.article-info{
    display:flex;
}
.article-button{
    margin:4px;
    width:88px;
    padding:5px;
}
.article-desc{
    width:100%;
padding:4px;
}
.article-desc hr{
    border-bottom:1px dotted pink;
    border-top:none;
    margin:2px;
}

.article-stats{
    display:flex;
        font-size:10px;
    font-weight:bold;
    letter-spacing:2px;
    font-family: 'title';
}
.article-tag{
    width:75%;
    font-size:.8em;
    text-transform: uppercase;
}
.tag{
    display:inline;
}
.tag-name{
    background-image:url("https://archive.cinni.net/directory/img/tag-blank.png");
    background-size:100% 100%;
    width:66px;
    display:inline-block;
    letter-spacing:0;
    font-size:1.5em;
    padding:1px;
    padding-left:3px;
    margin:2px;
    text-transform: lowercase;
    font-weight:normal;
        font-family: 'basiic';
}

.article-date{
    padding:4px;
    float:right;
    text-transform:uppercase;
    font-size:8px;
    font-weight:bold;
    letter-spacing:1px;
    font-family: 'title';
}

.updates{
    display:flex;
}
.speechbubble{
    border-image: url(https://archive.cinni.net/directory/img/bubble-border.png) 15 stretch;
border-style: solid;
  border-width:15px;
  width:70%;
  padding:0 30px;
  display:inline-block;
}




@media screen and (max-aspect-ratio:16/9) {
  .container{
    width:97%;
  }
  .flex{
        display:block;
        width:100%;
    }
    
  .flex2 {
display:flex;
}
  .links{
    border-right:1px solid;
  }
  
  nav,header, aside, main, footer{
    width:100%;
  }
  
  .article-container{
    width:90%;
}
.article-tag{
    width:100%;
}
}
*/




:root{
  --bgimg:url('https://cinni.net/images/web/bg/pink-checkered-bg.png');
  --bgcolor:white;
  --bgaccent:#ffedf9;
  --text:#95452d;
  --accent:#ff75f6;
  --lightaccent:#fff9fe;
  --header:#ff7bea;
  --hover:red;
  --selection:#ffdbf4;
}

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

* {
  box-sizing: border-box;
}
body {
  max-width:900px;
  margin:0 auto;
  padding:20px 10px;
  /*font-family:verdana;*/
  letter-spacing:0.5px;
  font-size:.9rem;
  background-image:var(--bgimg);
  color:var(--text);
   font-family: 'basiic';
}
  ::selection {
    background:var(--selection);
}
a{
  color:var(--accent);
}
a:hover{
  color:var(--hover);
}
b{
  color:var(--accent);
}
i{
  color:var(--accent);
}
h1,h2,h3{
  padding:0;
  margin:0;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--header);
  font-family: 'title';
}
.banner img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
header{
  border-top-right-radius:3px;
  border-top-left-radius:3px;
    background-color:var(--selection);
  background-image:var(--bgimg);
  background-size:15px;
/*background: linear-gradient(180deg, rgba(255,237,249,1) 25%, rgba(255,165,249,1) 100%);*/
}
header h1{
  padding:3px;
    background:var(--bgaccent);
}
header h2{
  border-top:1px solid;
  padding:3px; background:var(--lightaccent);
  font-family:'basiic';
  font-style:italic;
  text-transform:lowercase;
  font-weight:normal;
}
footer{
    background:var(--bgaccent);
  padding:3px;
  text-align:center;
  border-bottom-right-radius:3px;
  border-bottom-left-radius:3px;
}
header,main,footer{
  border:1px solid;
}
main{
  display:flex;
  border-top:none;
  border-bottom:none;
  background:var(--bgcolor);
}
nav{
  display:block;
  width:200px;
  border-right:1px solid;
  color:var(--accent);
  background-color:var(--bgaccent);
  background-image:var(--bgimg);
  background-size:25%;
}
nav h1{
  padding:5px 0px;
  text-transform:uppercase;
}
nav ul{
  width:100%;
  /*padding:10px 20px;*/ background:var(--bgaccent);
  border-bottom:1px solid;
}
nav li{
  padding:2px 5px;
  margin:0;
  border-left:1px solid;
  border-bottom:1px dotted;
}
nav li:nth-child(even){ background:var(--bgcolor);
}
nav ul li:nth-child(2){
  border-top:1px solid;
}
nav ul li:nth-last-of-type(1){
  border-bottom:none;
}

section{
  width:100%;
  padding:10px;
}
section h1{ background:var(--bgaccent);
    background-image:url('https://cinni.net/images/food/neonlove_adopt_happyberry.gif');
  background-repeat:no-repeat;
  background-size:20px;
  background-position:4px;
  padding:2px 30px;
  margin:0 0 5px 0;
  border-radius:4px;
  border-top:1px dotted;
  border-left:1px dotted;
  border-bottom:1px solid;
  border-right:1px solid;
}
section h2{
  border-bottom:2px dotted;
  margin:0 0 5px 0;
}

ul{
  padding:0;
  padding-left:20px;
  margin:0;
  list-style-image:url('https://cinni.net/images/misc/tc/fruity1.gif');
}
p{
  padding:0 5px;
}

textarea, input{
    background: var(--bgaccent);
color: var(--accent);
border:1px solid;
}



/*UPDATES SECTION*/
.updates{
  display:flex;
  padding:10px;
}
.updates img{
  width:84px;
  height:79px;
}

/*BANNER*/
@keyframes scroll {
from {
					background-position:bottom;
				}

				to {
					background-position:bottom right;
				}
}


.banner{
  background-image:url('https://directory.cinni.net/layout/cloudssss.png');
  background-position:bottom;
  background-repeat:repeat-x;
  height:70px;
  border-bottom:1px solid;
  animation: scroll 20s linear 0s infinite;
  padding-top:15px;
}
.banner img{
  max-height:100px;
  max-width:100%;
}

.pagedoll{
  position:relative;
  top:80px;
  left:800px;
  width:100px;
  margin-top:-80px;
}


/*LINK DISPLAY*/
.article-container{
    border:1px solid;
    /*width:80%;*/
  max-width:575px;
    margin:30px auto;
    border-radius:2px;
}
.article-title{
    text-transform:uppercase;
    font-weight:bold; background:var(--bgaccent);
    border-bottom: 1px dotted;
    padding:4px;
    letter-spacing:2px;
    font-size:.7rem;
    font-family: 'title';
    margin: 0 auto;
    text-align: center;
}
.article-info{
    display:flex;
}
.article-button{
    margin:4px;
  margin-right:10px;
    width:88px;
    height: 31px;
    padding:5px;
}
.article-desc{
    width:100%;
    padding:4px;
}
.article-desc hr{
    border-bottom:1px dotted var(--accent);
    border-top:none;
  border-right:none;
  border-left:none;
  margin:2px;
}

.article-stats{
    display:flex;
    font-size:.5rem;
    font-weight:bold;
    letter-spacing:2px;
    font-family: 'title';
}
.article-tag{
    width:75%;
    font-size:.8em;
    text-transform: uppercase;
}
.article-date{
  color:var(--accent);
  text-transform:uppercase;
  padding-top:3px;
  font-size:.5rem;
  text-align:right;
  font-weight:normal;
}
/*TAG STYLING*/
.tag{
  display:inline;
}
.tag-name {
  background-image: url("https://archive.cinni.net/directory/img/tag-blank.png");
  background-size: 100% 100%;
  width: 66px;
  display: inline-block;
  letter-spacing: 0;
  font-size: .75rem;
  padding: 1px;
  padding-left: 3px;
  margin: 2px;
  text-transform: lowercase;
  font-weight: normal;
  font-family: 'basiic';
}





@media screen and (max-aspect-ratio:16/9) {
  body{
    padding:10px;
    font-size:1.2rem;
  }
  nav a{
      font-size:2rem;
  }
  h1,h2,h3, small{
      font-size:1.2rem;
  }
  main{
    display:block;
  }
  nav{
  display:flex;
    width:100%;
    border-right:none;
    border-bottom:1px solid;
  }
  nav ul{
    border-bottom:none;
  }
  nav ul:nth-child(1){
        border-right:1px solid;
  }
  
  .banner{
  animation: scroll 10s linear 0s infinite;
}
  
  .pagedoll{
    display:none;
  }
  
  .article-container{
      width:100%;
  }
}