style_dict_1.css

* {
	margin: 0;
	padding: 0;
	background-color: #F5F5F5;
}

body {
	font-family: Verdana, Geneva, sans-serif;
}

.grid {
	display: grid;
	min-height: 100%;
	grid-template-columns: 1fr 550px 550px 1fr;
	grid-template-rows: 50px 75px auto 100px;
	grid-template-areas:
	". title nav ."
	". header header ."
	". content content ."
	"footer footer footer footer";
}

.title {
	grid-area: title;
	align-self: end;
}

.nav {
	grid-area: nav;
	display: grid;
	grid-template-rows: 1fr 30px;
	grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px 30px;
	align-self: end;
	grid-column-gap: 5px;
}

	.nav div a:hover {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		cursor: pointer;
	}

	.nav div, .nav a, .nav img {
		border-radius: 10px;
	}

	.nav .box {
		color: #444;
		align-self: center;
		height: 30px;
	}

	.util {
		grid-column: 2;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dict {
		grid-column: 3;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.map {
		grid-column: 4;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vid {
		grid-column: 5;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.disc {
		grid-column: 6;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.info {
		grid-column: 7;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.home {
		grid-column: 8;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

.header {
	grid-area: header;
	align-self: center;
}

.content {
	grid-area: content;
	display: grid;
	margin-top: 50px;
	grid-template-columns: 50px 1fr 1fr 50px;
	grid-template-rows: 100px 50px 150px 130px auto;
	grid-template-areas:
	". alpha alpha ."
	". input_cont input_cont ."
	". filter search_cont ."
	". . . ."
	". output output .";
}

	.content .box {
		color: #444;
		align-self: center;
	}

	.alpha {
		grid-area: alpha;
		display: grid;
		grid-template-columns:repeat(15, 1fr);
		grid-template-rows: 1fr 1fr;
		grid-auto-flow: row;
		margin-left: 40px;
		margin-right: 40px;

	}

	.alpha a {
		background-color: #5b9bd5;
		place-self: center;
		height: 100%;
		width: 100%;
		text-align: center;
		line-height: 50px;
	}

	.alpha a label {
		background-color: inherit;
		color: #F5F5F5;
		cursor: pointer;
		display: inline-block;
		height: 95%;
		width: 95%;
		border-radius: inherit;
	}

	.alpha a:hover {
		background-color:  #000080;
	}

	.alpha .rad:checked + a {
		background-color:  #000080;
	}

	.alpha .rad:checked + a>label {
		font-weight: bold;
		background-color:  #000080;
	}

	.alpha #A {
		grid-row-start: 1;
	}
	 #A_cont {
		border-radius: 10px 0px 0px 0px;
	 }

	 #N_cont {
		border-radius: 0px 10px 0px 0px;
		border-right: none;
	 }

	.alpha .rad {
		display: none;
	}
	.input_cont {
		grid-area: input_cont;
		place-self: stretch;
		margin-left: 40px;
		margin-right: 40px;
	}

	.input_cont input {
		justify-self: center;
		height: 50px;
		width: 100%;
		border-style: solid;
		border-color: #5b9bd5;
		border-radius: 0px 0px 10px 10px;
		text-indent: 10px;
	}

	.filter {
		grid-area: filter;
		display: grid;
		grid-template-areas:
		"y_e_cont e_y_cont"
		"ipa_cont cyr_cont";
	}

		.y_e_cont {
			grid-area: y_e_cont;
			place-self: center;
			text-align: center;
			line-height: 40px;
		}

		.e_y_cont {
			grid-area: e_y_cont;
			align-self: center;
			justify-self: start;
			text-align: center;
			line-height: 40px;
		}

		.ipa_cont {
			grid-area: ipa_cont;
			place-self: center;
			text-align: center;
			line-height: 40px;
		}

		.cyr_cont {
			grid-area: cyr_cont;
			align-self: center;
			justify-self: start;
			text-align: center;
			line-height: 40px;
		}

		.filter .button {
			display: none;
			background-color: inherit;
		}

		.filter label {
			background-color: inherit;
			color: #F5F5F5;
			cursor: pointer;
			display: inline-block;
			border-radius: 20px;
			height: 100%;
			width: 100%;
		}

		.filter div a {
			display: block;
			border-radius: 20px;
			height: 40px;
			width: 140px;
			background-color: #5b9bd5;
		}

		.filter div a:hover {
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			cursor: pointer;
		}

		.filter .button:checked + a {
			background-color:  #000080;
		}

		.filter .button:checked + a>label {
			font-weight: bold;
			background-color:  #000080;
		}

	.output {
		grid-area: output;
		margin-bottom: 20px;
	}

	.search_cont {
		grid-area: search_cont;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
		". search"
		". .";
	}

		.search {
			grid-area: search;
			text-align: center;
			line-height: 40px;
			place-self: center;
		}

		.search_cont .button {
			display: none;
			background-color: inherit;
		}

		.search_cont label {
			background-color:#5b9bd5;
			color: #F5F5F5;
			cursor: pointer;
			display: inline-block;
			border-radius: 20px;
			height: 100%;
			width: 100%;
		}

		.search_cont label:hover {
			background-color:  #000080;
		}

		.search_cont div a {
			display: block;
			border-radius: 20px;
			height: 40px;
			width: 125px;
			background-color: #5b9bd5;
		}

		.search_cont div a:hover {
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			cursor: pointer;
			background-color:  #000080;
		}

.footer {
	grid-area: footer;
	background-color: #7F7F7F;
	display: grid;
	grid-template-columns: 1fr 500px 500px 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
}

	.footer .box {
		font-color: #444;
	}

	.one {
		background-color: inherit;
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		align-self: center;
	}

	.two {
		background-color: inherit;
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
		align-self: center;
	}