html {
    color: #000;
    background: #fff;
}

body {
    max-width: 17cm;
    margin: 1em auto;
}

/* Language */

body *[lang="de"],
body *[lang="en"],
body *[lang="fr"] {
    display: none
}

html[lang="de"] *[lang="de"],
html[lang="en"] *[lang="en"],
html[lang="fr"] *[lang="fr"] {
    display: revert
}

#language-selector {
    position: fixed;
    top: 1em;
    right: 1em;
}

/* Material Icons */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.with-mat-icon,
.tools {
    display: flex;
    vertical-align: middle;
    align-items: center;
    gap: 0.25em;
}

.tools {
    font-size: 0.7em;
}

/* Content */

html {
    font-size: 13pt;
    font-family: sans-serif;
}

.selfie {
    display: block;
    border: 0em solid transparent;
    border-radius: 50%;
    max-width: min(100%, 20em);
    margin: 1em auto;
    box-shadow: .3em .3em .3em #ccc;
}

dl {
    font-size: x-small;
    display: flex;
    justify-content: space-between;
}

/* Print rules */

@media print {
    html {
        font-size: 12pt;
    }

    @page {
        margin: 2.5cm 2cm
    }

    header {
        page-break-inside: avoid;
    }

    #language-selector {
        display: none;
    }
}

/* Section headers */

section+section {
    margin-top: 1em;
}

section>h2 {
    margin-top: 0;
}

period {
    clear: right;
    font-variant: small-caps;
    display: block;
    white-space: nowrap;
}

role {
    display: block;
    clear: right;
    text-align: right;
    font-style: italic;
}

img {
    max-width: 100%;
    display: inline;
    margin: auto;
}

.reference-icon {
    height: 2em;
    vertical-align: top;
}

/* Carousel layout */

.carousel {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    --blur-width: 80px;
    mask-image: linear-gradient(to right,
            transparent 0,
            black 40px,
            black calc(100% - var(--blur-width)),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            black 40px,
            black calc(100% - var(--blur-width)),
            transparent 100%);
}

.spacer {
    flex: 0 0 calc(var(--blur-width) / 2);
}

.carousel::-webkit-scrollbar {
    height: 0;
    display: none;
}

.card {
    flex: 0 0 auto;
    min-width: 220px;
    text-align: center;
    transition: transform 300ms ease, box-shadow 300ms ease;
    cursor: pointer;
    justify-content: center;
}

.card img {
    max-width: 90%;
}

.card:hover,
.card:active {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.card a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    width: 100%;
    padding: 1rem 0;
}

.card,
.tab,
.content {
    background: white;
    border: 0.1rem outset hsl(257, 100%, 90%);
    color: black;
    border-radius: 6px;
    box-sizing: border-box;
}

.tab,
.content {
    padding: 1rem;
}

.hidden-tab {
    display: none;
}

.content,
.social-network .card {
    background-color: hsl(257, 100%, 70%);
    border: 0.1rem outset hsl(257, 100%, 65%);
    color: white;
}

@media (max-width: 900px) {
    .card {
        min-width: 180px;
    }
}

@media (max-width: 600px) {
    .card {
        min-width: 140px;
    }
}

.social-network {
    display: flex;
    justify-content: space-between;
}

/* Logo */

.own-logo a {
    text-decoration: none;
    color: black;
}

.logo {
    font-family: Courier New, Courier, monospace;
    font-weight: 400;
    display: grid;
    grid-template-columns: min-content min-content;
    justify-content: center;
}

.logo-image {
    font-size: 180%;
    font-family: Trebuchet MS, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif;
    padding-right: 0.1em;
}

.logo {
    font-family: Courier New, Courier, monospace;
    font-weight: 400;
}

.logo span {
    background-color: transparent;
}

.logo-prenom,
.logo-surname {
    text-align: right;
    padding-right: .15em;
    border-right: thin solid;
}

.logo-soft,
.logo-ware {
    text-align: left;
    padding-left: .15em;
}

.logo-image {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.logo-prenom {
    grid-row: 1;
    grid-column: 2;
}

.logo-surname {
    grid-row: 2;
    grid-column: 2;
}

.logo-soft {
    grid-row: 1;
    grid-column: 3;
}

.logo-ware {
    grid-row: 2;
    grid-column: 3;
}