/*****************************************

      CRUMBS BASE CSS DEFINITIONS

*****************************************/

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../fonts/Montserrat-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(../fonts/Montserrat-SemiBold.ttf) format('truetype');
}

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;  font-weight: 400;
  font-display: swap;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(../fonts/Inconsolata-Regular.ttf) format('truetype');
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #EFEFEF;
    background-color: #222222;
    font-size: 1.25em;
    line-height: 1.5;
    margin: 0;
    overflow-y: scroll;
}

.content a {
    color: #f6915f;
    outline: 0;
}

.content a:hover, .content a:focus {
    color: #EFEFEF;
    background-color: #f6915f;
    text-decoration: underline;
}

.content .header { padding: 0.5em 1.5em 0.5em; }
.content h1 { font-size: 1.5em; }
.content { padding: 0 0 2em 0; }

.article {
    padding: 1em 3em;
}

.article code, .article pre {
    font-size: 1.2em;
    font-family: monospace;
}

.article pre {
    background-color: #353535;
    border: 1px solid black;
    padding: 1em;

    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.article img {
    max-width: 100%;
}

.wrap {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.nav {
    justify-content: flex-end;
    font-size: 1.5em;
    padding: 22px 15px 32px;
}

.nav a {
    color:#FFF;
    text-decoration: none;
    padding-left: 48px;
    text-transform: lowercase;
    font-family: monospace;
    font-size: 28px;
    outline: 0;
}

.nav a:hover, .nav a:focus { text-decoration: underline; }

.footer {
    border-top: 1px solid #BEBEBE;
    margin-top: 15px;
}

.title {
    flex-grow: 1;
    font-size: 28px;
    line-height: 48px;
    font-family: monospace;
}

.gay {
    display: flex;
    flex-direction: row;
}

.colour {
    max-height: calc(1000px / 15);
    height: 12px;
    flex-grow: 1;
}

.list {
    font-family: monospace;
    font-size: 1.35em;
    list-style-type: none;
    margin: 0;
}

.list > li {
    position: relative;
    padding-left: 12ch;
}

.date {
    padding-right: 1em;
    position: absolute;
    left: 0;
}

.cursor { animation: flash 0.75s infinite alternate; }

@keyframes flash {
    0%   { opacity: 1; }
    49%  { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
}

#t-color-red { color: #ef787b; }
#t-color-org { color: #f6915f; }
#t-color-ylw { color: #fdcb71; }
#t-color-grn { color: #99cb9b; }
.tc-brown { color: #ce7b59; }


.colour1  { background-color: #3c3c3c; }
.colour2  { background-color: #525252; }
.colour3  { background-color: #74736a; }
.colour4  { background-color: #9f9e93; }
.colour5  { background-color: #d2cfc7; }
.colour6  { background-color: #e7e5df; }
.colour7  { background-color: #f1f0ec; }
.colour8  { background-color: #ef787b; }
.colour9  { background-color: #f6915f; }
.colour10 { background-color: #fdcb71; }
.colour11 { background-color: #99cb9b; }
.colour12 { background-color: #6ccaca; }
.colour13 { background-color: #6997c8; }
.colour14 { background-color: #ca98c9; }
.colour15 { background-color: #be6b49; }

@media (max-width: 480px) {
    .nav.gay {
        display: initial;
    }

    .content .no-side-padding-mobile {
        padding-left: 0;
        padding-right: 0;
    }
}