@font-face {
	font-family: 'Lato';
	src: url(./fonts/Lato/Lato-Bold.ttf) format('woff2');
}

body {
	background: black;
	margin: 0;
	font-family: Lato;
	color: white;
	text-wrap: balance;
}

h1 {
	margin: 0.67em;
	margin-left: 0;
}

#pipe-menu {
	display: flex;
	position: fixed;
	width: 95%;
	padding-top: 1000px;
	margin-top: calc(2.5% - 1000px);
	margin-left: 2.5%;
	background: linear-gradient(to bottom, black 95%, transparent);
	z-index: 1;
}

#pipes {
	display: flex;
	position: absolute;
	width: 95%;
	margin-top: 2.5%;
	margin-left: 2.5%;
	padding-bottom: 2.5%;
	min-height: calc(100vh - 5vw);
	flex-direction: column;
	z-index: -2;
}

#pipes-horizontal, #pipes-vertical {
	display: flex;
}

#pipes-vertical {
	justify-content: space-between;
	flex-grow: 1;
}

#pipe-horizontal, #pipe-horizontal-bottom {
	width: 100%;
	max-height: 58px;
	background: url(./img/pipe_horizontal.png) repeat;
}

#pipe-horizontal-bottom {
	background: url(./img/pipe_horizontal_bottom.png) repeat;
}

#pipe-vertical {
	max-width: 58px;
	flex-grow: 1;
	background: url(./img/pipe_vertical.png) repeat;
}

.pipe-left {
	background: url(./img/pipe_vertical_left.png) repeat !important;
}

#menu {
	display: flex;
	position: fixed;
	width: calc(95% - 232px);
	align-items: center;
	justify-content: space-between;
	height: calc(58px + 2.5vw);
	margin: 1.25vw calc(2.5% + 116px) 0 calc(2.5% + 116px);
	z-index: 2;
}

#logo, #logo img {
	height: calc(56px + 2.5vw);
}

#menu-items {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: 0 5vw 0 10vw;
}

#menu-items a {
	font-size: 25px;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 7.5px blue;
	filter: blur(0.7px) contrast(120%);
	margin-top: -1px;
}

#content {
	position: absolute;
	padding: calc(49px + 2.5%);
	width: calc(95% - 98px);
	min-height: calc(100vh - 5vw - 98px);
	z-index: -1;
}

#welcome {
	display: flex;
	width: 100%;
	min-height: 100%;
	justify-content: center;
	align-items: center;
}

#welcome img {
	height: 50vh;
	margin-left: 5%;
}

.hidden {
	opacity: 0;
}

a {
	text-decoration: none;
	color: aqua;
}

a:clicked {
	color: blue;
}

#menu-button {
	display: none;
	position: fixed;
	height: 58px;
	margin-top: 2.5%;
	right: 2.5%;
	z-index: 2;
	cursor: pointer;
}

#mobile-menu {
	display: none;
	position: fixed;
	margin: calc(48px + 2.5%);
	width: calc(95% - 96px);
	background: gray;
	z-index: 0;
	border-radius: 2px;
	transition: ease-in 1s;
}

.hide {
	transition: ease-out 1s;
	margin-top: -225px !important;
}

#mobile-menu a:first-child {
	margin-top: calc(1.25vw + 10px);
}

#mobile-menu a {
	display: block;
	padding: 15px;
	text-align: center;
	color: white;
}

#mobile-menu hr {
	width: 90%;
}

#pipe-horizontal-menu {
	background: url(./img/pipe_horizontal_bottom.png) repeat;
	width: 100%;
	height: 49px;
	margin-top: 1.25vw;
}

#content {
	display: flex;
}

#news {
	width: 100%;
	margin: 0 21.44px 0 21.44px;
}

#news h1, #news h2 {
	width: fit-content;
}

.news-box {
	padding: 20px;
	margin-bottom: 10px;
	background: #555555;
	border-radius: 10px;
}

.news-box h2, .news-box p {
	margin: 0;
	color: white;
}

#page {
	margin-bottom: 21.44px;
	text-wrap-style: pretty;
}

.center {
	text-align: center;
}

.disabled {
	color: gray;
	cursor: not-allowed;
}

#news > hr {
	width: 100%;
	margin-top: 21.44px;
}

.post {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.post h2 {
	margin-bottom: 0;
}

.post h1 {
	margin-left: 0.67em;
}

.post p {
	margin-bottom: 21.44px;
}

.post p img {
	max-width: 65%;
}

@media(max-width: 1300px) {
	#menu-items {
		margin: 0 0 0 50px;
	}
	
	.post p img {
		max-width: 80%;
	}
}

@media(max-width: 1150px) {
	body {
		text-align: center;
	}

	h1 {
		margin-left: 0.67em;
	}

	#welcome {
		flex-direction: column;
	}

	#welcome img {
		height: auto;
		width: 50%;
		margin-left: 0;
		margin-top: 10px;
		margin-bottom: 21.44px;
	}

	#news {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

@media(max-width: 1050px) {
	#menu {
		justify-content: center;
	}

	#menu-items {
		display: none;
	}

	#menu-button, #mobile-menu {
		display: block;
	}
	
	.post p img {
		max-width: 100%;
	}
}