@font-face {
    font-family: 'Junicode';
    src: url('/fonts/Junicode/WOFF2/JunicodeVF-Roman.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Junicode';
    src: url('/fonts/Junicode/WOFF2/JunicodeVF-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

html,
body {
    width: 100%;
}

body {
    padding: 0 24px;
    box-sizing: border-box;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    font-family: "Junicode", serif;
    font-style: normal;
    line-height: 1.4;

    background-color: #eee;
    color: #333;
}

a {
    color: #333;
}

p,
section {
    margin-top: 0;
}

section {
    max-width: 80ch;
    width: 100%;
    box-sizing: border-box;
}

code {
    font-family: monospace;
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
}

pre {
    text-align: left;
    text-align-last: left;
    overflow-x: scroll;
}

nav {
    font-size: 150%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 24px;
    text-align: center;
}

nav>* {
    margin: 0 12px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: 2px 2px #ccc;
    font-family: "Young Serif", serif;
    font-style: normal;
    margin-top: 0;
}

h1 {
    text-align: center;
    font-size: 400%;
    margin-bottom: 0;
}

.blinkies {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.blinkies>* {
    margin: 2px;
}

.members {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

.member-container {
    box-shadow: 4px 4px #ddd;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 12px;
    margin: 6px;
}

.member-container>a {
    text-decoration: none;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.member-container>a>img {
    width: 64px;
    border-radius: 12px;
}

.member-name {
    margin: 0;
}

.text {
    text-align: justify;
    text-align-last: center;
}

.content ul li {
    line-height: 1.3em;
}

.red {
    color: #c35050;
    padding: 5px;
}

.green {
    color: #3a8841;
    padding: 5px;
}

.padding li {
    padding: 10px;
}

.padding ol {
    margin: 0;
    padding: 0;
}

.no,
.yes {
    margin: 0;
    padding: 0;
    padding-left: 20px;
}

.no li,
.yes li {
    list-style: none;
    padding: 5px;
}

.no li::before {
    content: "❌";
    padding-right: 10px;
}

.yes li::before {
    content: "✅";
    padding-right: 10px;
}

ul>ul {
    margin-top: 10px;
    margin-bottom: 10px;
}

ol>li {
    margin-top: 10px;
    margin-bottom: 10px;
}

ol>ul>li {
    padding: 5px;
}

#social-etiquette ul {
    padding-left: 10px;
}

#social-etiquette ul ul {
    padding-left: 20px;
}

#submissions {
    display: flex;
    flex-flow: row wrap;
}

#submissions>a {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 24px;
}

#submissions img {
    margin-bottom: 4px;
    width: 256px;
}

#members {
    margin-bottom: 16px;
}

@media only screen and (max-width: 480px) {
  #site-title {
    max-width: 265px;
  }
}