body {
	background-color: #000;
}
#header {
	height: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
	position: sticky;
	top: 0;
}

#header h2{
	font-family: sans-serif;
}

#window-port {
    display: flex;

    height: 100%; /* 100% previously (make color ribbon for center...  */
	width: 100%;

    flex-direction: column;
	justify-content: center;
    flex-wrap: nowrap;
    align-items: center;

/*    width: 80vw; */
/*    margin-right: auto;
    margin-left: 1em; */
    
	color: #fff;
    background-color: #000;
    text-align: center;
	font-family: MxPlus_ToshibaTxL2_8x16, Arial;
}

.pic-and-links {
	display: flex;
	align-items: flex-end;
}

/* make a flex container in the center of menu-list section for the main categories.
A click on each spawns the dropdown sequence, each of which is an offset grid container (?) or inline */

/* set menu links to black w/o underline */
a {
    color: #fff;
    text-decoration: none;
}


.link-icons {
    width: 5em;
    flex-direction: column;
    align-self: flex-end;
    padding: 10px;
}

.link-icons a {
    font-size: 2em;
    padding: 10px;
}

.header-image {
}

.fit-picture {
    align-self: flex-end;
    width: 30em;
/*    width: 30em;
    height: 30em; */
    border-radius: 3px;
}

/* transition to color, then slow fade to white*/
@keyframes hover-colors {
    0%{color; #fff;}
    2%{color: #68c7fd;}
    19%{color: #242091;}
    35%{color: #0000;}
    100%{color: #0000;}
}

a:hover {
    animation-name: hover-colors;
    animation-duration: 25s;
    animation-delay: -0.0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* transition: 1.7s; */
    /* color: white; */
}

div {
}

.bio-text {
    text-align: center;
    padding: -1em;
flex-basis: 30%;
    max-width: 60em;  
    font-family: JetBrains Mono, Fira Code, monospace;
    font-size: 1em;
	color: #fff;
}

.hanging {
/*	padding-right: 10em;
	text-indent: -10em; */
}

.concerts {
    text-align: left;
    flex-basis:30%;
    order: -1;
    font-family: JetBrains Mono, Fira Code, monospace;
/*    font-family: Garamond, EB Garamond, serif; */
    font-size: .8em;
	height: 87%;
	overflow:scroll;
	color: #fff;
	scrollbar-width: none;
}

.concerts h1 {
}

fade {
    position: absolute;
    bottom: 0px;

    display: block;
  
    width: 30%;
    height: 200px;
  
    background-image: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0), 
        rgba(255, 255, 255, 1)
    100%);
}