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

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

.global__body{
	display: grid;
	grid-template-areas: "header header"
						 "nav    main"
						 "footer footer";
	grid-template-rows: auto 1fr auto;
	grid-auto-columns: auto 1fr;

	min-height: 100vh;

	margin: 0;
	padding: 0;

	font-family: Verdana, sans-serif;
}

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

.global__header{
	grid-area: header;

	text-align: center;

	background-color: #ffb833;
}
.global__header-title{
	margin: 10px;
}

/* -------------------- nav -------------------- */

.global__nav{
	grid-area: nav;

	background-color: #ffdb99;
}
.global__nav-title{
	margin: 20px 10px;
}
.global__nav-list{
	padding-left: 0;

	list-style: none;
}
.global__nav-list-item{
	margin: 5px 20px;
}
.global__nav-list-item-link{
	color: #000000;
}
.global__nav-list-item-link:visited{
	color: #333333;
}

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

.global__main{
	grid-area: main;	margin-bottom: -1rem;

	background-color: #cccccc;
}

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

.global__main-title{
	margin: 20px 30px;
}
.global__main-text{
	margin: 7px 30px;
}
.global__main-code{
	padding: 2px 4px;

	border-radius: 5px;

	color: #ffffff;
	background-color: #272822;
}
.global__main-code-block{
	display: block;

	margin: 7px 30px;
	padding: 0 30px;

	white-space: pre;

	border-radius: 6px;

	color: #ffffff;
	background-color: #272822;
}
.global__main-code-block:before{
	display: inline-block;

	content: "Код";

	width: calc(100%);

	padding: 2px 30px;
	margin-left: -30px;
	margin-bottom: 1rem;

	border-top-left-radius: 6px;
	border-top-right-radius: 6px;

	border-bottom: 1px solid #ffffff;
	background-color: #bd8e35;
}

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

.global__main-result{
	display: block;

	margin: 10px 30px;

	height: auto;
}
.global__main-result-frame{
	width: 100%;
	height: 200px;

	border: none;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	background-color: #ffffff;
}
.global__main-result:before{
	display: inline-block;

	content: "Результат";

	width: calc(100% - 58px);

	padding: 2px 30px;

	border-top-left-radius: 6px;
	border-top-right-radius: 6px;

	border-bottom: 1px solid #000000;
	background-color: #bd8e35;
	color: #ffffff;
}

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

.global__main-list{
	margin: 7px 30px;
}
.global__main-list-item{
	margin: 7px 0;
}
.global__main-list-item-invisible{
	list-style: none;
}
.global__main-sublist{
	margin: 7px 0;
}
.global__main-sublist-item{
	margin: 7px 0;
}

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

.global__main-table{
	margin: 10px 30px;

	border-collapse: collapse;
}
.global__main-table-sm{
	width: 25%;
}
.global__main-table-md{
	width: 50%;
}
.global__main-table-lg{
	width: 75%;
}
.global__main-table-xl{
	width: 100%;
}
.global__main-table th{
	padding: 5px 7px;

	background-color: #ffdb99;
	border-bottom: 1px solid #666666;
}
.global__main-table td{
	padding: 5px 7px;

	border-bottom: 1px solid #666666;
}

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

.global__main-button-next{
	display: inline-block;

	margin: 20px 30px;
	padding: 10px 20px;

	width: calc(100% - 106px);

	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;

	border: solid 3px #bd8e35;
	border-radius: 25px;

	color: #000000;
	background: #ffb833;
}

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

.global__footer{
	grid-area: footer;

	text-align: center;

	background-color: #ffb833;
}

/* -------------------- tags -------------------- */

code{
	font-family: Consolas, monospace;
}