Age of Empires

Tags: aoe, age of empires, king, medieval, game
Description:

Age of Empires inspired layout, feel free to use it
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by apoc (https://layouts.spacehey.com/layout?id=103165) -->

<style>
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active,
a {
	color: var(--color-red) !important;
}

.profile-info,
.container main .profile .right>div>.heading {
	background-image: var(--img-title);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	height: 63px;
	text-align: center;
	padding: 0;
	border: 0;
	display: block;
}

.profile-info .inner h3,
.container main .profile .right .heading h4 {
	font-size: 22px;
	color: white;
	line-height: 58px;
	text-transform: uppercase;
	text-shadow: -1px 1px 2px black;
	font-weight: 100;
	display: block;
	margin: 32px 0 8px 0;
}

.container main .profile .right .heading h4+a {
	margin: 4px 8px;
}

.comments-table>tbody>tr>td>a:nth-child(2) {
	margin: -12px 0px;
}

.comment-replies {
	border: 0px;
}

.comment-replies>.comment-reply>p,
.comments-table>tbody>tr:nth-child(8n - 8)>td:nth-child(1)>a,
.comments-table>tbody>tr>td:nth-child(2)>p:nth-child(1) {
	color: white !important;
	text-decoration-color: white;
}

.profile .friends-grid>.person:nth-child(8n - 2)>a,
.profile .friends-grid>.person:nth-child(8n - 2)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 4)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 4)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 8)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 8)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-red) !important;
	text-decoration-color: var(--color-red);
}

.profile .friends-grid>.person:nth-child(8n - 1)>a,
.profile .friends-grid>.person:nth-child(8n - 1)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 3)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 3)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 7)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 7)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-green) !important;
	text-decoration-color: var(--color-green);
}

.profile .friends-grid>.person:nth-child(8n - 8)>a,
.profile .friends-grid>.person:nth-child(8n - 8)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 2)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 2)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 6)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 6)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-yellow) !important;
	text-decoration-color: var(--color-yellow);
}

.profile .friends-grid>.person:nth-child(8n - 7)>a,
.profile .friends-grid>.person:nth-child(8n - 7)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 1)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 1)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 5)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 5)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-cyan) !important;
	text-decoration-color: var(--color-cyan);
}

.profile .friends-grid>.person:nth-child(8n - 6)>a,
.profile .friends-grid>.person:nth-child(8n - 6)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 8)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 8)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 4)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 4)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-purple) !important;
	text-decoration-color: var(--color-purple);
}

.profile .friends-grid>.person:nth-child(8n - 5)>a,
.profile .friends-grid>.person:nth-child(8n - 5)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 7)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 7)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 3)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 3)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-blue) !important;
	text-decoration-color: var(--color-blue);
}

.profile .friends-grid>.person:nth-child(8n - 4)>a,
.profile .friends-grid>.person:nth-child(8n - 4)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 6)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 6)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 2)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 2)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-gray) !important;
	text-decoration-color: var(--color-gray);
}

.profile .friends-grid>.person:nth-child(8n - 3)>a,
.profile .friends-grid>.person:nth-child(8n - 3)>a>p,
.comment-replies>.comment-reply:nth-child(8n - 5)>p:nth-child(1),
.comment-replies>.comment-reply:nth-child(8n - 5)>p:nth-child(2) a:first-of-type,
.comments-table>tbody>tr:nth-child(8n - 1)>td:nth-child(1)>a,
.comments-table>tbody>tr:nth-child(8n - 1)>td:nth-child(2)>p:nth-child(2) {
	color: var(--color-orange) !important;
	text-decoration-color: var(--color-orange);
}

.comments-table>tbody>tr>td:nth-child(1)>a:nth-child(1) {
	position: absolute;
	top: 142px;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.comments-table>tbody>tr>td:nth-child(1) {
	position: relative;
}

.comments-table>tbody>tr>td:nth-child(1)>a:nth-child(2) {
	background-image: var(--img-tree);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 87%;
	width: 211px;
	height: 211px;
	display: inline-block;
}

.profile .new-people .person>a>img:hover,
.profile .friends .person>a>img:hover,
.comments-table>tbody>tr>td:nth-child(1)>a:nth-child(2) img:hover {
	filter: brightness(1.15);
}

.comments-table>tbody>tr>td:nth-child(1)>a:nth-child(2)>img {
	margin: 35px 0px 0 -2px;
}

.comments-table>tbody>tr>td:nth-child(2) {
	padding: 25px 0 0;
}

.comments-table>tbody>tr>td,
.comments-table>tbody>tr>td:first-child {
	background-color: transparent;
}

table.comments-table,
table.music-table,
table.bulletin-table,
table.forum-table,
table.groups-table {
	width: 97%;
	margin: 0 0 0 1.5%;
}

table.comments-table {
	border: none;
	border-color: transparent;
	border-collapse: collapse;
	margin: -10px -20px;
}

.comments-table td:first-child img:not(.icon) {
	max-width: 90px;
	max-height: 90px;
}

::-webkit-scrollbar {
	width: 16px;
	height: 16px;
	background-color: transparent;
}

::-webkit-scrollbar-corner {
	background-color: var(--color-antique);
}

::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.5) !important;
	background-image: var(--img-noise);
}

textarea,
input {
	padding: 2px 5px;
	background-color: rgba(0, 0, 0, 0.75);
	color: white;
}

nav input {
	height: 26px;
	margin: 1px 0 0 10px;
}

textarea:focus,
input:focus {
	border-radius: 0;
	outline: none;
	background-color: rgba(0, 0, 0, 0.65);
}


nav .top .right a:nth-of-type(2):not([rel]),
nav .top .right a:nth-of-type(3):not([rel]),
button {
	padding: 5px 20px;
	min-width: 92px;
	height: 27px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffff1b;
	font-family: cursive, sans-serif;
	text-transform: uppercase;
	text-shadow: none;
}

.logout-btn {
	min-width: 48px !important;
}

button:hover {
	background-color: rgba(0, 0, 0, 0.45);
}

button:active {
	background-color: rgba(0, 0, 0, 0.55);
}

nav .top .right a:nth-of-type(2):not([rel]),
nav .top .right a:nth-of-type(3):not([rel]) {
	text-align: center;
	color: #ffff1b !important;
}

nav .top .right a:nth-of-type(2):not([rel]),
nav .top .right a:nth-of-type(3):not([rel]),
input,
textarea,
button {
	background-clip: padding-box;
	border-left: 1px solid var(--color-antique-darkest);
	border-right: 1px solid var(--color-antique-darkest);
	border-bottom: 1px solid var(--color-antique-darkest);
	border-top: 1px solid var(--color-antique-lightest);
	box-shadow: inset -1px 0px 0px 0px var(--color-antique-dark), inset 1px 0px 0px 0px var(--color-antique-dark), inset 0px -1px 0px 0px var(--color-antique-dark), inset 0px 1px 0px 0px var(--color-antique-light);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-thumb {
	background-clip: padding-box;
	border-left: 1px solid var(--color-antique-darkest);
	border-right: 1px solid var(--color-antique-darkest);
	border-bottom: 1px solid var(--color-antique-darkest);
	border-top: 1px solid var(--color-antique-lightest);
	box-shadow: inset -1px 0px 0px 0px var(--color-antique-dark), inset 1px 0px 0px 0px var(--color-antique-dark), inset 0px -1px 0px 0px var(--color-antique-dark), inset 0px 1px 0px 0px var(--color-antique-light);
}

.profile .new-people .person>a>img,
.profile .friends .person>a>img,
.container>main>.row .general-about .profile-pic img {
	background-clip: padding-box;
	border-left: 2px solid var(--color-antique-darkest);
	border-right: 2px solid var(--color-antique-darkest);
	border-bottom: 2px solid var(--color-antique-darkest);
	border-top: 2px solid var(--color-antique-lightest);
	box-shadow: inset -2px 0px 0px 0px var(--color-antique-dark), inset 2px 0px 0px 0px var(--color-antique-dark), inset 0px -2px 0px 0px var(--color-antique-dark), inset 0px 2px 0px 0px var(--color-antique-light);
}

::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-thumb {
	background-color: var(--color-antique);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-antique-h);
}

::-webkit-scrollbar-thumb:active {
	background-color: var(--color-antique-a);
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
	display: block;
	background-size: 10px, auto;
	background-repeat: no-repeat, repeat;
}

::-webkit-scrollbar-button:single-button:hover {
	background-color: var(--color-antique-h);
}

::-webkit-scrollbar-button:single-button:active {
	background-color: var(--color-antique-a);
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
	height: 16px;
	width: 16px;
	background-position: center 6px, left top;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(153, 106, 55)'><polygon points='50,00 0,50 100,50'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(191, 123, 0)'><polygon points='50,00 0,50 100,50'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(144, 100, 12)'><polygon points='50,00 0,50 100,50'/>"), var(--img-noise);
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
	height: 16px;
	width: 16px;
	background-position: center 4px, left top;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(153, 106, 55)'><polygon points='0,0 100,0 50,50'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(191, 123, 0)'><polygon points='0,0 100,0 50,50'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(144, 100, 12)'><polygon points='0,0 100,0 50,50'/>"), var(--img-noise);
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
	height: 16px;
	width: 16px;
	background-position: 4px 4px, left top;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(153, 106, 55)'><polygon points='0,50 50,100 50,0'/>"), var(--img-noise);

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(191, 123, 0)'><polygon points='0,50 50,100 50,0'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(144, 100, 12)'><polygon points='0,50 50,100 50,0'/>"), var(--img-noise);
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
	height: 16px;
	width: 16px;
	background-position: 4px 4px, left top;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(153, 106, 55)'><polygon points='0,0 0,100 50,50'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(191, 123, 0)'><polygon points='0,0 0,100 50,50'/>"), var(--img-noise);
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(144, 100, 12)'><polygon points='0,0 0,100 50,50'/>"), var(--img-noise);
}

::selection {
	background-color: #c4a376 !important;
}

.verified-info>.verified {
	content: var(--img-validated);
}

.report img.icon {
	content: var(--img-flag);
}

footer {
	background-color: transparent;
}

footer>p.copyright {
	color: var(--color-red) !important;
	text-decoration-color: var(--color-red);
}

.container main {
	background-image: var(--img-about-top), var(--img-top);
	background-position: left top, right top;
	background-repeat: no-repeat, no-repeat;
	background-color: transparent;
	width: 902px;
	margin: 0 auto;
}

.container>main>.row>.col.left {
	background-image: var(--img-about-top), var(--img-left-side);
	background-position: left top -6px, right -5px top;
	background-repeat: no-repeat, repeat-y;
	padding: 0px;
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 378px;
}

.container>main>.row {
	display: flex;
	table-layout: auto;
}

.container>main>.row>.col.left .heading {
	background: var(--img-noise), linear-gradient(to right, var(--color-olive), rgba(255, 0, 0, 0));
	padding: 5px 7px;
	margin: 0 0 10px 0;
}

.container>main>.row>.col.left>div {
	padding: 10px 0 10px 40px;
	background-image: var(--img-left-side), var(--img-about-center);
	background-position: left top, left top 6px;
	background-repeat: repeat-y, repeat-y;
	margin: 0 0;
	border: 0;
	outline: 0;
}

.container>main>.row>.col.left>p,
.container>main>.row>.col.left>span,
.container>main>.row>.col.left>h1 {
	color: var(--color-blue);
	position: absolute;
	left: 40px;
	top: 30px;
}

.container>main>.row>.col.left>p.edit-link {
	left: 96px;
	top: 24px;
}

.container>main>.row>.col.right {
	padding: 30px 40px 30px 10px;
	background-image: var(--img-right-bottom), var(--img-top), var(--img-right-side), var(--img-right-mid);
	background-position: bottom right, right top -6px, right top -6px, right 28px top 0px;
	background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
	box-shadow: rgba(0, 0, 0, 0.8) -3px 0px 3px;
	position: relative;
	z-index: 0;
	display: inline-block;
	width: 526px;
}

.container>main>.row>.col.left>div:first-of-type {
	padding: 64px 40px 10px 40px;
	background-image: var(--img-about-top), var(--img-left-side), var(--img-about-center);
	background-position: left top -6px, left top, left top 6px;
	background-repeat: no-repeat, repeat-y, repeat-y;
}

.container>main>.row>.col.left>div:first-child {
	padding: 27px 40px 10px 40px;
}

.container>main>.row>.col.left>div:not(:first-of-type) {
	background-image: var(--img-separator), var(--img-left-side), var(--img-about-center);
	background-position: left 28px top, left top, left top 6px;
	background-repeat: no-repeat, repeat-y, repeat-y;
	padding: 34px 40px 8px 40px;
}

.container>main>.row>.col.left>div:last-of-type {
	padding: 34px 40px 36px 40px;
	background-image: var(--img-left-bottom), var(--img-separator), var(--img-left-side), var(--img-about-center);
	background-position: left bottom, left 28px top, left top, left top 6px;
	background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
}

.container>main>.row>.col.left>div:first-of-type:last-of-type {
	padding: 34px 40px 36px 40px;
	background-image: var(--img-about-top), var(--img-left-bottom), var(--img-left-side), var(--img-separator), var(--img-left-side), var(--img-about-center);
	background-position: left top -6px, left bottom, left top, left 28px top, left top, left top 6px;
	background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, repeat-y, repeat-y;
}

.container>main>.row .general-about:not(.home-actions) {
	display: flex;
}

.container>main>.row .general-about .profile-pic {
	float: none;
	vertical-align: top;
	text-align: center;
	display: inline-block;
	width: 60%;
	height: 45%;
	margin: 0 10px 10px 0;
}

.container>main>.row .general-about .profile-pic img {
	max-width: 100%;
}

.container>main>.row .general-about .details {
	display: inline-block;
}

.details-table td,
.details-table td:first-child {
	background: none;
	background-color: transparent;
	vertical-align: bottom;
	color: white;
}

.details-table {}

.info {
	color: white;
	background: var(--color-antique-dark);
	border: 1.5px solid var(--color-antique-darkest);
}

.new-people,
.statistics {
	border: 0;
}

.forum-table th,
.forum-table td,
.groups-table th,
.groups-table td,
.bulletin-table th,
.bulletin-table td {
	border: 1px solid var(--color-antique-darkest);
}

.notification-overview {
	border-bottom: 2px solid transparent;
}

.container main .profile .right .statistics .heading h4 {
	line-height: 14px;
	margin: 0 0 10px;
}

.new-people .top,
.statistics .heading {
	background: none;
}

body {
	background-image: var(--img-background);
	background-size: cover;
	background-attachment: fixed;
}

* {
	font-family: "math", sans-serif;
	cursor: var(--img-cursor), auto !important;
	text-shadow: var(--black-outline);
}

.count,
.profile .blurbs .section h4 {
	color: var(--color-blue);
}

div {
	color: white;
}

footer>p.copyright:hover,
a:hover,
a:hover *,
button:hover {
	cursor: var(--img-cursor-href), auto !important;
}

.top .right * {
	cursor: var(--img-cursor-logout), auto !important;
}

.top .right a {
	cursor: var(--img-cursor-help), auto !important;
}

input,
textarea {
	cursor: var(--img-cursor-input), auto !important;
}

.container {
	height: 100%;
	width: 100%;
	overflow-y: auto;
	margin: 0;
	position: absolute;

}

nav,
footer {
	width: 902px;
	margin: 0 auto;
}

nav .top .left img {
	margin: 32px 0 0 24px;
	filter: drop-shadow(1px 0px 0px black) drop-shadow(-1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(0px -1px 0px black) sepia(100%);
}

nav .top .center {
	margin: 22px 22px 0 6px;
	text-align: right;
}

nav .top {
	background-image: var(--img-header);
	height: 132px;
}

.container nav .links a,
.container nav .right form button {
	text-shadow: none;
	height: 18px;
	box-shadow: none;
}

.container nav .links a:hover {
	text-shadow: var(--white-outline);
	text-decoration: none;
}

nav .links {
	background-image: var(--img-menu);
	padding: 1px 4px;
	height: 32px;
}

nav .links li {
	background-image: var(--img-res);
	height: 25px;
	padding: 5px 6px;
	position: relative;
}

nav .links li a {
	color: white !important;
}

nav .links li a:hover {
	color: black !important;
}

nav .links li a img {
	height: 16px;
	width: 16px;
}

nav .links li::after,
nav .links li::before {
	color: black;
	position: absolute;
	z-index: 1;
	top: 0px;
}

nav .links li:last-child::after {
	content: var(--img-res-right);
	right: -4px;
}

nav .links li:not(:last-child)::after {
	content: var(--img-res-mid);
	right: -7px;
}

nav .links li:first-child::before {
	content: var(--img-res-left);
	left: -2px;
}

nav .top .right {
	position: absolute;
	right: 2px;
	bottom: -20px;
	-webkit-user-select: none;
	color: transparent;
	text-shadow: none;
}

nav .top .right a[rel] {
	color: transparent !important;
	text-shadow: none;
	background-image: var(--img-help);
	background-repeat: no-repeat;
	padding: 1px 12px 3px 12px;
}

nav .top .right a:nth-of-type(2):not([rel]):hover {
	cursor: var(--img-cursor-href), auto !important;
}

nav .top .right a:nth-of-type(2):not([rel]) {
	right: 125px;
	top: -60px;
	position: absolute;
}

nav .top .right a:nth-of-type(3):not([rel]) {
	cursor: var(--img-cursor-href), auto !important;
}

nav .top .right a:nth-of-type(3):not([rel]) {
	top: -60px;
	left: -60px;
	position: absolute;
}

nav .top .right a[rel]:active {
	background-image: var(--img-help-h);
}

nav .top .right form {
	margin-left: -10px;
	background-image: var(--img-logout);
	background-repeat: no-repeat;
	padding: 0px 2px 0 0;
}

nav .top .right form button {
	color: transparent !important;
	width: 48px;
	text-shadow: none;
	margin: 0px;
}

nav .top .right form:has(button:active) {
	background-image: var(--img-logout-h);
}

.support-right {
	position: absolute;
	width: 100px;
	right: 32px;
	top: -48px;
}

:root {
	--color-antique-darkest: rgb(136, 108, 79);
	--color-antique-dark: rgb(167, 135, 102);
	--color-antique-lightest: rgb(226, 195, 170);
	--color-antique-light: rgb(196, 170, 146);
	--color-antique: rgb(228, 162, 82);
	--color-antique-h: rgb(225, 177, 90);
	--color-antique-a: rgb(205, 147, 37);
	--color-olive: rgba(81, 73, 33, 0.9);

	--color-red: rgb(255, 55, 61);
	--color-green: rgb(32, 173, 37);
	--color-yellow: rgb(244, 240, 64);
	--color-cyan: rgb(63, 194, 205);
	--color-purple: rgb(183, 69, 192);
	--color-blue: rgb(64, 112, 200);
	--color-gray: rgb(167, 170, 173);
	--color-orange: rgb(234, 158, 57);

	--black-outline: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
	--white-outline: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;

	--img-scrollbar-down: url('https://i.ibb.co/5LzMCYx/img-scrollbar-down.png');
	--img-scrollbar-up: url('https://i.ibb.co/XyYMqsK/img-scrollbar-up.png');
	--img-scrollbar-move: url('https://i.ibb.co/PzX7zXS/img-scrollbar-move.png');
	--img-noise: url('https://i.ibb.co/fk8GzXH/img-noise.png');

	--img-flag: url('https://i.ibb.co/k2p9p6w/img-flag.png');
	--img-validated: url('https://i.ibb.co/yRnWz9K/img-validated.png');
	--img-tree: url('https://i.ibb.co/mbJwBS4/img-tree.png');
	--img-title: url('https://i.ibb.co/yFdN4MK/img-title.png');

	--img-right-mid: url('https://i.ibb.co/fDTy6r4/img-right-mid.png');
	--img-top: url('https://i.ibb.co/C9VT12p/img-top.png');
	--img-left-side: url('https://i.ibb.co/NCcFKPt/img-left-side.png');
	--img-right-side: url('https://i.ibb.co/rs0KSFz/img-right-side.png');
	--img-about-center: url('https://i.ibb.co/MfMjfBK/img-about-center.png');
	--img-about-top: url('https://i.ibb.co/5s21qVf/img-about-top.png');
	--img-separator: url('https://i.ibb.co/n3b1ZzL/img-separator.png');
	--img-left-bottom: url('https://i.ibb.co/dB8c7wH/img-left-bottom.png');
	--img-right-bottom: url('https://i.ibb.co/zGGtRS5/img-right-bottom.png');

	--img-cursor-help: url('https://i.ibb.co/KqL8xRt/img-cursor-help.png');
	--img-cursor-logout: url('https://i.ibb.co/yY1sRYP/img-cursor-logout.png');
	--img-cursor-input: url('https://i.ibb.co/tCpWd03/img-cursor-input.png');
	--img-cursor: url('https://i.ibb.co/WVmzyVs/img-cursor.png');
	--img-cursor-href: url('https://i.ibb.co/Gv1dRQj/img-cursor-href.png');
	--img-header: url('https://i.ibb.co/16D5CB9/img-header.png');

	--img-help: url('https://i.ibb.co/y5fwfzY/img-help.png');
	--img-help-h: url('https://i.ibb.co/5WWrSkv/img-help-h.png');
	--img-logout: url('https://i.ibb.co/WVMCYHv/img-logout.png');
	--img-logout-h: url('https://i.ibb.co/yFrCWDS/img-logout-h.png');

	--img-res-left: url('https://i.ibb.co/bg3NWw6/img-res-left.png');
	--img-res-right: url('https://i.ibb.co/zPnwB1v/img-res-right.png');
	--img-res-mid: url('https://i.ibb.co/MRzd9xQ/img-res-mid.png');
	--img-res: url('https://i.ibb.co/h1r7PJM/img-res.png');
	--img-menu: url('https://i.ibb.co/vmVXMr2/img-menu.png');
	--img-background: url('https://i.ibb.co/gTjN9mf/wdadasd.webp');
}
</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.