@font-face {
    font-family: 'Roboto Serif';
    font-style: italic;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(Roboto-Serif-Italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Serif';
    font-style: italic;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(Roboto-Serif-Italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Serif';
    font-style: italic;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(Roboto-Serif-Italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(Roboto-Serif.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(Roboto-Serif.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(Roboto-Serif.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --meta-factor: .8;
    --spec-factor: 1;
    --factor: calc(var(--meta-factor) * var(--spec-factor));
    font-size: calc(20px * var(--factor));
    --main-font-size: calc(20px * var(--factor));
    --h2-font-size: calc(22px * var(--factor));
    --element-width: calc(min(95vw, 520px) * var(--factor));
    --desc-top-bottom: calc(min(6vw, 36px) * var(--factor));
    --desc-left-right: calc(min(10vw, 60px) * var(--factor));
    --desc-line-height: calc(var(--main-font-size) * 1.6);
    --h2-line-height: calc(var(--h2-font-size) * 1.6);
    --desc-border-radius: calc(20px * var(--factor));
    --at-width: calc(28px * var(--factor));
    --hover-border: calc(6px * var(--factor));
    --lang-padding: calc(16px * var(--factor));
    --lang-width: calc(32px * var(--factor));
    --lang-height: calc(40px * var(--factor));
    --lang-border-radius: calc(5px * var(--factor));
    --portrait-width: calc(128px * var(--factor));
    --element-margin: min(7vw, 2.4rem);
    --p-margin: min(2vw, 1rem);
    --shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.2), 2px 3px 13px 0 rgba(0, 0, 0, 0.19);
}

@media (min-height: 1081px) {
    :root {
        --spec-factor: 1.1;
        --shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.2), 2px 3px 14px 0 rgba(0, 0, 0, 0.19);
    }
}

@media (min-height: 1441px) {
    :root {
        --spec-factor: 1.2;
        --shadow: 1px 3px 6px 0 rgba(0, 0, 0, 0.2), 2px 4px 16px 0 rgba(0, 0, 0, 0.19);
    }
}

body {
    background-color: rgb(206, 199, 195);
    background-image: linear-gradient(150deg, rgb(231, 224, 220), rgb(201, 194, 190));
    background-size: 100%;
    background-position: center;
    background-attachment: fixed;
}

.heading,
h2,
h3,
p {
    margin: 0px;
}

.heading {
    margin-bottom: var(--p-margin);
    width: 100%;
}

h2,
h3,
p,
.portrait,
.link {
    padding-left: var(--hover-border);
}

.info>h2,
.info>h3,
.info>p,
a>h3 {
    padding-left: 0px;
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: 600;
}

h3,
p {
    font-size: var(--main-font-size);
}

h3 {
    font-weight: 500;
    margin-top: var(--p-margin);
}

p {
    margin-top: calc(0.5 * var(--p-margin));
}

a {
    color: rgb(11, 164, 224);
    text-decoration: none;
}

.link:hover {
    padding-left: 0px;
    color: rgb(255, 255, 255);
    background-color: rgb(11, 164, 224);
    text-decoration: none;
    border: var(--hover-border) solid rgb(11, 164, 224);
    border-radius: var(--hover-border);
}

body>div {
    max-width: calc(var(--element-width) + var(--hover-border));
    margin: var(--element-margin) auto;
}

.lang-switch {
    max-width: var(--element-width);
    padding: 0px var(--desc-left-right);
}

.desc {
    font-family: 'Roboto Serif', serif;
    padding: var(--desc-top-bottom) var(--desc-left-right);
    padding-left: calc(var(--desc-left-right) - var(--hover-border));
    line-height: var(--desc-line-height);
    color: rgb(51, 51, 51);
    background-image: linear-gradient(150deg, rgb(255, 252, 250), rgb(246, 242, 240));
    border-radius: var(--desc-border-radius);
    box-shadow: var(--shadow);
}

.table {
    display: table;
}

.table>div {
    display: table-row;
}

.table>div>div {
    display: table-cell;
}

.lang {
    margin-left: auto;
}

.person>div>div {
    vertical-align: middle;
}

.lang>div>div,
.heading>div>div {
    vertical-align: top;
}

.lang>div>div {
    padding-left: var(--lang-padding);
}

.heading>div>div>img {
    height: calc(var(--h2-line-height) * 0.9);
    padding-top: calc(var(--h2-line-height) * 0.05);
    padding-left: var(--h2-line-height);
    float: right;
}

.lang-switch {
    text-align: right;
}

.info {
    padding-left: var(--desc-left-right);
}

.italic {
    font-style: italic;
}

.at {
    width: var(--at-width);
    vertical-align: middle;
}

.bar {
    color: rgb(11, 164, 224);
    font-weight: 800;
}

.portrait,
.portrait>img {
    width: var(--portrait-width);
}

.portrait>img {
    vertical-align: middle;
    border-radius: var(--desc-border-radius);
}

.active,
.inactive {
    width: var(--lang-width);
    height: var(--lang-height);
}

.active,
.inactive:hover {
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: var(--lang-width);
}

.active {
    background-image: url('svg/bar.svg');
}

.inactive:hover {
    background-image: url('svg/bar-white.svg');
}

.active>img,
.inactive>img {
    width: var(--lang-width);
    border-radius: var(--lang-border-radius);
}