/* variables */

:root{
    /* General content width */
    --website-width: 1400px;
    --tight-column-width: 720px;

    /* Colors in dark areas */
    --dark-background-color-grey: #35373c;
    --dark-background-color-purple: #271523;
    --dark-background-color-purple-variation-light: #63294b;
    --dark-color-links: #cccccc;
    --dark-color-marked: #ff0f78;
    --dark-color-normal: white;
    
    /* Colors in light areas */
    --light-background-color-grey: #f6f6f6;
    --light-background-color-highlight: #fc97c3;
    --light-background-color-white: white;
    --light-background-inline-code: #dddddd;
    --light-border-color: #e4e2e2;
    --light-box-shadow-color: rgba(39, 44, 49, 0.06);
    --light-color-dim: #555555;
    --light-color-dim-purple: #a61483;
    --light-color-dimmer: #aaaaaa;
    --light-color-dimmer-purple: #d850b7;
    --light-color-links: #2b2b2b;
    --light-color-normal: black;
    
    /* Line heights */
    --default-line-height: 1.5rem;
    --small-line-height: 1.35rem;
    
    /* Paragraph spacings */
    --default-paragraph-spacing: 1.2rem;
    --small-paragraph-spacing: 0.6rem;
    
    /* Toggle variables */
    --toggle-offset: 0.22rem;
    --toggle-diameter: 1.9rem;
}

/* fonts */

@font-face{
    font-family: "Arimo Regular Loaded";
    src: url("Arimo-Regular.woff2") format("woff2"),
         url("Arimo-Regular.woff") format("woff");
    font-display: swap;
}

@font-face{
    font-family: "Noto Naskh Arabic Regular Loaded";
    src: url("NotoNaskhArabic-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Noto Sans Bengali Regular Loaded";
    src: url("NotoSansBengali-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Noto Sans Devanagari Regular Loaded";
    src: url("NotoSansDevanagari-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Noto Sans Ethiopic Regular Loaded";
    src: url("NotoSansEthiopic-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Noto Sans SC Regular Loaded";
    src: url("NotoSansSC-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Noto Sans TC Regular Loaded";
    src: url("NotoSansTC-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Noto Sans Thai Regular Loaded";
    src: url("NotoSansThai-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face{
    font-family: "Tinos Regular Loaded";
    src: url("Tinos-Regular.woff2") format("woff2"),
         url("Tinos-Regular.woff") format("woff");
    font-display: swap;
}

/* * */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* a few tags */

body{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    font-size: 17px;
    line-height: var(--default-line-height);
}

p:not(:first-child){
    margin-top: var(--default-paragraph-spacing);
}

p + details{
    margin-top: var(--default-paragraph-spacing); /* this is needed because details may appear between paragraphs, e.g. threat-library/techniques/physical-violence.html */
}

a{
    color: black;
    text-decoration: none;
}

input, select, button{
   font-family: inherit;
   font-size: inherit;
}

table{
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    border-collapse: collapse;
}

table, th, td{
    border: 1px solid var(--light-border-color);
}

th, td{
    padding: .6rem;
    vertical-align: top;
}

th{
    text-align: start;
    color: var(--light-color-dim);
    font-weight: normal;
}

sup{
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
    bottom: 1ex;
}

hr{
	width: 30%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
	border: 1px solid var(--light-border-color);
}

blockquote{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    padding-left: 1rem;
    font-size: 0.95rem;
    line-height: var(--small-line-height);
    border-left: 1px solid var(--light-border-color);
}

/* language-specific classes applied to the body element */

.lang_headings_are_not_bold_body h1, .lang_headings_are_not_bold_body h2, .lang_headings_are_not_bold_body h3, .lang_headings_are_not_bold_body h4, .lang_headings_are_not_bold_body h5, .lang_headings_are_not_bold_body h6{
    font-weight: normal;
}

.lang_headings_are_bold_body h1, .lang_headings_are_bold_body h2, .lang_headings_are_bold_body h3, .lang_headings_are_bold_body h4, .lang_headings_are_bold_body h5, .lang_headings_are_bold_body h6{
    font-weight: bold;
}

.lang_bold_is_bold_body b, .lang_bold_is_bold_body strong{
    font-weight: bold;
    text-decoration: none;
}

.lang_bold_is_underlined_body b, .lang_bold_is_underlined_body strong{
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.lang_italics_are_italics_body i{
    font-style: italic;
}

.lang_italics_are_not_italics_body i{
    font-style: normal;
}

/* language-specific classes applied to other elements, must be exactly the same as the ones above but without "_body" at the end of classes */

.lang_headings_are_bold h1, .lang_headings_are_bold h2, .lang_headings_are_bold h3, .lang_headings_are_bold h4, .lang_headings_are_bold h5, .lang_headings_are_bold h6{
    font-weight: bold;
}

.lang_headings_are_not_bold h1, .lang_headings_are_not_bold h2, .lang_headings_are_not_bold h3, .lang_headings_are_not_bold h4, .lang_headings_are_not_bold h5, .lang_headings_are_not_bold h6{
    font-weight: normal;
}

.lang_bold_is_bold b, .lang_bold_is_bold strong{
    font-weight: bold;
    text-decoration: none;
}

.lang_bold_is_underlined b, .lang_bold_is_underlined strong{
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.lang_italics_are_italics i{
    font-style: italic;
}

.lang_italics_are_not_italics i{
    font-style: normal;
}

/* font classes */

.font_arabic{
    font-family:
        "Noto Naskh Arabic", /* for arabic characters */
        "Tinos", /* for latin characters in arabic text */
        "Tinos Regular Loaded", /* fallback */
        "Noto Naskh Arabic Regular Loaded", /* fallback */
        serif; /* fallback */
}

.font_bengali{
    font-family:
        "Noto Sans Bengali", /* for bengali characters */
        "Noto Sans Devanagari", /* for devanagari characters */
        "Arimo Regular Loaded", /* for latin characters in bengali text */
        "Arimo", /* fallback */
        "Noto Sans Bengali Regular Loaded", /* fallback */
        "Noto Sans Devanagari Regular Loaded", /* fallback */
        sans-serif; /* fallback */
}

.font_ethiopic{
    font-family:
        "Noto Sans Ethiopic", /* for ethiopic characters */
        "Arimo Regular Loaded", /* for latin characters in ethiopic text */
        "Arimo", /* fallback */
        "Noto Sans Ethiopic Regular Loaded", /* fallback */
        sans-serif; /* fallback */
}

.font_latin{
    font-family:
        "Arimo Regular Loaded", /* for latin characters, loaded from a file to prioritize using the regular typeface for bold text as it looks better */
        "Arimo", /* fallback */
        sans-serif; /* fallback */
}

.font_simplified_chinese{
    font-family:
        "Noto Sans SC", /* for Simplified Chinese characters and latin characters in Simplified Chinese text */
        "Noto Sans SC Regular Loaded", /* fallback */
        sans-serif; /* fallback */
}

.font_traditional_chinese{
    font-family:
        "Noto Sans TC", /* for Traditional Chinese characters and latin characters in Traditional Chinese text */
        "Noto Sans TC Regular Loaded", /* fallback */
        sans-serif; /* fallback */
}

.font_thai{
    font-family:
        "Noto Sans Thai", /* for thai characters */
        "Arimo Regular Loaded", /* for latin characters in thai text */
        "Arimo", /* fallback */
        "Noto Sans Thai Regular Loaded", /* fallback */
        sans-serif; /* fallback */
}

/* figures */

figure{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

figure img{
    display: block;
    width: 100%;
}

.figure_size_small{
    max-width: 40%;
}

.figure_size_default{
    max-width: 70%;
}

.figure_size_large{
    max-width: 90%;
}

.figure_size_small img{
    max-height: 60vh;
}

.figure_size_default img{
    max-height: 70vh;
}

.figure_size_large img{
    max-height: 80vh;
}

.figure_position_center{
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.figure_position_left, .figure_position_right{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--light-color-dimmer);
}

.figure_position_left{
    float: left;
    margin-right: 1.2rem;
}

.figure_position_right{
    float: right;
    margin-left: 1.2rem;
}

figure figcaption{
    display: block;
    width: 100%;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.95rem;
    line-height: var(--small-line-height);
}

figure figcaption p:not(:first-child){
    margin-top: var(--small-paragraph-spacing);
}

figure figcaption p:not(:last-child){
    margin-bottom: var(--small-paragraph-spacing);
}

figure figcaption.figure_caption_centered{
    text-align: center;
    text-wrap: balance;
}

/* headings */

h1,h2,h3,h4,h5,h6{
    text-wrap: balance;
}

h2{
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    text-align: center;
    clear: both;
}

h3{
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    font-size: 1.3rem;
    line-height: 1.6rem;
    clear: both;
}

h4{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-style: italic;
    clear: both;
}

.main_section_with_chapters h2{
    margin-top: 3.5rem;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    line-height: 3rem;
    text-align: center;
}

.main_section_with_chapters h3{
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
}

.main_section_with_chapters h4{
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    font-size: 1.3rem;
    line-height: 1.6rem;
    font-style: italic;
}

.main_section_with_chapters h5{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.main_section_with_deep_chapters h2{
    margin-top: 4rem;
    margin-bottom: 2.4rem;
    font-size: 3rem;
    line-height: 3.5rem;
    text-align: center;
}

.main_section_with_deep_chapters h3{
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    font-size: 2.2rem;
    line-height: 2.6rem;
}

.main_section_with_deep_chapters h4{
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-style: italic;
}

.main_section_with_deep_chapters h5{
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    font-size: 1.3rem;
    line-height: 1.6rem;
}

.main_section_with_deep_chapters h6{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    text-decoration: underline;
}

/* lists */

ul, ol{
    padding-inline-start: 2rem;
    list-style-position: inside;
}

li:not(:last-child), li:only-child{
    margin-top: 0.4rem;
}

li:not(:last-child){
    margin-bottom: 0.4rem;
}

/* common classes */

.centered_contact{
    text-align: center;
}

.javascript_enabled{
    display: none;
}

.blockquote_attribution{
    text-align: end;
    text-wrap: balance;
}

.paragraph_title{
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 1.1em;
    font-weight: bold;
    text-wrap: balance;
}

.inline_code{
    white-space: pre;
    font-family: monospace;
    font-size: 0.85em;
    background-color: var(--light-background-inline-code);
}

/* tight text */

.tight_text{
    line-height: 1.4rem;
}

/* tight paragraphs */

.tight_paragraphs p:not(:first-child){
    margin-top: var(--small-paragraph-spacing);
}

.tight_paragraphs li{
    margin-top: 0;
    margin-bottom: 0;
}

/* tight headings */

.tight_headings h2{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.tight_headings h3{
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

.tight_headings h4{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* spoilers */

details.spoiler summary{
  display: inline;
  cursor: pointer;
}

details.spoiler summary::after{
    content: "hidden content";
    background-color: black;
}

details[open].spoiler summary::after{
    display: none;
}

/* references */

.references_container .reference:not(:first-child){
    margin-top: var(--default-paragraph-spacing);
}

.references_container .reference:not(:last-child){
    margin-bottom: var(--default-paragraph-spacing);
}

.reference_content{
    overflow-wrap: anywhere;
}

.reference_content > p:first-child{
    display: inline;
}

.reference:target{
    background: linear-gradient(150deg, var(--light-background-color-highlight), white 200px, white);
}

/* footnotes */

.footnotes_sidebar{
    margin-left: 1rem;
    padding-left: 1rem;
    font-size: 0.95rem;
}

/* boxes */

.box{
    margin: 2rem;
    padding: 1rem;
    border: 1px solid var(--light-border-color);
    border-radius: .5rem;
}

h1+.box,
h2+.box,
h3+.box,
h4+.box,
h5+.box,
h6+.box,
.box > *:first-child{
    margin-top: 0;
}

/* tooltips */

.tooltip{
    display: block;
    position: relative;
    font-style: normal;
}

.tooltip_inline{
    display: inline;
    cursor: default;
}

.tooltip_question_mark{
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid black;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
    line-height: 1.1rem;
}

.tooltip_text{
    display: block;
    visibility: hidden;
    position: absolute;
    width: 200px;
    padding: .5rem;
    border: 1px solid var(--light-border-color);
    background-color: var(--light-background-color-white);
    font-size: 0.9rem;
    line-height: var(--small-line-height);
    left: 100%;
    top: 0;
}

.tooltip_inline > .tooltip_text{
    left: calc(100% + 0.5em);
    top: -0.2em;
}

.tooltip:hover .tooltip_text{
    visibility: visible;
}

.tooltip > .tooltip_question_mark > em,
.tooltip > .tooltip_text > em{
    font-style: normal;
}

/* toggles */

.toggle_container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  cursor: pointer;
}

.toggle_input{
  /* hide the toggle input (we can't use "display: none" because it would break navigation using the Tab key) */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle_slider{
  position: relative;
  width: calc(var(--toggle-diameter) * 2 - var(--toggle-offset) * 2);
  height: calc(var(--toggle-diameter) - var(--toggle-offset) * 2);
  box-sizing: content-box;
  border: 1px solid var(--light-color-dimmer);
  border-radius: 100vw;
  background-color: var(--light-background-color-white);
  transition: 250ms;
}

.toggle_slider::before{
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--toggle-offset));
  width: var(--toggle-diameter);
  height: var(--toggle-diameter);
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid var(--light-color-dimmer);
  transform: translate(0, -50%);
  background-color: var(--light-background-color-white);
  transition: inherit;
}

@media (prefers-reduced-motion: reduce){
  .toggle_slider{
    transition-duration: 0ms;
  }
}

.toggle_input:checked + .toggle_slider{
  background-color: var(--light-color-dimmer-purple);
}

.toggle_input:checked + .toggle_slider::before{
  transform: translate(100%, -50%);
}

/* typst snippet images */

.typst_snippet_image{
    vertical-align: middle;
}

/* icons */

.icon_before_text{
    width: 1.5em;
    height: 1.5em;
    margin-top: 0.1em;
    margin-inline-end: 0.4em;
}

.icon_before_text_date{
    position: relative;
    bottom: 0.2em;
}

/* add padding to top-level containers */

#navbar, #below_navbar, .main_section, #footer{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* limit the width of content containers */

#navbar_content, #below_navbar_content, #footer_content{
    margin-right: auto;
    margin-left: auto;
    max-width: var(--website-width);
}

/* navbar */

#navbar{
    background-color: var(--dark-background-color-grey);
}

#navbar_content{
    display: flex;
    flex-direction: row;
    height: 3.5rem;
    font-size: 1.2rem;
}

#navbar_logo{
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
    padding-right: 0.8rem;
    height: 3.5rem;
}

#navbar_logo_image{
    height: 100%;
}

#navbar_menu_content{
    display: flex;
    flex-direction: row;
    height: 100%;
}

#navbar_menu_link{
    display: none;
}

#navbar_menu_link_content{
    cursor: default;
}

#navbar_right_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
}

#navbar_languages_wrapper{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
}

#navbar_languages{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    align-self: stretch;
    height: 100%;
}

#navbar_languages:hover{
    width: 100%;
}

#navbar_languages_link{
    display: flex;
}

#navbar_languages_link_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: default;
}

#navbar_languages:hover #navbar_languages_link{
    background-color: var(--dark-background-color-purple-variation-light);
}

/* This is separate from the rest to ensure compatibility with browsers who don't know :focus-within */
#navbar_languages:focus-within #navbar_languages_link{
    background-color: var(--dark-background-color-purple-variation-light);
}

#navbar_languages:hover #navbar_languages_link_content{
    color: var(--dark-color-normal);
}

/* This is separate from the rest to ensure compatibility with browsers who don't know :focus-within */
#navbar_languages:focus-within #navbar_languages_link_content{
    color: var(--dark-color-normal);
}

#navbar_languages_content{
    display: none;
    position: absolute;
    height: auto;
    max-width: 100%;
    top: 100%;
    right: 0;
    background-color: var(--dark-background-color-grey);
}

#navbar_languages:hover > #navbar_languages_content,
#navbar_languages_content:hover{
    display: flex;
    flex-direction: column;
}

/* This is separate from the rest to ensure compatibility with browsers who don't know :focus-within */
#navbar_languages:focus-within > #navbar_languages_content{
    display: flex;
    flex-direction: column;
}

.navbar_button_selected,
.navbar_button_unselected{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.navbar_button_content{
    color: var(--dark-color-links);
    white-space: nowrap;
}

.navbar_button_selected{
    background-color: var(--dark-background-color-purple-variation-light);
}

.navbar_button_selected .navbar_button_content{
    color: var(--dark-color-normal);
}

.navbar_button_unselected:hover,
.navbar_button_unselected:focus{
    background-color: var(--dark-background-color-purple-variation-light);
}

.navbar_button_unselected:hover .navbar_button_content,
.navbar_button_unselected:focus .navbar_button_content{
    color: var(--dark-color-normal);
}

#navbar_languages .navbar_button_selected,
#navbar_languages .navbar_button_unselected{
    padding-top: .5rem;
    padding-bottom: .5rem;
}

@media screen and (max-width: 800px){
    #navbar_menu{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        align-self: stretch;
        position: relative;
    }
    
    #navbar_menu:hover{
        width: 100%;
    }
    
    #navbar_menu_link{
        display: flex;
    }
    
    #navbar_menu:hover #navbar_menu_link{
        background-color: var(--dark-background-color-purple-variation-light);
    }
    
    /* This is separate from the rest to ensure compatibility with browsers who don't know :focus-within */
    #navbar_menu:focus-within #navbar_menu_link{
        background-color: var(--dark-background-color-purple-variation-light);
    }
    
    #navbar_menu:hover #navbar_menu_link_content{
        color: var(--dark-color-normal);
    }
    
    /* This is separate from the rest to ensure compatibility with browsers who don't know :focus-within */
    #navbar_menu:focus-within #navbar_menu_link_content{
        color: var(--dark-color-normal);
    }
    
    #navbar_menu_content{
        display: none;
        position: absolute;
        height: auto;
        top: 100%;
        left: 0;
        background-color: var(--dark-background-color-grey);
    }
    
    #navbar_menu:hover > #navbar_menu_content,
    #navbar_menu_content:hover{
        display: flex;
        flex-direction: column;
    }
    
    /* This is separate from the rest to ensure compatibility with browsers who don't know :focus-within */
    #navbar_menu:focus-within > #navbar_menu_content{
        display: flex;
        flex-direction: column;
    }
    
    #navbar_menu .navbar_button_selected,
    #navbar_menu .navbar_button_unselected{
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

#navbar_rss_link{
    display: flex;
}

#navbar_rss_icon{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
}

/* below navbar */

#below_navbar{
    background: var(--dark-background-color-purple);
}

/* below navbar content */

#below_navbar_content{
    padding-top: 1rem;
    padding-bottom: 1.2rem;
    color: var(--dark-color-normal);
    text-align: center;
}

#below_navbar_content h1{
    display: block;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 3.2rem;
    line-height: 4rem;
}

#below_navbar_content .below_navbar_subtitle below_navbar_subsubtitle{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
}

#below_navbar_content .below_navbar_subtitle{
    margin-top: 0.5rem;
    font-size: 1.5rem;
}

#below_navbar_content .below_navbar_subsubtitle{
    margin-top: 0.5rem;
    font-size: 1.3rem;
    font-style: italic;
}

#below_navbar_content a{
    color: var(--dark-color-links);
}

#below_navbar_content a:hover,
#below_navbar_content a:focus{
    color: var(--dark-color-normal);
}

#below_navbar_content .below_navbar_links{
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: center;
}

#below_navbar_introduction{
    margin-top: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    max-width: 945px;
    text-wrap: balance;
}

#below_navbar_introduction strong{
    font-weight: normal;
    text-decoration: none;
    color: var(--dark-color-marked);
}

#introduction{
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    max-width: 935px;
}

#introduction_logo{
    margin-bottom: 0.5rem;
    height: 7rem;
}

#introduction strong{
    font-weight: normal;
    text-decoration: none;
    color: var(--dark-color-marked);
}

#below_navbar_contact_button{
    display: inline-block;
    margin-top: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 7px;
    background-color: var(--dark-background-color-grey);
    cursor: pointer;
    user-select: none;
}

#below_navbar_contact_button_text{
	margin-top: 0.8rem;
}

/* main section */

.main_section{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex: 1;
    background-color: var(--light-background-color-white);
}

.main_section_grey_background{
    background-color: var(--light-background-color-grey);
}

/* main section column */

.main_section_column{
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.main_section_column_with_breadcrumb{
    padding-top: 0;
}

.main_section_column a:not(.unstyled_link){
    color: var(--light-color-links);
    border-bottom: 2px dotted var(--light-color-dimmer);
}

.main_section_column a:not(.unstyled_link):hover,
.main_section_column a:not(.unstyled_link):focus{
    color: var(--light-color-normal);
    border-bottom: 2px dotted var(--light-color-dim-purple);
}

.main_section_column_tight{
    flex-shrink: 0;
    width: 100%;
    max-width: var(--tight-column-width);
}

.main_section_column_left_sidebar_next_to_tight,
.main_section_column_right_sidebar_next_to_tight{
    width: calc((var(--website-width) - var(--tight-column-width)) / 2);
}

/* footer */

#footer{
    background-color: var(--dark-background-color-grey);
}

#footer_content{
    display: flex;
    flex-direction: column;
    color: var(--dark-color-normal);
    font-size: .95rem;
    line-height: var(--small-line-height);
}

#footer_content a{
    color: var(--dark-color-links);
}

#footer_content a:hover,
#footer_content a:focus{
    color: var(--dark-color-normal);
}

.footer_line{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 1.5rem;
}

.footer_line:last-of-type{
    margin-bottom: 1.5rem;
}

.footer_column{
	display: flex;
	flex-direction: column;
    margin-left: 2rem;
    margin-right: 2rem;
}

.footer_column_title{
    margin-bottom: 0.25rem;
}

/* breadcrumb */

.breadcrumb{
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* changelog */

.changelog_item:not(:first-child){
    margin-top: 1rem;
}

.changelog_item_date{
    font-size: 0.85rem;
}

.font_simplified_chinese .changelog_item_date{
    margin-bottom: 0.25rem;
}

/* back to top button */

#back_to_top_container{
    position: absolute;
    height: max(calc(100% - 200vh), 100vh);
    left: 1rem;
    bottom: 0;
    pointer-events: none;
}

#back_to_top_link{
    position: sticky;
    display: block;
    top: calc(100vh - 4rem);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.2rem;
    padding-bottom: 0.8rem;
    border: 1px solid var(--light-border-color);
    border-radius: 2rem;
    background-color: var(--light-background-color-white);
    pointer-events: all;
    cursor: pointer;
}

#back_to_top_icon{
    pointer-events: none;
}

#back_to_top_icon::before {
	display: block;
	width: 0.7em;
	height: 0.7em;
	border-style: solid;
	border-width: 0.2em 0.2em 0 0;
	transform: rotate(-45deg);
	content: '';
}

/* table of contents */

.toc_inline{
    display: block;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: var(--default-paragraph-spacing);
    margin-bottom: var(--default-paragraph-spacing);
    padding: 1.5rem;
    border: 1px solid var(--light-border-color);
    border-radius: .5rem;
}

.toc_sidebar{
    display: none;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    margin-right: 2rem;
    padding-right: 1rem;
    font-size: 0.95rem;
    overflow-y: scroll;
}

@media screen and (min-width: 1250px){ /* this value should match the value in footnotes.js, so that both the sidebar table of contents and the sidebar footnotes appear at the same resolution */
    .toc_inline{
        display: none;
    }
    .toc_sidebar{
        display: block;
    }
}

.toc_title{
    margin-bottom: 1rem;
    font-weight: bold;
}

.toc_inline .toc_title{
    font-size: 1.4rem;
}

.toc_sidebar .toc_title{
    font-size: 1.2rem;
    cursor: pointer;
}

.toc ul{
    list-style-type: none;
    padding-inline-start: 0;
}

.toc ul ul{
    padding-inline-start: 1.5rem;
}

.toc li{
    margin-top: 0.5;
    margin-bottom: 0.5;
    line-height: 1.2rem;
}

.toc_inline li{
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.toc_sidebar li{
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.toc_sidebar a:not(.unstyled_link){
    border-bottom: none;
}

.toc .toc_highlighted:not(.unstyled_link),
.toc .toc_highlighted:not(.unstyled_link):hover{
    border-bottom: 3px solid var(--light-color-dimmer-purple);
}

.toc_author{
    padding-top: 0.25rem;
    padding-left: 1.5rem;
    font-style: italic;
}