[#2 nav/tags] rotten

<!--
     - nav/tags page #2 'rotten' by skye southcodes.tumblr.com
    - modify as you please but please do not touch the credit
    - any errors? need help? have questions? let me know!
    southcodes.tumblr.com/ask

    - normalize css by https://github.com/necolas
 -->


<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="{favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Merriweather:400,400i,700&display=swap" rel="stylesheet">
    <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">

<style type="text/css">

body, figure{margin: 0;padding: 0}
html{font-size: 14px}
body {font: 1rem 'Open Sans', sans-serif;}
a {text-decoration: none;
    color:#333  /* change top links color */
}
b {font-weight: 600}
nav ul,nav li {list-style-type:none;margin:0;padding:0;}


section{
    width: 55rem;
    max-width: 95vw;
    margin:8rem auto;
}
/*  header  */

header {
    max-width: 95vw;
    margin:0 auto 0;
    width: 100%;
}

#title{
    font:400 3rem 'Merriweather', serif;
    text-align: center;
    letter-spacing: .1rem;
    margin: 0
}


/*  top nav  */

#tnavi ul{
    margin:4rem 0 2rem;
    display: flex;
    flex-flow: row nowrap;
    text-transform: uppercase;
    justify-content: space-around;
}

#tnavi li {
    padding: 0 .8rem .4rem;
    border-bottom:2px solid transparent;
    transition-duration: .5s;}

#tnavi li:hover {
    border-bottom:2px solid #e0b5d8; /* change the color under the top links on hover*/
}

hr {border:0;border-top:1px dotted #bbb;margin:1rem auto}

#bg {
    width:95%;
    height:3rem;
    background: #f6e6f7;  /*change solid header color*/
    margin: 0rem auto;
}

/*  main  */
main {
margin: 3rem auto 0;
max-width: 95vw;
width: 100%
}

#mnavi ul {

    width: 60rem;
    max-width: 100%;
    margin:auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

#mnavi li {
width: 8rem;
margin:1.3rem 2rem; /* (somewhat) change the number of columns, the higher the number the less columns you'll have*/
display: inline-block;
box-sizing: border-box;
text-align: center;
font: 400 1rem 'Merriweather', serif;
word-wrap: break-word;
vertical-align: top;
line-height: 100%;
}

#mnavi a{
display: block;
transition-duration: .5s;
border-bottom: 2px solid #e0b5d8;
line-height: 140%;
font-style: italic;
padding:.7rem .4rem;
color:#666; /* link tags color*/
margin:0;
}

 #mnavi li:hover a{
    background: #fce8fb; /* background of tags on hover*/
 }


/* MEDIA */

@media only screen and (min-width:700px) and (max-width:1400px) {

}

@media only screen and (min-width:0px) and (max-width:699px) {

}
</style>


</head>
<body>

<section>

<header>

    <h1 id="title">rotten</h1>

    <nav id="tnavi"><ul>
    <li><a href="/">index</a></li>
    <li><a href="/ask">askbox</a></li>
    <li><a href="/">about</a></li>
    <li><a href="/archive">archive</a></li>
    <li><a href="https://www.tumblr.com">dashboard</a></li>
    </ul><nav>

    <hr>
    <figure id="bg"></figure>
    <hr>

</header>

<main>

<nav id="mnavi"><ul>
    <li><a href="/">rotten</a></li>
    <li><a href="/">bones</a></li>
    <li><a href="/">bleached</a></li>
    <li><a href="/">sun</a></li>
    <li><a href="/">no good</a></li>
    <li><a href="/">baby</a></li>
    <li><a href="/">careful</a></li>
    <li><a href="/">waiting</a></li>
    <li><a href="/">plan</a></li>
    <li><a href="/">stay</a></li>
    <li><a href="/">wives</a></li>
    <li><a href="/">troubles</a></li>
    <li><a href="/">wine</a></li>
    <li><a href="/">pray</a></li>
    <li><a href="/">tainted</a></li>
    <li><a href="/">pretty</a></li>
    <li><a href="/">perfection</a></li>
    <li><a href="/">ate you</a></li>
    <li><a href="/">whole</a></li>
</ul></nav>

</main>
</section>

<footer>
    <div style="position:fixed;bottom:15px;right:10px;font-size:14.5px;line-height:14px;height:14px;width:14px;padding:4px;"><a href="https://southcodes.tumblr.com" title="southcodes" style="color:#666;">sc</a></div>
</footer>

</body>
</html>