socials.css

:root {
	--dark: #212121;
	--dark-transparent: #212121ca;
	--bg-color: #081f54;
}

body {
	background-color: var(--bg-color);
	color: white;
	text-align: center;
	padding-top: 120px;
}

.mohsreg-caption {
	font-family: "Epilogue", sans-serif;
	font-weight: 700;
	line-height: 180%;
	font-size: 16;
}

.mohsreg-caption span {
	color: rgb(137, 137, 137);
}

.mohsregAnimated {
	width: 95vw;
	height: 200px;
	margin: auto;
}

.mohsregAnimated img {
	height: 100%;
	-webkit-mask-image: -webkit-linear-gradient(
		right,
		rgba(0, 0, 0, 1) 50%,
		rgba(0, 0, 0, 0) 90%
	);
	pointer-events: none;
	user-select: none;
}

.iconset-container {
	margin: auto;
	width: 30em;
	height: 3em;
	padding-bottom: 10px;
}

.socials-iconset {
	display: flex;
	flex-direction: row;
	flex-grow: 2;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;
}

.socials-iconset img {
	height: 100%;
	filter: invert(1);
	transition: all 200ms ease;
	user-select: none;
}

.socials-iconset img:hover {
	scale: 1.2;
	filter: invert(1);
}

.twitch-color:hover {
	filter: brightness(0) saturate(100%) invert(27%) sepia(66%) saturate(2454%)
		hue-rotate(249deg) brightness(108%) contrast(105%);
}

.twitter-color:hover {
	filter: brightness(0) saturate(100%) invert(57%) sepia(93%) saturate(2946%)
		hue-rotate(176deg) brightness(98%) contrast(94%);
}

.youtube-color:hover {
	filter: brightness(0) saturate(100%) invert(21%) sepia(97%) saturate(6940%)
		hue-rotate(8deg) brightness(94%) contrast(129%);
}

.tiktok-color:hover {
	filter: brightness(0) saturate(100%) invert(11%) sepia(75%) saturate(7067%)
		hue-rotate(336deg) brightness(109%) contrast(107%);
}

.telegram-color:hover {
	filter: brightness(0) saturate(100%) invert(58%) sepia(88%) saturate(1877%)
		hue-rotate(169deg) brightness(93%) contrast(92%);
}

.instagram-color:hover {
	filter: brightness(0) saturate(100%) invert(38%) sepia(29%) saturate(4802%)
		hue-rotate(325deg) brightness(93%) contrast(92%);
}

.discord-color:hover {
	filter: brightness(0) saturate(100%) invert(38%) sepia(77%) saturate(1387%)
		hue-rotate(218deg) brightness(91%) contrast(111%);
}

.collapse-wrapper {
	display: flex;
	margin: 5px 0;
	justify-content: center;
	font-family: "Khula", sans-serif;
}

.collapsible {
	width: 80vw;
	overflow: hidden;
	font-weight: 500;
}

.collapsible input {
	display: none;
}

.collapsible label {
	position: relative;
	font-weight: 600;
	display: block;
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.1),
		0 4px 11px 0 rgba(0, 0, 0, 0.08);
	margin-bottom: 10px;
	cursor: pointer;
	padding: 15px;
	border-radius: 12px;

	background: var(--dark);
	color: white;

	z-index: 1;
	transition: all 0.3s ease;
}

.collapsible-content {
	max-height: 1px;
	overflow: hidden;
	border-radius: 12px;
	line-height: 1.4;
	position: relative;
	top: -100%;
	opacity: 0.5;
	transition: all 0.3s ease;
}

.collapsible input:checked ~ .collapsible-content {
	max-height: 400px;
	/* padding-bottom: 25px; */
	margin: auto;
	background: var(--dark-transparent);
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.1),
		0 4px 11px 0 rgba(0, 0, 0, 0.08);
	opacity: 1;
	top: 0;
}

/* Selects all child elements recursively */
.collapsible-content > * {
	margin-bottom: 10px;
	padding: 15px 15px 0;
}