:root {
	--bg-white:              #ffffff;
	--bg-white-dimmed:       #f8f9fa;
	--bg-black:              #000000;
	--bg-gray:               #D9D9D9;
	--color-gray:            #D9D9D9;
	--color-white:           #ffffff;
	--color-black:           #000000;
	--color-nav-item:        #707070;
	--color-nav-item-active: #000000;
	--footer-height:         139px;
}
@font-face {
    font-family: "dxr";
    src: url("./../font/DXRigraf-SemiBoldExpanded.otf");
}
@font-face {
    font-family: "ibm";
    src: url("./../font/IBMPlexSans-Regular.ttf");
}
@font-face {
    font-family: "ibm-thin-italic";
    src: url("./../font/IBMPlexSans-ThinItalic.ttf");
}



/* Body */
html { height: 100%; }
body {
	/* Placement: */
	height:           100%;
	margin:           0;
	padding:          0;

	/* Colors: */
	background-color: var(--bg-white);
}
.main { padding: 40px; }
.wrapper {
	/* Placement: */
	margin-bottom:    calc(-1 * var(--footer-height));
	min-height:       100%;
}
.footer-offset { height: var(--footer-height); }
.active { color: var(--color-nav-item-active); }



/* Header */
header {
	/* Placement: */
	display:          flex;
	justify-content:  space-between;
	align-items:      center;
	padding:          20px;

	/* Texts: */
	font-family:      'ibm';

	/* Colors: */
	background-color: var(--bg-white-dimmed);
}
header > a {
	/* Placement: */
	display:          flex;

	/* Texts: */
	text-decoration:  none;
	align-items:      center;

	/* Colors: */
	color:            var(--color-black);
}
header > a > img {
	height:           35px;
	width:            35px;
}
header > a > p {
	/* Placement: */
	margin:           0 0 0 12px;

	/* Texts: */
	font-size:        20px;
	font-weight:      bold;
}
header > nav > ul {
	/* Placement: */
	display:          flex;
	gap:              22px;
	margin:           0;
	padding:          0;
}
header > nav > ul > li { list-style: none; }
header > nav > ul > li > a {
	/* Texts: */
	font-size:        20px;
	text-decoration:  none;

	/* Colors: */
	color:            var(--color-nav-item);

	/* Animations: */
	transition:       .3s color;
}
header > nav > ul > li > a:hover {
	/* Colors: */
	color:            var(--color-nav-item-active);

	/* Animations: */
	transition:       .3s color;
}
header > nav > ul > li:last-child > a {
	/* Placement: */
	padding:          3px 15px;

	/* Colors: */
	color:            var(--color-white);
	background-color: var(--bg-black);
}



/* Footer */
footer {
	/* Placement: */
	display:          flex;
	justify-content:  space-between;
	align-items:      center;
	height:           var(--footer-height);
	padding:          0 32px;

	/* Texts: */
	font-family:      'ibm';

	/* Colors: */
	background-color: var(--bg-white-dimmed);
}
footer > div:first-child {
	/* Placement: */
	display:          flex;
	flex-direction:   column;
	justify-content:  space-between;
	align-items:      center;
	height:           74px;
	width:            328px;
}
footer > div:first-child p { margin: 0; }
footer > div:first-child hr { width: inherit; }
footer > nav > ul {
	/* Placement: */
	display:          flex;
	margin:           0;
	padding:          0;
	gap:              22px;
}

footer > nav > ul > li { list-style: none; }
footer > nav > ul > li > a {
	/* Texts: */
	text-decoration:  none;
	font-size:        20px;

	/* Colors; */
	color:            var(--color-nav-item);

	/* Animations:  */
	transition:       .3s color;
}
footer > nav > ul > li > a:hover {
	/* Colors: */
	color:            var(--color-nav-item-active);

	/* Animations: */
	transition:       .3s color;
}
footer > nav > ul > li:last-child > a {
	/* Placement: */
	padding:          3px 15px;

	/* Colors; */
	color:            var(--color-white);
	background-color: var(--bg-black);
}
footer > div:last-child > ul {
	/* Placement: */
	display:          flex;
	margin:           0;
	padding:          0;
	gap:              13px;
}
footer > div:last-child > ul > li { list-style: none; }

footer > div:last-child > ul > li > a > img {
	height:           53px;
	width:            53px;
}