/* --------------------------以下是大屏幕--------------------------- */
/* @media only screen and (min-width: 768px) */
@media (min-width:768px) {
	.container {
		font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	
	/* this is style for the logo and slogan */
	
	.logo {
		display: flex;
		justify-content: center;
	}

	.logoContainer {
		display: flex;
		justify-content: baseline;
	}

	.logoImage {
		width: 2em;
		height: 2em;
		margin-right: .8em;
		margin-top: .4em;
		border: 1px solid lightblue;
		border-radius: 5px;
	}

	.slogan {
		margin-top: .8em;
	}

	/* this is style for search bar */
	#search_logo {
		height: 2em;
		margin-right: 1.5em;
	}

	.searchTextField {
		height: 2em;
		width: 20em;
		border-radius: 5px;
		border: 1px solid lightblue;
	}

	#submitButton {
		height: 2.3em;
		border-radius: 5px;
		border: 1px solid lightblue;
		margin-left: 1.3em;
	}

	/* end of the search bar */

	.feedback {
		display: flex;
		justify-content: center;
		font-size:medium;
		padding-bottom: 2em;
		
	}

	.feedback>a {
		color: rgb(253, 0, 232);
		text-decoration: underline;
		font-weight: bold;
	}

	.headBox{
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 4em;
		padding-bottom: 2em;
	}
	.container {
		margin-top: 8%;
		display:flex ;
		flex-direction: column;
		justify-content: stretch;
		text-align: left;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	/* start of the lists */

	.centerBox {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.listBox {
		width: 10em;
		border: 1px solid rgb(196, 196, 196);
		padding-bottom: 1em;
	}

	.listBoxHeader {
		text-align: center;
		background-color: rgb(224, 221, 221);
		padding: .3em;
	}

	.listBoxList {
		display: flex;
		flex-direction: column;
		justify-content:flex-end;
		/* background-color: yellow; */
		text-align: center;
	}
	
	.listBoxListItem {
		display: block;
		margin-top: .5em;
	}

	a {
		text-decoration: none;
		color: #000;
	}
}


/* -----------------------以下是小屏幕--------------------------- */


@media (max-width:900px) {

	.feedback {
		display: flex;
		justify-content: center;
		font-size:small;
		padding-bottom: 1em;
	}

	.feedback>a {
		color: blue;
		text-decoration: underline;
		font-weight: bold;
	}


	.container {
		display: flex;
		flex-direction: column;
		justify-content: stretch;
	}

	.headBox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 1em;
		padding-bottom: .4em;
	}

	.searchLogo {
		height: 2em;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#search_logo {
		height: 1.4em;
		margin-right: 0.5em;
	}

	.searchTextField {
		height: 2em;
		width: 10em;
		border-radius: 5px;
		border: 1px solid lightblue;
	}

	#submitButton {
		height: 2.3em;
		border-radius: 5px;
		border: 1px solid lightblue;
		margin-left: .6em;
	}

	.logo {
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* border: 1px solid black; */
	}

	.logoContainer {
		display: flex;
		flex-direction: row;
		/* border: 1px solid blue; */
		
	}

	.logoImage {
		width: 2em;
		height: 2em;
		margin-right: .8em;
		margin-top: .4em;
		border: 1px solid lightblue;
		border-radius: 5px;
	}

	.slogan {
		font-size: .8em;
		font-style: normal;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}


		/* start of the lists */

		.centerBox {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-around;
		}
	
		.listBox {
			width: 10em;
			border: 1px solid rgb(196, 196, 196);
			padding-bottom: 1em;
			margin-bottom: 1em;
		}
	
		.listBoxHeader {
			text-align: center;
			background-color: rgb(224, 221, 221);
			padding: .3em;
		}
	
		.listBoxList {
			display: flex;
			flex-direction: column;
			justify-content:flex-end;
			/* background-color: yellow; */
			text-align: center;
		}
		
		.listBoxListItem {
			display: block;
			margin-top: .5em;
		}
	
		a {
			text-decoration: none;
			color: #000;
		}
}