/**
 * @group Variables.
 */
:root {
    --main-color: black;
    --accent-color: red;
}

/**
 * @group Typography.
 *
 * Put @font-face declarations here.
 */

@font-face {
    font-family: "Day Roman";
    src: url("../fonts/DAYROM__.ttf") format("truetype");
}

a:link,
a:visited {
    color: var(--main-color);
    text-decoration: underline #bb61e8 2px;
}
a:link:hover {
    text-decoration: none;
}

/**
 * @group Reset.
 */
html,
body,
ul,
ol,
figure {
    margin: 0;
    border: none;
    padding: 0;
    list-style-type: none;
}

body {
    padding-bottom: 3em;
    background: #fff3e0;
    color: var(--main-color);
    font: 1em "Day Roman", Arial;
}

#Masthead {
    border-bottom: 1px solid;
    padding: 0 0 1em 0;
    text-align: center;
}
#Masthead h1 {
    margin: 3em 0 0 0;
}
#Masthead img {
    width: 25%;
    vertical-align: bottom;
    transition: width 3s;
}
#Masthead li {
    display: inline;
    padding: 0 1em;
    font-size: 1.25em;
}
#MainNavigation {
    border-top: 1px solid;
    padding-top: 1em;
}
#MainNavigation .current a {
    text-decoration: none;
}
#Masthead,
#MainContent {
    margin: 0 auto;
    max-width: 60em;
}
.entry-content ul {
    list-style-type: disc;
}
.entry-content ol {
    list-style-type: decimal;
}
.entry-content ul ul {
    padding-left: 1em;
}

.language-switcher,
#MainFooter {
    display: none;
}

/**
 * @group Blog posts.
 */
.h-entry {
    border-bottom: 1px dotted;
}
.h-entry header {
    padding-top: 1em;
}

/**
 * @group Mobile styles.
 *
 * Put small-screen styles here.
 */
@media screen and (max-width: 60em) {
    #MainContent {
        padding: 0 1em;
    }
    #Masthead img {
        width: 50%;
    }
}