:root{
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;

    --sn_display_small: 600 2.25rem/1.33  "Noto Sans", sans-serif;

    --sn_title_large: 500 1.375rem/1.27  "Noto Sans", sans-serif;
    --sn_title_medium: 500 1rem/1.5  "Noto Sans", sans-serif;
    --sn_title_small: 500 0.875rem/1.43  "Noto Sans", sans-serif;

    --sn_body_large: 400 1rem/1.5  "Noto Sans", sans-serif;

    --neutral0: rgba(10, 10, 10, 1);
    --neutral30:rgba(102, 102, 102, 1);
    --neutral80:rgba(223, 223, 223, 1);
    --neutral90: rgba(241, 241, 241, 1);


    --orange40: rgba(215, 65, 18, 1);
    --orange90: rgba(255, 241, 230, 1);

    --primary50: rgba(255, 122, 14, 1);
}

*{
    /* outline: 1px orange solid; */
    font-family: sans-serif;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

nav{
    display: flex;
    width: 100%;
    height: 64px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1280px;
}

nav > img {
    padding-left: 65px;
}

#button_language_switch{
    height: 48px;
    font: var(--sn_title_small);
    color: var(--neutral0);
    padding: 16px;
    margin-right: 24px;
    border: solid 1px var(--neutral80);
    border-radius: 24px;
    display: flex;
    align-items: center;
}

#button_language_switch img{
    padding-left: 8px;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


section{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.section-title{
    font: var(--sn_display_small);
    color: var(--neutral0);
    margin: 16px;
}

.section-subtitle{
    font: var(--sn_title_medium);
    color: var(--neutral30);
    margin: 0 16px 16px 16px;
}