body * {
	display:block;
	font-family: sans-serif;
}

body { margin: 0px }

#main {
	display: flex;
	flex-direction: column;
	grid-gap: 5px;
}

.header-container { grid-area: 'header'; }
.search-container { grid-area: 'search'  }
.list-container   { grid-area: 'main'    }

.header-container *, .search-container * {
	display: inline;
}

.header-container{
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid black;
	padding-bottom: 5px;
	padding-top: 5px;
}

.search-container {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid black;
	vertical-align: middle;
	padding-top: 5px;
	padding-bottom: 5px;
}

.search-container input {
	border: 1px solid black;
	width: 50%;
	margin-right: 20px;
	font-size: 13px;
	padding-left: 10px;
}

.search-container input:focus {
	outline: 1px solid black;
}

.list-container {
	display: flex; 
	flex-direction: column;
	padding-top: 5px;
}

.list-item {
	display: flex;
	justify-content: space-around;
	vertical-align: middle;
}

.list-item + .list-item {  margin-top: 8px;     }

.list-item b, .list-item i {
	margin-top: auto;
	margin-bottom: auto;
	text-align:center;
}

.list-item img { padding-right: 5px } 

.content-gif { height: auto; }

.list-item b { width: 100px; font-weight: normal; font-size: 20px; }
.list-item i { width: 100px; word-wrap: break-word; color: rgb(61, 61, 61)  }

.new-tab-symbol { cursor: pointer }
.fas { font-size: 42px; } .far { font-size: 42px }

.header-container span { margin-top: auto; margin-bottom: auto; }

.selected-tab { color: goldenrod;   }

.sticky { position: sticky; top: 0; background-color:white; }
.clickable { cursor: pointer; }