/**
 * @author Valentin Alisch, Nicolas Zupfer
 * @version 1.0
 *
 * SAMPLE
 */



/* Mobile */
:root {
	--network-border-width: 2px;
}

#network {
	font-size: 15px;
	line-height: 20px;
}

	#network #network--inner {
		width: 80%;
		margin: 10vh 10vw;
	}

		#network #network--inner #network--topics {
			position: relative;
			z-index: 10;
		}

			#network #network--inner #network--topics .network--topic {
				padding: 10px;
				background: white;
				border: var( --network-border-width ) solid white;
			}

			#network #network--inner #network--topics .network--topic:hover {
				background: black;
				color: white;
				border: var( --network-border-width ) solid black;
			}

			#network #network--inner #network--topics .network--topic + .network--topic {
				border-top: var( --network-border-width ) solid black;
			}

				#network #network--inner #network--topics .network--topic a:hover {
					font-weight: normal;
				}

				#network #network--inner #network--topics .network--topic .network--topic-headline {}

					#network #network--inner #network--topics .network--topic .network--topic-headline .network--topic-terms,
					#network #network--inner #network--discussion .network--comment .network--comment-header .network--topic-terms {
						text-transform: uppercase;
					}


		#network #network--inner #network--discussion {
			position: relative;
			z-index: 10;
		}

			#network #network--inner #network--discussion .network--comment {}

				#network #network--inner #network--discussion .network--comment .network--comment-header,
				#network #network--inner #network--discussion .network--comment .network--comment-content {
					padding: 10px;
					border-bottom: var( --network-border-width ) solid black;
					border-left: var( --network-border-width ) solid black;
					border-right: var( --network-border-width ) solid black;
				}

			#network #network--inner #network--discussion .network--comment:first-child {}

				#network #network--inner #network--discussion .network--comment:first-child .network--comment-header {
					border-top: var( --network-border-width ) solid black;
					background: black;
					color: white;
				}

		#network #network--inner #network--functions {
			position: relative;
			z-index: 10;
		}

			#network #network--inner #network--functions .network--functions-part {
				padding: 10px;
				border-bottom: var( --network-border-width ) solid black;
				border-left: var( --network-border-width ) solid black;
				border-right: var( --network-border-width ) solid black;
				display: block;
			}	

			#network #network--inner #network--functions h2.network--functions-part {
				text-align: center;
			}

			#network #network--inner #network--functions .network--functions-part[class*="-button--"] {
				cursor: pointer;
				text-align: center;
			}

			#network #network--inner #network--functions .network--functions-part[class*="-button--primary"] {
				background: black;
				color: white;
			}

		#network #network--inner #network--background {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

			#network #network--inner #network--background img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

/* Tablet */
@media ( min-width: 900px ) {
	:root {
		--network-border-width: 3px;
	}

	#network {
		font-size: 22.5px;
		line-height: 30px;
	}

		#network #network--inner #network--topics .network--topic,
		#network #network--inner #network--discussion .network--comment .network--comment-header,
		#network #network--inner #network--discussion .network--comment .network--comment-content,
		#network #network--inner #network--functions .network--functions-part {
			padding: 17.5px;
		}
}

/* Desktop */
@media ( min-width: 1600px ) {
	:root {
		--network-border-width: 4px;
	}

	#network {
		font-size: 30px;
		line-height: 40px;
	}

		#network #network--inner #network--topics .network--topic,
		#network #network--inner #network--discussion .network--comment .network--comment-header,
		#network #network--inner #network--discussion .network--comment .network--comment-content,
		#network #network--inner #network--functions .network--functions-part {
			padding: 25px;
		}
}