html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
p,
pre,
del,
em,
img,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
tbody,
tr,
th,
td,
article,
aside,
footer,
header,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}
article,
aside,
footer,
header,
nav,
section,
textarea {
    display: block;
}
footer {
    margin-top: 10px
}
body {
    line-height: 1;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    vertical-align: middle;
}
a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
a img {
    border-style: none;
}
ul,
li {
    list-style-type: circle;
    margin-left: 12px;
    
}
.if-container {
    display: inline-block;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.ifrm {
    border: none;
    display: block;
    height: 100%;
    width: 100%;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

html {
    font-size: 62.5%;
    height: 100%;
}
body {
    background: #f8eae2;
    color: #a17868;
    font-family: "Oldenburg", serif;
    font-size: 1.2em;
    text-align: left;
    letter-spacing: 0.2em;
    line-height: 1.5;
    padding: 10px;
}
a {
    color: #758f8f;
    text-decoration: underline;
}
a:hover {
    color: #a17868;
    position: relative;
    top: 1pt;
    left: 1pt;
}

#page {
    background: #e9d9d0;
    color: #758f8f;
    text-align: center;
}
#page a {
    text-decoration: none;
}
#page a:hover {
    color: #c9996b;
}
header {
    padding: 10px 20px;
}
#contents {
    margin: 0 auto;
    padding: 8px;
    width: 550px;
    height: 400px;
    background-image: linear-gradient(rgba(201, 153, 107, 0.27), rgba(92, 79, 74, 0.27));
}

#contents-inner {
    border: 2px #3d1f14 solid;
    background-color: #f8eae2;
    padding: 4px;
    height: 100%;
    width: 100%;
}

/* please tell me this works please tell me this works */

body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    background: rgba(161, 120, 104, 0.36);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(117, 143, 143, 0.65);
    border-radius: 10px;
}
#menu {
    text-align: center;
    margin: 10px 0;
}
nav li {
    display: inline-block;
    margin: 0;
}
nav li a {
    color: #5c4f4a;
    display: inline-block;
    margin: 0 5px;
}
nav li + li:before {
    content: "♡ ";
}

h1 {
    font-size: 1.3em;
    padding: 0 0 0.5em 0;
    text-align: center;
}
h2,
.h2 {
    color: #a17868;
    font-size: 1.2em;
    font-weight: 700;
    margin: 20px 0;
    padding: 0.2em 0;
    position: relative;
    border-bottom: 1px solid #a17868;
}
h2:first-letter,
.h2:first-letter {
    color: #378686;
    font-size: 1.2em;
}
h2::after,
.h2::after {
    background: #c9996b;
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    height: 1px;
    width: 20%;
    z-index: 2;
}
h3,
.h3 {
    font-size: 1.1em;
    border-bottom: 1px #c9996b dotted;
    font-weight: 400;
    line-height: 18px;
    margin: 20px 0;
}
dt {
    font-weight: 700;
    margin: 0 0 5px;
}
dd {
    border-bottom: 1px solid #758f8f;
    margin: 0 0 5px 1em;
}
dl:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
em {
    font-weight: 700;
}
input,
textarea {
    background: #fff;
    border: 1px #000 dotted;
    color: #000;
    margin: 3px 0;
    width: 100%;
}
textarea {
    height: 50px;
}
hr {
    display: block;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    height: 1px;
}
.marker {
    background: #758f8f;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #fff),
        color-stop(0.49, #fff),
        color-stop(0.5, #758f8f),
        color-stop(1, #758f8f)
    );
    background: -webkit-linear-gradient(transparent 50%, #758f8f 0%);
    background: linear-gradient(transparent 50%, #62b9b9 0%);
}
.ln01 {
    border-left: 5px solid #5c4f4a;
    margin: 8px 0;
    padding: 3px;
}
.ln02 {
    border-left: 5px solid #758f8f;
    margin: 8px 0;
    padding: 3px;
}
.textbox {
    border: 2px #a17868 solid;
    border-radius: 12px;
    margin: 10px 0;
    padding: 5px;
    text-align: left;
}
.flags {
    margin: 8px
}
.note {
    font-size: smaller;
    color: #bba7a0
}
.title {
    color: #5c4f4a;
    font-size: 1.5em;
    font-weight: 700;
    margin: 2em 0;
    text-align: right;
}
.title:first-letter {
    color: #758f8f;
    font-size: 1.6em;
}
.txt {
    border-left: 1px dotted #c9996b;
    color: rgba(139, 123, 108, 0.6);
    margin: 1em;
    padding: 0 0 0 1em;
}
@media screen and (max-width: 600px) {
    #page {
        padding: 10px;
        height: 100%;
    }
    #contents {
        width: 100%;
        height: auto;
    }
}