body{
  background-image: url("https://cinni.net/directory/img/bg-01.png");
  /*color: #db9e7d;*/
  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;
  /*background:#fff3f5;*/
  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;
  /*background:white;*/
}

aside{
    width:200px;
    background:#fff3f5;
  border:1px solid #db9e7d;
  border-radius:2px;
}
.title{
  border-bottom:1px solid #db9e7d;
  padding:2px 5px;
  background:#eab395;
  /*background:#fedae0;*/
/*background: linear-gradient(90deg, rgba(254,218,224,1) 25%, rgba(255,243,245,1) 100%);*/
  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;
}
.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%;
}
}