@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");

:root {
	--divcolor: rgb(30, 30, 30);
	--bgcolor: rgb(19, 19, 19);
}

* {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	color: white;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: var(--bgcolor);
	display: flex;
	justify-content: center;
	align-items: center;
}

.header {
	background: var(--divcolor);
	border-radius: 1.5625rem;
	display: flex;
	align-items: center;
	position: relative;
	padding: 1.25rem;
	margin-bottom: 1rem;
}

#avatar {
	width: 9.375rem !important;
	height: 9.375rem !important;
}

#avatarContainer {
	padding: 1.25rem;
}

#headerText {
	display: flex;
	align-items: baseline;
	height: max-content;
}

#username {
	font-weight: 900;
	font-size: 2.1875rem;
	margin-bottom: 1rem;
}

#discrim {
	color: gray;
	font-weight: 800;
}

#headerInfo {
	width: max-content;
	max-width: 100%;
}

#headerInfo p {
	padding-top: 0.3125rem;
}

#description {
	display: block;
	margin-bottom: 1.25rem;
}

.section-header {
	background: rgb(30, 30, 30);
	margin: 1.5625rem auto 1.5625rem auto;
	border-radius: 1.5625rem;
}

.section-header h1 {
	padding: 1.5625rem 1.5625rem 0.3125rem 1.5625rem;
}

.section-header p {
	padding: 0 1.5625rem 1.5625rem 1.5625rem;
}

.hovereffect {
	text-decoration: none;
	font-weight: inherit;
	color: inherit;
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		to right,
		rgb(235, 15, 228),
		dodgerblue 50%,
		white 50%
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% 100%;
	background-position: 100%;
	transition: background-position 275ms ease;
}

.hovereffect:hover {
	background-position: 0 100%;
}

.onlineBox {
	width: auto;
	position: relative;
	display: flex;

	vertical-align: middle;
	align-items: center;
	flex-wrap: wrap;
}

.onlineBox p {
	font-weight: normal;
	cursor: pointer;
	float: left;
}

.blob {
	--pulsecolor: #000;
	background: rgb(var(--pulsecolor));
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	margin: 0.625rem;
	height: 1.25rem;
	width: 1.25rem;
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--pulsecolor), 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 0.625rem rgba(var(--pulsecolor), 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(var(--pulsecolor), 0);
	}
}

.blob.green {
	--pulsecolor: 0, 255, 0;
}

.blob.red {
	--pulsecolor: 255, 0, 0;
}
.blob.orange {
	--pulsecolor: 255, 165, 0;
}

.blob.gray {
	--pulsecolor: 128, 128, 128;
}

.games {
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.game:before {
	content: "";
	z-index: -1;
	-webkit-filter: blur(0.3125rem);
	-moz-filter: blur(0.3125rem);
	-o-filter: blur(0.3125rem);
	-ms-filter: blur(0.3125rem);
	filter: blur(0.3125rem);
}

.game {
	width: 50%;
	position: relative;
	height: 9.375rem;
	margin-bottom: 0.625rem;
}

.gameInner {
	margin: 0.3125rem;
	height: 100%;
	border-radius: 1.5625rem;
}

.savingContainer {
	margin: -0.625rem;
	height: 100%;
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
}

.saving {
	font-size: 2.5rem;
}

.hoursDiv {
	display: flex;
	align-items: baseline;
	margin-bottom: -0.125rem;
}

.gameHours {
	font-size: 2.5rem;
	font-weight: 800;
	text-shadow: 0 0 0.25rem black;
}

.hoursDiv h3 {
	font-size: 0.875rem;
	padding-left: 0.3125rem;
	text-shadow: 0 0 0.25rem black;
}

.gameHeader {
	position: absolute;
	bottom: 0;
	margin: 0.3125rem;
	margin-bottom: -0.3125rem;
	margin-left: 0.625rem;
}

.gameHeader img {
	max-height: 12.5rem;
	width: 12.5rem;
	display: static;
	object-fit: cover;
}

.gameHeader div h1 {
	font-size: 0.9375rem;
	text-shadow: 0 0 0.125rem black;
	margin-bottom: 0.625rem;
}

.socials {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.socials div {
	height: 6.25rem;
	position: relative;
	margin-bottom: 0.625rem;
}

.socials div a {
	text-decoration: none;
}

.socials div a div {
	background: var(--divcolor);
	border-radius: 1.5625rem;
	width: auto;
	display: flex;
	color: white;
	text-decoration: none;
}

.socials div a div img {
	width: 2.5rem;
	color: white;

	height: 100%;
	margin: auto 3.125rem auto 3.125rem;
}

.socials div a div h1 {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media screen and (max-width: 62.5rem) {
	.content {
		width: 90%;
	}
	#avatar {
		width: 7.5rem !important;
		height: 7.5rem !important;
	}
	.socials {
		grid-template-columns: 1fr;
	}
	.socials div a div h1 {
		font-size: 1.375rem;
	}
	.socials div a div img {
		margin: auto 0.625rem auto 0.625rem;
		height: 1.875rem;
		width: 1.875rem;
	}

	.game {
		width: 25%;
		height: 6.25rem;
	}

	.gameHeader h1 {
		display: none;
	}

	.hoursDiv {
		display: block;
	}

	.hoursDiv h3 {
		margin-bottom: 0.625rem;
	}

	.hoursDiv p {
		font-size: 1.5625rem;
	}

	#headerText {
		flex-direction: column;
	}

	.onlineBox {
		flex-wrap: wrap;
		margin-bottom: 0.3125rem;
	}

	#status {
		display: block;
		word-break: break-word;
	}

	.header {
		margin: 1.5625rem auto 1.5625rem auto;
	}
}

@keyframes blink {
	/**
     * At the start of the animation the dot
     * has an opacity of .2
     */
	0% {
		opacity: 0.2;
	}
	/**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
	20% {
		opacity: 1;
	}
	/**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
	100% {
		opacity: 0.2;
	}
}

.saving span {
	/**
     * Use the blink animation, which is defined above
     */
	animation-name: blink;
	/**
     * The animation should take 1.4 seconds
     */
	animation-duration: 1.4s;
	/**
     * It will repeat itself forever
     */
	animation-iteration-count: infinite;
	/**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
	animation-fill-mode: both;
}

.saving span:nth-child(2) {
	/**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
	animation-delay: 0.2s;
}

.saving span:nth-child(3) {
	/**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
	animation-delay: 0.4s;
}

.footer {
	background: rgb(31, 31, 31);
	margin-top: 1.25rem;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.footer a {
	color: white;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.footer a a {
	font-weight: 500;
}