/* variables */

:root{
    /* 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-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-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;
}

/* font-face */

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

/* * */

*{
    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-family: "Arimo", sans-serif;
    font-size: 17px;
    line-height: var(--default-line-height);
}

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

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

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;
    overflow-wrap: anywhere;
}

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

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

th{
    text-align: left;
    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);
}

/* figures */

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

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

figure.figure_size_small{
    max-width: 40%;
}

figure.figure_size_default{
    max-width: 70%;
}

figure.figure_size_large{
    max-width: 90%;
}

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

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

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

figure figcaption{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    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);
}

/* headings */

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

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

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

.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){
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

/* common classes */

.centered_contact{
    text-align: center;
}

.javascript_enabled{
    display: none;
}

.blockquote_attribution{
    text-align: right;
}

/* tight text */

.tight_text{
    line-height: 1.4rem;
}

/* tight paragraphs */

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

.tight_paragraphs p:not(:last-child){
    margin-bottom: 0;
}

.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;
}

/* table of contents */

.toc{
    margin-left: 3rem;
    margin-right: 3rem;
    padding: 1.5rem;
    border: 1px solid var(--light-border-color);
    border-radius: .5rem;
}

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

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

.toc li:not(:last-child){
    margin-top: 0;
    margin-bottom: 0;
}

/* 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_section .reference:not(:first-child){
    margin-top: var(--default-paragraph-spacing);
}

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

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

.reference:target > .reference_content{
    background-color: var(--light-background-color-highlight);
}

/* tooltips */

.tooltip{
    display: block;
    position: relative;
}

.tooltip_question_mark{
    width: 1rem;
    height: 1rem;
    border: 1px solid black;
    border-radius: 50%;
    font-size: 0.8rem;
    text-align: center;
}

.tooltip_text{
    visibility: hidden;
    position: absolute;
}

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

/* 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, .main_section_content, #footer_content{
    margin-right: auto;
    margin-left: auto;
    max-width: 1400px;
}

/* 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_right_content{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}

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

#navbar_languages{
    height: 100%;
}

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

.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_menu_link,
#navbar_languages_link{
    display: none;
}

@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;
    }
}

@media screen and (max-width: 1000px){
    #navbar_languages_wrapper{
        position: relative;
    }
    
    #navbar_languages{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-end;
        align-self: stretch;
    }
    
    #navbar_languages:hover{
        width: 100%;
    }   
    
    #navbar_languages_link{
        display: flex;
    }
    
    #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: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    /* 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: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    #navbar_languages .navbar_button_selected,
    #navbar_languages .navbar_button_unselected{
        padding-top: .5rem;
        padding-bottom: .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_content .below_navbar_highlighted_links{
    font-size: 1.8rem;
    font-weight: bold;
}

#below_navbar_content .below_navbar_highlighted_links a{
    color: var(--dark-color-marked);
}

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

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

#below_navbar_introduction strong{
    font-weight: normal;
    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;
    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{
    flex: 1;
    background-color: var(--light-background-color-white);
}

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

/* main section content */

.main_section_content{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.main_section_content_with_breadcrumb{
    padding-top: 0;
}

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

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

.main_section_tight_content{
    max-width: 720px;
}

/* footer */

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

#footer_content{
    padding: 0.7rem;
    color: var(--dark-color-normal);
    text-align: center;
}

#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;
}

.footer_title_line:not(:first-child){
	margin-top: .5rem;
}

.footer_separator{
    white-space: pre;
}

@media screen and (max-width: 1000px){
	.footer_line{
		flex-direction: column;
	}
    
    .footer_element{
        margin: auto;
    }

    .footer_separator{
		display: none;
    }
}

/* 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-style: italic;
}

/* 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: '';
}