.mobile-header {visibility: collapse; height: 0px;}
@media (width<992px) {
    .mobile-header {visibility: visible; height: auto; background-image: linear-gradient(to right, #3d418b , #cfd0e2); font-weight: bold; font-size: 1.5rem; padding: 10px; color: white; text-align: center;}
    .normal-header {visibility: collapse}
}

.navbar {background-image: linear-gradient(to right, #3d418b , #cfd0e2);}
.navbar-nav .nav-link {color: white; font-weight: bold}
.navbar-nav .nav-link:hover {text-decoration: underline;}
.navbar-nav .nav-link.active {color: white; font-weight: bold;}

.card {width: 400px; max-width: 90%; margin: 0px 0px 20px 20px; box-shadow: 5px 5px 5px lightgray}
.card img {aspect-ratio: 4/3;}
.card-body {height: 0px; padding: 0px; min-height: fit-content}

.ico {width: 20px}

h1 {font-size: 14pt; font-weight: bold; color: darkblue; margin-bottom: 24px}
h2 {font-size: 11pt; font-weight: bold; margin-top: 20px; margin-bottom: 10px; color: darkblue}
p {margin-top: 10pt; margin-bottom: 10pt; }

.vcard {
    margin-bottom: 24px;
    margin-right: 24px;
    border: 1px solid lightblue;
    padding: 20px;
    border-radius: 10px;
    background-color: aliceblue;
}

.person {font-size: 11 pt; font-weight: bold}
.role {font-size: 10 pt; font-weight: bold; color: gray; margin-bottom: 10px; }
.em {font-weight: bold}