@font-face {
    font-family: Bespoke;
    font-weight: normal;
    src: url("/static/fonts/TTT-1.otf");
}


@font-face {
    font-family: Fraunces;
    font-weight: normal;
    src: url("/static/fonts/Fraunces--latin_basic.woff2");
}
@font-face {
    font-family: Fraunces;
    font-style: italic;
    src: url("/static/fonts/Fraunces-Italic--latin_basic.woff2");
}
@font-face {
    font-family: "routed gothic";
    font-weight: normal;
    src: url("/static/fonts/routed-gothic-webfont.woff2");
}
@font-face {
    font-family: "routed gothic";
    font-weight: normal;
    font-style: italic;
    src: url("/static/fonts/routed-gothic-italic-webfont.woff2");
}
@font-face {
    font-family: "routed gothic wide";
    font-weight: normal;
    font-style: normal;
    src: url("/static/fonts/routed-gothic-wide-webfont.woff2");
}
@font-face {
    font-family: "routed gothic wide";
    font-weight: normal;
    font-style: italic;
    src: url("/static/fonts/routed-gothic-wide-italic-webfont.woff2");
}


:root {
    --color-gray: #555555;
    --color-green: #00a900;
    --color-purple: #BF00FF;
    --color-dark-purple: #853EDC;
    --color-pink: #faa6ff;
    --font-size: 20px;
    --font-size-small: calc(0.75 * var(--font-size));
    --line-height: 26px;
    --line-height-small: calc(0.75 * var(--line-height));
    --sans: Routed gothic, sans serif; 
}



body {
    font-family: Fraunces;
    font-variation-settings: 'wght' 377, 'opsz' 43, 'SOFT' 244, 'WONK' 1;
    margin: 1.5em;
    color: var(--color-gray);
    font-size: var(--font-size);
    line-height: var(--line-height);
    /*background-image: url("/static/img/Call_shapes_RGB1.png"), url("/static/img/Call_shapes_RGB2.png"), url("/static/img/Call_shapes_RGB4.png"), url("/static/img/Call_shapes_RGB5.png"), url("/static/img/Call_shapes_RGB6.png");*/
    background-repeat: no-repeat;
    background-size: 12%;
    background-position-y: bottom;
    background-position-x: 90px;
    background-attachment: fixed;
}


/*

:root {
    --color-gray: #555555;
    --color-green: #00a900;
    --color-purple: #BF00FF;
    --color-dark-purple: #853EDC;
    --color-pink: #faa6ff;
    --font-size: 18px;
    --line-height: 24px;
}
*/


#main-menu,
#pad-buttons,
.screen-only,
.toc,
.slidy_toc,
.help {
    display: none !important;
}

#logo {
    color: var(--color-purple) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    -webkit-background-clip: initial !important;
}

body {
    margin: 1.5em;
    color: var(--color-gray);
    font-size: var(--font-size);
    line-height: var(--line-height);
}


#intro a {
    margin-right: 0.5em;
}

#intro a,
#pad-menu a,
#content a,
#content a:hover,
#content a:visited {
    color: var(--color-gray);
    border-image: -webkit-linear-gradient(left, var(--color-green), #faa6ff);
    border-image-slice: 1;
    border-bottom: 2px solid;
    text-decoration: none;
    vertical-align: 1px;
    line-height: 0;
    text-decoration: none;
}
#content .footnote a {
        border-bottom: 1px solid;
}



#content a:not(.footnote-ref):after {
    content: " <" attr(href) "> ";
    font-size: 0.7em;
    font-family: Routed Gothic;
    word-break: break-all;
    border-bottom: 0;
}

#content a:not([href^=http]):after {
    content: " <http://ttttoolbox.net" attr(href) "> ";
}

 a:hover,
#pad-buttons a:hover,
a.button:hover {
    background-color: var(--color-pink);
    color: var(--color-gray);
    -webkit-text-fill-color: initial;
}



h1 {
    font-family: Bespoke, sans-serif;
    font-size: 2em;
    color: var(--color-gray);
    line-height: calc(var(--line-height) * 2);
}


h2 {
    font-family: Routed gothic, sans-serif;
    font-size: 2.5em;
    line-height: calc(2.3 * var(--line-height));
    margin-top: calc(4 * var(--line-height));
    margin-bottom: calc(0 * var(--line-height));
    width: 60%;
    display: inline-block;
}
h2 + h3 {
    margin-top: calc(1 * var(--line-height));
    }
h3 {
    font-family: Routed Gothic, sans-serif;
font-size: 1.2em;
line-height: calc(1.1 * var(--line-height));
margin-top: calc(1 * var(--line-height));
margin-bottom: calc(0.1 * var(--line-height));
text-transform: uppercase;
}
h3 + p {
    margin-top: 0;
    }
h2 strong,
h3 strong {
    display: inline-flex;
}

h3 span {
    display: block;
    font-size: var(--font-size);
    text-decoration: underline;
    margin-bottom: 1.2em;
}

h4 {
    font-size: 1.1em;
    line-height: calc(1.5 * var(--line-height));
    margin-top: calc(1 * var(--line-height));
    margin-bottom: calc(0 * var(--line-height));
    margin-left: 2em;
    font-weight: bold;
}
h4 + p {
    margin-top: 0;
    }
h5 {
    display: inline-block;
    font-weight: bold;
    font-size: var(--font-size);
    margin-top: calc(0.2 * var(--line-height));
    margin-bottom: calc(0 * var(--line-height));
    margin-left: 2em;
    background: -webkit-linear-gradient(left, var(--color-green), #faa6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1em;
}

p {
    max-width: 45em;
    margin-bottom: calc(0.5 * var(--line-height));
    margin-top: calc(0.5 * var(--line-height));
}

p + p  {
/*    margin-top: var(--line-height);*/
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
    color: var(--color-green);
}

strong:nth-of-type(2n) {
        background: -webkit-linear-gradient(right, var(--color-green), #faa6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

sup {
    font-size: 0.65em;
    vertical-align: 0.5em;
    line-height: 0;
    font-family: Routed Gothic;
}
sup span {
    max-width: 8cm;
    line-height: 1.2em;
    float: right;
}

.footnote:before {
    content: attr(data-nb);
    float: none;
    left: 0;
    margin-left: 0;
    text-indent: 0;
    margin-right: 3px;
    background: -webkit-linear-gradient(left, var(--color-green), #faa6ff);
    font-weight: bold;
    font-family: "routed gothic wide", sans serif;
    padding: 0.1em;
    color: white;
    font-size: 0.8em;
    padding-right: 54px;
}

.footnote {
        text-transform: initial;
        font-size: 13px;
        line-height: 15.6px;
        text-decoration: initial;
        margin: 0.25em;
}


u {
    text-decoration: none;
    border-bottom: 2px solid yellow;
}
dt {
    font-weight: bold;
    display: inline;
    font-family: var(--sans);
}
dt:after {
    content: ": ";
}
dd {
    display: inline;
    margin:0;
}
dd:after {
    content:'\0A';
    white-space:pre;
}
dd + dd {
    margin-left: calc(var(--line-height) * 2);
}

blockquote {
    padding: 1em 2em 1em 2em;
}
blockquote p {
    font-family: routed gothic;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 1em;
    margin-top: 0;
    }
blockquote p + blockquote {
    padding-top: 0;
    }

img {
    max-width: 100%;
    max-height: 10cm;
    width: auto;
    margin: calc(var(--line-height) / 2) auto;
    display: block;
}
audio {
   display: block;
   width: 60%;
   margin: var(--line-height);
   }
   
video {
   display: block;
   width: 60%;
   margin: var(--line-height);
   }


.figcaption, .authors {
    font-size: 0.8em !important;
    font-family: Routed Gothic wide;
    letter-spacing: -0.05em;
    margin-top: 0;
    margin-bottom: var(--line-height);
    line-height: 1.3em;
    }

hr {
    display: block;
    height: 0;
    border: 0;
    width: 100%;
}

hr + hr {
        border: 0;
    border-top: 1px dashed var(--color-gray);
    height: calc(var(--line-height) * 3);
    margin: 0;
    height: calc(var(--line-height) * 1);
    margin-top: calc(var(--line-height) * 1); 
    margin-bottom: calc(var(--line-height) * 1);

}
code, pre {
    font-family: Monospace;
    white-space: pre-wrap;
}
pre {
    outline: 1px solid var(--color);
    padding: var(--line-height);
    width: 75%;
}


time {
    font-weight: bold;
    background: -webkit-linear-gradient(left, var(--color-green), #faa6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 18px;
}



input {
    background: white;
    border-image: -webkit-linear-gradient(left, var(--color-green), #faa6ff);
    border-image-slice: 1;
    font-size: var(--font-size);
    color: var(--color-gray);
    cursor: pointer;
}



/* GENERIC CLASSES ---------------------- */

.columns {
    column-count: 2;
    column-gap: var(--line-height);
}

.border-dotted {
    border: 5px dotted var(--color-purple);
    padding: 0.5em 1em;
    margin: 0.5em !important;
}

.border-dotted.round {
    border-radius: 100%;
    height: 24px;
    width: 0px;
    -webkit-text-fill-color: var(--color-gray);
    text-indent: -4px;
    display: inline-block;
    vertical-align: bottom;
}


nav h1 {
    font-size: 1.3em;
    margin: 0 0px var(--line-height);
}
h1 a#logo {
    font-family: Bespoke;
    color: var(--color-gray);
    white-space: pre-line;
    line-height: calc(var(--line-height) * 1.1);
    padding-top: 0.5em;
    text-decoration: none;
    margin-top: calc(var(--line-height) * -1.5);
    display: block;
    background: -webkit-linear-gradient(left, var(--color-green) 0, #faa6ff 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    margin-bottom: var(--line-height);
    letter-spacing: 1.5px;
    text-transform: none;
    border: 0 !important;
    font-weight: bold;
    position: absolute;
    top: 1.5em;
    left: 1.5em;
}

ul.meta-keywords > li::before {
    content: "" !important;
}
.meta-keywords li {
    display: inline-block;
    font-family: routed gothic;
    font-size: var(--font-size-small);
    line-height: var(-- line-height-small);
    margin-left: 0;
    background: #e6e6e6;
    padding: 0px 4px 0px 2px;
    margin: 2px 2px;
}

.figcaption, 
.authors, 
.editors,
.working-group, 
#content .figcaption a,
.tools {
    font-size: var(--font-size-small);
    font-family: "routed gothic wide", sans serif;
    letter-spacing: -0.05em;
    margin-top: 0;
    margin-bottom: var(--line-height);
    line-height: var(--line-height-small);
    font-weight: bold;
    text-indent: 0;
    }