body{
background-attachment: fixed;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: var(--bodybg);
}

.container{
width:85%;
margin:0 auto;
}

.basics{
display:flex;
flex-wrap:wrap;
justify-content: center;
gap:10px;
}

header{
text-align: center;
}

.context{
color:red;
cursor: help;
}




.intro, table, .portrait{
background:white;
border:1px solid black;
box-shadow:2px 2px 2px 0px black;
max-width:300px;
max-height:300px;
}

section{ padding:3px;}

.box{
border:1px solid black;
background:white;
padding:10px;
}

.intro{
overflow-y:auto;
padding:10px;
}

.info{
margin:10px;
}


.flex{
display:flex;
flex-wrap:wrap;
}

.mini{
display:inline-flex;
margin:3px;
padding:5px;
background: var(--container-bg);
border: var(--container-border);
}

.mini h3{
margin:0px;
border-bottom:1px solid black;
}


.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.portrait img{
max-width:300px;
max-height:300px;
object-fit: cover;
}


.outline{
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
color: white;
font-size: 2em;
z-index: 10;
}

table{
display:inline-block;
background-color: rgb(0, 0, 0);
color:white;
border:1px solid black;
vertical-align: bottom;
}


td:nth-child(even) {
background-color: wheat;
color:black;
padding:3px;
}


.gallery-item{
object-fit: contain;
height:100px;
}


.gallery img{
    margin: 0 auto 10px auto;
    max-height:200px;
    object-fit: cover;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.192);
}


.sources img{
max-height:100px;
max-width:100px;
margin:1px;
}

.source-icon{
border-radius:90%;
}

.dynamic{
max-height:150px;
max-width:150px;
}