/* ------------------------------- global ------------------------------- */

/* -------------------- body -------------------- */

.global__body{
	margin: 0px;
	padding: 0px;
	
	display: grid;
	grid-template-areas: 'header header header'
						 'none1  main   none2'
						 'footer footer footer';
	grid-template-columns: 1fr 10fr 1fr;
	grid-template-rows: auto 1fr auto;

	min-height: 100vh;
	
	font-family: Arial;

	background-color: #ffffff;
}

/* -------------------- header -------------------- */

.global__header{
	grid-area: header;

	z-index: 5;

	text-align: center;
	position: sticky;
	top: 0px;

	background-color: #dddddd;
	border-bottom: 1px solid #666666;
}
.global__header-logo{
	margin: 0px;

	text-decoration: none;
	font-family: Consolas;
	font-size: 1.7em;
	font-style: italic;

	color: #000000;
}

/* -------------------- main -------------------- */

.global__main{
	grid-area: main;
}

/* -------------------- sections -------------------- */

.global__section{
	margin: 30px 0px;
	padding: 0px;

	border-top-right-radius: 2em;

	border: 1px solid #999999;
}
.global__section-header{
	display: grid;

	grid-template-areas: "title text";

	font-family: Consolas;

	border-top-right-radius: 2em;

	background-color: #dddddd;
	border-bottom: 1px solid #aaaaaa;
}
.global__section-header-title{
	grid-area: title;

	margin: 10px 40px;
	padding: 0px;
}
.global__section-header-text{
	grid-area: text;

	margin: 10px;
}

/* -------------------- elements -------------------- */

.panel{
	display: inline-block;

	margin: 10px;
	padding: 5px;

	width: 100px;
	height: 40px;

	border: 1px solid #aaaaaa;
}
.text{
	margin: 10px 20px;

	font-family: Roboto;
}
.text-color{
	display: inline-block;

	margin-left: 10px;
	padding: 2px 10px;

	width: 20%;

	font-size: 1.05em;
	font-family: Arial;
}

/* -------------------- footer -------------------- */

.global__footer{
	grid-area: footer;

	text-align: center;
	font-family: Consolas;

	background-color: #dddddd;
	border-top: 1px solid #666666;
}