/* layout base */

body {
    background: #e4e1e0 url(img/bg.png) repeat;
    font-family:
        Noto Sans,
        sans-serif;
    font-size: 15px;
    text-align: justify;
    color: #73655a;
    line-height: 30px;
    letter-spacing: 0.4px;
    margin: 0;
}
header {
    background: url(img/buuchan.png) center top no-repeat;
    margin: 0 auto -90px 0;
    height: 600px;
}
nav {
    background: #2b2826eb;
    text-align: center;
}

.content {
    padding-bottom: 15px;
    padding-top: 15px;
    width: 750px;
    margin: 0 auto;
}

h1 {
    font-family:
        Cedarville Cursive,
        cursive;
    font-size: 35px;
    font-style: italic;
    letter-spacing: 0.6px;
    color: #c3a17c93;
    text-align: center;
    text-shadow: 2px 2px 6px #bfbfbf78;
    text-transform: lowercase;
    margin-bottom: 10px;
}
h2 {
    font-family:
        Asap Condensed,
        sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-align: right;
    font-variant: all-small-caps;
    letter-spacing: 2px;
    color: #ac9e92c4;
    margin: -20px 85px -15px 0;
}
h3 {
    display: inline;
    font-family:
        Young Serif,
        serif;
    font-size: 13px;
    color: #c3a17c;
    letter-spacing: 2px;
    font-variant: all-small-caps;
}
h3::after {
    content: "";
    margin-right: 10px;
}

#footer {
    width: 915px;
    padding-top: 5px;
    margin: 10px auto 10px auto;

    font-family: Asap, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1.2px;
    line-height: 15px;
    color: #615e5ad6;
}
#footer a {
    color: #c3a17c;
    text-decoration: none;
}

#stats {
    width: 75%;
    padding: 10px;
    margin: 10px auto;
    font-size: 12px;
    text-align: center;
    
    background-color: #c3a17c1c;
    border-left: 15px solid #a2805c2c;
    box-shadow: 2px 2px 15px #d4cbc2b8;
    border-radius: 5px;
}

#stats strong {
    font-family: Young Serif, serif;
}

/* main font things + colors */

::selection {
    background-color: #cabeb182;
}
.highlight {
    background-color: #e9e3e2;
    z-index: auto;
}

.heart {
    color: #d18e9a;
}
.kaomoji {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #ada9a3;
    letter-spacing: 0.1em;
}

strong {
    font-family:
        Young Serif,
        serif;
    font-size: 15px;
    color: #c3a17c;
    letter-spacing: 1.5px;
    font-variant: all-small-caps;
}
i {
    color: #8c7986;
}
u {
    text-decoration: underline 2px #d6a698;
}
s {
    color: #5a575547;
}

a {
    color: #c3baad;
}
abbr {
    text-decoration: underline dotted #d0b289ff;
}
ul {
    list-style: circle outside;
    line-height: 30px;
    width: 700px;
    margin: 0 auto;
    padding-bottom: 20px;
}

/* codes by other people!!

CSS LINK HOVER: https://codepen.io/team/css-tricks/pen/xxPORam

*/

.content a {
    text-decoration: none;
    position: relative;
    color: #a09b96;
}
.content a::before {
    content: "";
    background-color: #d7c8b1;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3px;
    transition: all 0.5s ease-in-out;
    z-index: auto;
}
.content a:hover::before {
    background-color: #c5b9ad45;
    bottom: -1px;
    height: 100%;
}
.content a:hover {
    color: #c98ca1ed;
    transition: all 0.5s ease-in-out;
}

nav a {
    font-family:
        Asap Condensed,
        sans-serif;
    color: #b4a696;
    font-size: 14px;
    text-decoration: none;
    font-variant: all-small-caps;
    letter-spacing: 2px;
    margin: 7px;
    position: relative;
}

nav a::before {
    content: "";
    background-color: #aa9a8927;
    position: absolute;
    top: 8px;
    left: 9px;
    bottom: 2px;
    width: 80%;
    height: 10px;
    transition: all 0.5s ease-in-out;
    z-index: auto;
}

nav a:hover::before {
    background-color: #c98ca128;
    top: 2px;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

nav a:hover {
    color: #b69f8d;
    transition: all 0.5s ease-in-out;
}