:root {
	--circle-size: 180px;
	--transition-duration: .14s;
	--center-left: calc(50vw - var(--circle-size) / 2 + 20px);
	--center-top: calc(50vh - var(--circle-size) / 2 + 20px);
	--ars-scale: .8;
	--sub-item-scale: .5;
}

body {
	background-color: #2e1048;
}

/* TEXT BLOCKS */

p, h1, h2, h3, h4 {
	color: white;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	margin: 0;
}

p {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

h1, h2, h3, h4 {
	font-variant: small-caps;
	font-weight: 800;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

/* MARGINS */

.s-before {
	margin-top: 8px;
}

.m-before {
	margin-top: 20px;
}

.l-before {
	margin-top: 60px;
}

.s-after {
	margin-bottom: 8px;
}

.m-after {
	margin-bottom: 20px;
}

.l-after {
	margin-bottom: 60px;
}

/* BLOCKS */

.box, .circle {
	background-color: #c7902d;
	text-align: center;
	overflow: hidden;
	padding: 30px;
	box-sizing: border-box;
}

.box {
	border-radius: 40px;
	margin-left: auto;
	margin-right: auto;
	width: 60cqw;
}

.circle {
	border-radius: 50%;
	width: var(--circle-size);
	height: var(--circle-size);
}

.main-item, .sub-item {
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all var(--transition-duration) ease-in-out;
	transform-origin: center center;
	background-image: url(Sources/Orange.png);
	background-size: 220%;
}

.main-item {
	z-index: 1;
	transform: translate(-50%, -50%) translate(0px, 0px) scale(1);
}

.sub-item {
	z-index: -1;
	transform: translate(-50%, -50%) translate(0px, 0px) scale(var(--sub-item-scale));
}

.main-item:hover, .sub-item:hover {
	box-shadow: 4px 8px 12px #170924;
	text-shadow: 2px 2px 8px #170924;
}

#ars {
	z-index: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translate(0px, 0px) scale(var(--ars-scale));
	width: var(--circle-size);
	height: var(--circle-size);
	transform-origin: center center;
	background-image: url(Sources/Profile-smol.jpg);
	background-size: contain;
	content-visibility: hidden;
}

#addons {
	background-size: 220%;
}

#addons:hover {
	background-image: url(Sources/WidgetTools-Code.png);
	background-size: 220%;
}

#movementSpeed {
	background-image: url(Sources/MovementSpeedLogo.png);
	background-size: 100%;
}

#remainingXP {
	background-image: url(Sources/RemainingXPLogo.png);
	background-size: 100%;
}

#widgetTools {
	background-image: url(Sources/WidgetToolsLogo.png);
	background-size: 100%;
}

#RPKeyboard {
	background-image: url(Sources/RPKeyboardLogo.png);
	background-size: 100%;
}

#support {
	background-size: 100%;
}

#support:hover {
	background: url(Sources/Flow.jpg);
	background-size: 100%;
}

#socials {
	background-size: 100%;
}

#socials:hover {
	background: url(Sources/Hoy.jpg);
	background-size: 100%;
}

#games {
	background-size: 100%;
}

#games:hover {
	background: url(Sources/Rick-Joy.png);
	background-size: 100%;
}