/* 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;
}

.main {
    padding-bottom: 15px;
    padding-top: 15px;
}
.main:nth-of-type(even) {
    padding-top: 15px;
    background: #2b2826eb;
    box-shadow: 0 1px 8px #777777bc;
    color: #b6b3b0;
    z-index: auto;
}

.content {
    width: 1000px;
    margin: 0 auto;
}
.column {
    column-count: 2;
    column-gap: 60px;
    column-rule: 1px solid #bea992ba;
    column-fill: balance;
    vertical-align: text-top;
    margin-top: 20px;
    margin-bottom: 5px;
}

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;
    color: #615e5ad6;
}
#footer a {
    color: #c3a17c;
    text-decoration: none;
}

/* blockquotes & citations */

blockquote {
    width: 65%;
    margin: 25px auto 20px auto;
    padding: 25px 30px 25px 30px;
    font-family:
        EB Garamond,
        serif;
    font-size: 25px;
    letter-spacing: 1px;
    color: #ac9e92;
    border-left: solid 7px aqua;
}

cite {
    display: block;
    margin: 15px 0 auto 45px;
    font-family:
        Noto Sans,
        sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: 22px;
}
cite i {
    color: #c3a17c;
    font-variant: none;
    font-size: 12px;
}
cite::before {
    content: "— ";
    color: #73655a3d;
    margin-left: -20px;
}
.speaker {
    font-family:
        Noto Sans,
        sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 2px;
    color: #73655ad8;
}

/* main font things + colors */

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

.heart {
    color: #d78496ed;
}
.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

*/

.main a {
    text-decoration: none;
    position: relative;
    color: #a09b96;
}
.main 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;
}
.main a:hover::before {
    background-color: #c5b9ad45;
    bottom: -1px;
    height: 100%;
}
.main 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;
}