/** Containers **/

html, body
{
    margin: 10px;
    height: 100%;
}

.root_container
{
    display:         flex;
    justify-content: center;
    flex-direction:  column;
    gap:             20px;
    align-items:     center;
    width:           100%;
    min-height:      100vh;
}

.contents_main
{
    display:        flex;
    flex-direction: column;
    gap:            20px;
    color:        rgba(0, 0, 0, 0.8);
}

.section
{
    display:        flex;
    flex-direction: row;
    flex-wrap:      nowrap;
    box-sizing:     border-box;
}

.section_c0
{
    flex-grow:   1;
    flex-shrink: 1;
    flex-basis:  30%;
    min-width:   100px;
    max-width:   200px;

    text-align:  right;
    font-family: 'Noto Serif', serif;
    font-style:  italic;
    font-size:   20px;
    line-height: 1.3;
}

.section_c1
{
    width: 40px;
}

.section_c1_accent
{
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    width:     40px;
    max-width: 40px;
    min-width: 40px;
}

.section_c2
{
    flex:    1 1 100%;
}

.group_c12
{
    display: flex;

    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 450px;
}

.sectionQuote
{
    display:        flex;
    flex-direction: row;

    border-radius:  20px;
    background-color: rgba(0, 0, 0, 0.05);

    padding:        10px;
}

/** Elements **/

.accentBar
{
    height: 100%;
    width: 8px;
    background-color: #B5BB74;
}

/** Text **/

.textCaption
{
    font-family: 'Noto Serif', serif;
    font-style:  italic;
    font-size:   20px;
    line-height: 1.3;
}

.textSubject
{
    font-family: 'Noto Serif', serif;
    font-style:  italic;
    font-size:   18px;
    line-height: 1.3;
}

.textBody
{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   18px;
    font-weight: 400;
    line-height: 1.2;
}

.textBodyBold
{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   18px;
    font-weight: 500;
    line-height: 1.2;
}

.textBodyItalic
{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   18px;
    font-weight: 400;
    font-style:  italic;
    line-height: 1.2;
}

.textQuote
{
    flex-grow:     1;
    padding-left:  10px;
    padding-right: 40px;
    line-height:   1.15;
}

.textContacts
{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   17px;
    font-weight: 500;
    line-height: 1.3;
}

/***************/
/** Overrides **/
/***************/

@media (max-width: 700px)
{
    /** Containers **/

    .contents_main
    {
        width: 100%;
    }

    .section
    {
        flex-wrap: wrap;
    }

    .section_c1_accent
    {
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        flex-direction: column;
        align-items: start;
        width:     24px;
        max-width: 24px;
        min-width: 24px;
    }
    
    .group_c12
    {
        min-width: unset;
        max-width: unset;
    }

    .accentBar
    {
        width: 8px;
    }

    /** Text **/

    .textBody
    {
        font-size:   16px;
    }

    .textBodyBold
    {
        font-size:   16px;
        font-weight: 500;
    }

    .textBodyItalic
    {
        font-size:   16px;
        font-style:  italic;
    }

    .textCaption
    {
        font-size: 24px;
    }

    .section_c0
    {
        flex: 1 1 100%;
        max-width:  unset;
        text-align: left;
        padding-bottom: 10px;
    }

    .section_c1
    {
        display: none;
    }

    .section_c2
    {
        flex: 1 1 100%;
        max-width: unset;
    }
}