main {
    display: flex;
    flex-direction: column;
}

#header {
  background: #2452a1;
}

#hero .hero-container {
	color: #000;
	padding: 5em 20em 5em 20em;
}

.content-container {
	padding-top: 1em;
}

.navbar li {
  margin-left: 1em;
  font-weight: 700;  
}

/*********************************
6. Input
*********************************/
.input
{
	width: 50%;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 125%;
/*	padding: 0 15vh 0 15vh	*/
}

.bushou
{
	width: 100%;
	padding-top: 50px;
	padding-bottom: 25px;
	font-size: 125%;
}

.browse
{
	width: 100%;
	padding-top: 25px;
	padding-bottom: 25px;
	font-size: 125%;
}

/*********************************
    Query
*********************************/

.word-item
{
	list-style-type: none;
	margin-left: 20px;
}

.query
{
	width: 70%;
	margin-left: 250px;
	margin-right: 250px;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
}

.query-record
{
	padding-top: var(--top-bar-height);
}

.phonetic {
	font-family: "Arial Phonetic";
}

:root {
    --footer-height: 180px;
}

.visual td  {
	padding: 0.5em;
}