@font-face {
    font-family: 'Raleway';
    src: url("/font/Raleway-VariableFont_wght.ttf") format('truetype');
}

@font-face {
    font-family: 'Quicksand';
    src: url("/font/Quicksand-VariableFont_wght.ttf") format('truetype');
}

@font-face {
    font-family: 'BalooBhai2';
    src: url("/font/BalooBhai2-VariableFont_wght.ttf") format('truetype');
}

html {
    font-size: 18pt;
}

body#home, body#topic {
    background: linear-gradient(to top, rgba(245,242,230,0.5), rgba(245,242,230,0.5)), url('/graphic/bricks.jpg');
    font-family: 'Raleway', sans-serif;
    background-size: 3000px;
}

body#home #imgdarius {
    margin: auto;
    display: block;
}

body#home h1 {
    text-transform: uppercase;
    color: #A11B2B;
    font-weight: 650;
    text-align: center;
    font-size: 3.0rem;
    margin-bottom: 0.5rem;
}

body#home p {
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
    color: #A11B2B;
}

body#home section {
    padding-top: 1rem;
    margin: auto;
    max-width: 56rem;
    justify-content: center;
}

body#home div#corkboard-frame {
    margin: 32px;
    padding: 0;
    border-image: url('/graphic/woodframe.jpg') 32 / 32px / 32px round;
}

body#home div#corkboard {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    width: 100%;
    background-image: url('/graphic/corkboard.jpg');
}

body#home div#inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
}

/* Needed to expand <a> tab to size of SVG it contains, to aid browsing using a keyboard */
body#home div#inner a {
    display: block;
}

body#home svg use {
    fill: #a11;
    color: #a11;
}

.external_link:after {
    content: url('/graphic/external_link.svg');
    display: inline-block;
    width: 0.7rem;
    padding-left: 0.3rem;
}

/***************************
 * Specific to topic pages *
 ***************************/

a.link_to_home {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

body#topic section {
    margin: auto;
    max-width: 54rem;
    justify-content: center;
    border: white 2px solid;
    background-color: rgba(255,255,255,0.85);
    padding-bottom: 1rem;
}

body#topic h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: 0.325rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

body#topic h2 {
    margin: 1.5rem 2rem 0;
}

body#topic h3 {
    margin: 1.2rem 2rem 0;
}

body#topic p, body#topic blockquote {
    line-height: 1.1rem;
    font-weight: 400;
    text-align: left;
    color: #A11B2B;
    margin: 0.5rem 2rem 0;
    font-size: 0.9rem;
}

body#topic blockquote {
    padding-left: 3rem;
    padding-right: 3rem;
}

body#topic blockquote:before {
    content: open-quote;
}

body#topic blockquote:after {
    content: close-quote;
}

body#topic ul, ol {
    margin-top: 0.5rem;
}

body#topic li {
    line-height: 1.1rem;
    margin-left: 2rem;
    font-size: 0.9rem;
}

body#topic .photo {
    margin-left: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

body#topic .photofloatright {
    float: right;
    margin-right: 2rem;
    padding: 0.5rem 1rem;
}

body#topic .photo-centered {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.figcenter img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.figcenter figcaption {
    padding-top: 0.2rem;
    text-align: center;
    font-size: 90%;
}


/***********************************
 * Specific to tags on topic pages *
 ***********************************/

.moreOrLess {
    color: blue;
    cursor: pointer;
    display: inline;
    line-height: 1.1rem;
    font-weight: 400;
    text-align: left;
    margin: 0.5rem 2rem 0;
    font-size: 0.9rem;
}

.tag {
    display: none;
}

.tagArticle {
    flex-wrap: wrap;
    float: right;
    line-height: 1.1rem;
    font-weight: 400;
    color: #a11b2b;
    margin: 0.5rem 2rem 0;
    font-size: 0.9rem;
}

.tagArticle > span {
    padding: 0.04rem 0.5rem 0.1rem;
    margin: 0.1rem;
    border-radius: 0.5rem;
    background-color: #f1eaea;
}

#tagFilter {
    display: none;
    flex-wrap: wrap;
    font-size: 0.9rem;
    margin: 0.5rem 2rem 0;
    align-items: center;
}

.tagButton, .tagButtonActive, .resetTagButton {
    padding: 0.04rem 0.5rem 0.1rem;
    margin: 0.1rem;
    cursor: pointer;
    border-radius: 0.5rem;
    background-color: #edd;
}

.tagButton:hover, .resetTagButton:hover {
    background-color: #e5c3c3;
}

.resetTagButton {
    font-style: italic;
}

.tagButtonActive {
    background-color: #daa;
}