@font-face {
    font-family: 'DuranGo';
    font-style: normal;
    font-weight: 400;
    src: url("/res/font_durango.ttf") format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url("/res/font_nunito.woff2") format('woff2');
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    font-family: DuranGo, serif;
}

body,
html {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

html {
    font-size: 13px;
}

@media(min-width:320px) {
    html {
        font-size: calc(13px + 3 * ((100vw - 320px) / 880));
    }
}

@media(min-width:1200px) {
    html {
        font-size: 16px;
    }
}

body {
    font-size: .8rem;
}

body,
body.webp.gradient-background,
body.webp .gradient-background,
body.no-webp.gradient-background,
body.no-webp .gradient-background {
    background-color: #202930;
    background-image: linear-gradient(to bottom right, #1c2228, #293640);
}

body.webp.wood-background,
body.webp .wood-background {
    background: #202930 url("/res/wood_background.webp") repeat;
    background-size: 35vmin;
}

body.no-webp.wood-background,
body.no-webp .wood-background {
    background: #202930 url("/res/wood_background.png") repeat;
    background-size: 35vmin;
}

body.webp.plain-wood-background,
body.webp .plain-wood-background {
    background: #202930 url("/res/plain_wood_background.webp") repeat;
    background-size: 35vmin;
}

body.no-webp.plain-wood-background,
body.no-webp .plain-wood-background {
    background: #202930 url("/res/plain_wood_background.png") repeat;
    background-size: 35vmin;
}

body.webp.simple-background,
body.webp .simple-background {
    background: #202930 url("/res/home_background.webp") repeat;
    background-size: 35vmin;
}

body.no-webp.simple-background,
body.no-webp .simple-background {
    background: #202930 url("/res/home_background.png") repeat;
    background-size: 35vmin;
}

img,
#content img {
    height: auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.highlight-shadow,
.shadow {
    filter: drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.4));
}

.highlight-shadow:hover {
    filter: drop-shadow(6px 6px 12px rgba(255, 255, 255, 0.1));
}

.text-shadow {
    text-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4);
}

.text-button {
    display: inline;
    border: 3px solid white;
    border-radius: 1vh;
    padding: .5vh 2vh;
    margin-bottom: 3vh;
    font-family: Nunito, sans-serif;
    font-size: 5vh;
    color: white;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
    transition: background-color .1s ease-in-out;
}

.text-button:hover {
    background-color: rgba(0, 0, 0, 1);
    transition: background-color .1s ease-in-out;
}

.centre-text {
    display: block;
    text-align: center;
}

#footer,
#footer-full-width {
    display: block;
    background: #151a1f;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 1);
    z-index: 1;
}

#footer {
    box-sizing: border-box;
    max-width: 87%;
    padding: .5em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    font-size: 1.5em;
    text-align: left;
}

#footer-links {
    display: inline-block;
    margin: .4em;
    line-height: 40px;
}

#footer-social-icons {
    float: right;
    margin-top: .2em;
    margin-right: .4em;
}

@media only screen and (max-width: 1000px) {
    #footer-social-icons {
        content-visibility: hidden !important;
    }
}

#footer a.link,
#footer span.copyright {
    color: #bbb;
    font-family: Nunito, sans-serif;
    font-size: .85em;
    margin-right: 1em;
    vertical-align: middle;
}

#footer span.copyright {
    color: #999;
}

#footer a {
    text-decoration: none;
}

#footer a.link:hover {
    color: #999;
}

#footer a.social-icon {
    margin-left: .5em;
    line-height: 0;
}

#footer a.social-icon.twitter-icon img {
    margin-bottom: 4px;
    margin-right: -4px;
}

#footer-full-width {
    width: 100%
}

#footer-full-width #footer {
    display: inline-block;
    background: 0;
    box-shadow: none;
    width: 100%;
    margin: 0;
    padding-bottom: .25em;
}

#header,
#header-full-width {
    display: block;
    background: #151a1f;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 1);
    z-index: 1;
}

#header {
    box-sizing: border-box;
    max-width: 900px;
    padding: .5em;
    padding-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    font-size: 1.5em;
    text-align: left;
}

#header-logo {
    display: inline-block;
    margin-top: 8px;
    line-height: 40px;
}

#header-links {
    display: inline-block;
    margin-top: .5em;
    margin-left: 2em;
}

#header a {
    line-height: 48px;
    text-decoration: none;
}

#header a.link {
    color: #bbb;
    font-family: Nunito, sans-serif;
    font-size: 1.1em;
    margin-right: 1em;
    vertical-align: middle;
}

#header a.link:hover {
    color: #999;
    text-decoration: underline;
}

#header img,
#header span {
    display: inline-block;
    vertical-align: middle;
}

#header img {
    vertical-align: middle;
    height: 48px;
    width: auto;
}

#header span {
    margin-left: .26em;
    margin-bottom: -0.3em;
    font-size: 2em;
    color: white;
}

#header-full-width {
    width: 100%
}

#header-full-width #header {
    display: inline-block;
    background: 0;
    box-shadow: none;
    width: 100%;
    margin: 0;
}

a.twitter-share,
#content a.twitter-share {
    position: relative;
    display: inline-block;
    height: 1.5em;
    padding: .05em .6em;
    border-radius: .3em;
    background-color: #1b95e0;
    color: white;
    font-size: .9em;
    font-family: Nunito, sans-serif;
    vertical-align: middle;
}

a.twitter-share:hover,
a.twitter-share:active,
a.twitter-share:focus,
#content a.twitter-share:focus,
#content a.twitter-share:hover,
#content a.twitter-share:active {
    background-color: #0c7abf;
}

a.twitter-share span,
#content a.twitter-share span {
    position: relative;
    top: -0.02em;
}

a.twitter-share i,
#content a.twitter-share i {
    position: relative;
    display: inline-block;
    top: .16em;
    width: 1em;
    height: 1em;
    margin-right: .33em;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}

iframe {
    max-width: 100%;
    border: 0;
    margin-top: .2em;
    margin-bottom: .2em;
}

body {
    display: flex;
    flex-direction: column;
}

#content,
#call-to-action,
#header,
#footer {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
}

#footer {
    margin-top: auto;
}

#content,
#call-to-action {
    padding: .5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin: 1em;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    font-family: Nunito, sans-serif;
    font-size: 1.4em;
    background-color: #202930;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 1);
    color: white;
}

#content * {
    font-family: Nunito, sans-serif;
    font-size: 1em;
    line-height: 1.6em;
    text-decoration: none;
}

#content .article-links {
    font-size: .9em;
}

#content .article-links .article-back-link {
    display: inline-block;
    float: left;
    margin-bottom: .3em;
}

#content .article-links .twitter-share {
    display: inline-block;
    float: right;
    margin-top: .2em;
    margin-bottom: .3em;
    font-size: .85em;
}

#content h1,
#content h2,
#content h3,
#content hr {
    clear: both;
}

#content h1 {
    margin-top: .2em;
    margin-bottom: .15em;
    font-size: 1.5em;
}

#content h2 {
    margin-top: 1em;
    margin-bottom: .1em;
    font-size: 1.5em;
}

#content h3 {
    text-decoration: underline;
    font-size: 1.2em;
}

#content h1,
#content h1 a,
#content h2,
#content h2 a,
#content h3,
#content h3 a {
    color: white;
}

#content h2,
#content h2 a {
    font-family: DuranGo, serif;
}

#content hr {
    margin-bottom: .6em;
}

#content p {
    font-size: 1em;
    margin-bottom: .8em;
}

#content ul,
#content ol {
    list-style-position: outside;
    margin-left: 1em;
    margin-bottom: .8em;
    font-size: .9em;
}

#content ul ul {
    font-size: 1em;
    margin-top: .2em;
    margin-left: 2em;
}

#content ul li,
#content ol li {
    margin-bottom: .2em;
}

#content ul ul li {
    margin-bottom: 0;
}

#content a {
    color: #3692e7;
}

#content a:hover {
    color: #57aeff;
}

#content p.list-title {
    margin-bottom: .3em;
}

#content strong {
    text-decoration: underline;
    margin-right: .75vh;
}

#content .list-of-links :not(h2) a {
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 1.2em;
    vertical-align: middle;
}

#content .list-of-links :not(h2) a img.icon {
    display: inline;
    width: .9em;
    height: auto;
}

#content .list-of-links :not(h2) a span {
    text-decoration: underline;
}

#content table {
    margin-bottom: 1em;
}

#content table,
#content th,
#content td {
    border: 1px solid white;
    border-collapse: collapse;
}

#content th,
#content td {
    padding: .5em;
}

#call-to-action {
    background: #202930;
    text-align: center;
    padding: 1em;
    padding-top: 1.2em;
    color: white;
}

#call-to-action h2 {
    margin-bottom: .3em;
}

#call-to-action p {
    font-family: Nunito, sans-serif;
    margin-bottom: .8em;
}

#call-to-action .play canvas {
    width: 40%;
    min-width: 200px;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
}

#call-to-action .play:hover canvas {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

#dice-container,
#stick-dice {
    position: relative;
    display: inline-block;
    background-color: #1b2229;
    border-radius: 1em;
    margin-bottom: 1em;
    overflow: hidden;
}

#dice-container {
    padding: 1em .5em;
}

#dice {
    width: 320px;
    height: 176px;
}

#dice-prompt {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .3em .6em;
    background-color: rgba(0, 0, 0, 0.4);
    border-top-right-radius: 1em;
    color: white;
    font-family: Nunito, sans-serif;
}

#stick-dice {
    width: 320px;
    height: auto;
    margin-bottom: 2em;
}

@media(min-width:700px) {
    #dice-container {
        float: right;
        margin-left: 1em;
    }
    #stick-dice {
        float: left;
        margin-right: 1em;
    }
}

.chance_6_25,
.chance_25_0,
.chance_37_5 {
    display: inline-block;
    background-color: white;
    height: 1em;
    margin: 0 .4em;
}

.chance_6_25 {
    width: 25px;
}

.chance_25_0 {
    width: 100px;
}

.chance_37_5 {
    width: 150px;
}