@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Noto+Sans+Display&family=Outfit:wght@300&display=swap');

* {
	margin: 0px;
	padding: 0px;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
    font-family: 'IBM Plex Sans', sans-serif;
    font-family: 'Noto Sans Display', sans-serif;
    font-family: 'Outfit', sans-serif;
}

.Content-Container {
	height: 100vh;
	width: 1000px;
	min-width: 1000px;
}

	.Page-Header {
		width: 100%;
		height: 250px;
		display: grid;
		grid-template-columns: 50px 260px 650px 40px;
		grid-template-rows: 30% 30% 40%;
	}

		.Page-Title {
			width: 90%;
			height: 100%;
			padding-left: 5%;
			grid-row: 2;
			grid-column: 3;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			font-size: 32px;
		}

		.Page-Logo {
			width: 100%;
			height: 100%;
			grid-row: 2 / 4;
			grid-column: 2;
		}

		.Page-Description {
			width: 95%;
			height: 95%;
			padding-top: 2.5%;
			padding-left: 2.5%;
			grid-row: 3;
			grid-column: 3;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			text-indent: 25px;
			line-height: 1.25;
			font-size: 18px;
		}

	.Available-Docs {
		width: 100%;
		height: calc(100% - 250px);
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.Available-Docs ul {
			width: 60%;
			height: 80%;
			border-radius: 4px;
			border: 1px solid #33333319;
			list-style-type: none;
			box-sizing: border-box;
			background-color: #f4f4f4;
		}

			.Available-Docs ul li {
				width: 95%;
				padding: 2.5%;
			}
				.Available-Docs ul li a {
					text-decoration: none;
					color: #333;
				}

				.Available-Docs ul li a:hover {
					text-decoration: none;
					color: orange;
					cursor: pointer;
				}

			.Available-Docs ul li:hover {
				background-color: #33333310;
			}