website/src/styles/socials.scss

/* layout */

.section {
	height: 100vh;
	scroll-snap-align: start;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
}

/* content */

#socials {
	content {
		display: flex;
		height: 80%;
		justify-content: center;
		align-content: center;
		flex-direction: column;

		.button-container {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			gap: 2em;
			margin-top: 10em;
			margin-bottom: 2em;
		}

		.button-container.below {
			margin: 0;
			flex-direction: row;
		}

		.toggle-more {
			color: $star-gray;
			cursor: pointer;
			transition: transform 0.3s ease-in-out, margin 0.05s ease-out;
			text-decoration: none;
			align-self: center;
			width: 4em;
		}

		.toggle-more.active {
			margin-top: 2em;
		}

		.round-button {
			width: 5em;
			height: 5em;
			border-radius: 20px;
			border: none;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: ease-in-out 0.1s;
		}

		.icon {
			--shadow: rgba(0, 0, 0, 0.544);
			box-shadow: 7px 9px 38px -10px var(--shadow);
			-webkit-box-shadow: 7px 9px 38px -10px var(--shadow);
			-moz-box-shadow: 7px 9px 38px -10px var(--shadow);
		}

		.button.discord {
			background: linear-gradient(162deg, #6d85d8 24.09%, #4a68cc 89.49%);
		}

		.button.youtube {
			background: linear-gradient(217deg, #ff5554 50%, #ff7171 94.82%);
		}

		.button.github {
			background: linear-gradient(158deg, #24292d 55.62%, #262c30 90.01%);
		}

		.button.email {
			background: linear-gradient(158deg, #ec8f5a 55.62%, #ffaf37 90.01%);
		}

		.button.steam {
			background: linear-gradient(35deg, rgb(23 29 37) 35%, rgb(44 46 53) 100%);
		}

		.button.matrix {
			background: linear-gradient(145deg, rgb(12, 163, 165) 25%, rgb(19, 174, 122) 100%);
		}

		.button.gitpot {
			background: radial-gradient(103.52% 103.52% at 34.04% 26.17%, #fa7042 24.28%, #d23652 120%);

			.icon.gitpot {
				height: 2.7em;
				box-shadow: none;
			}
		}

		.button.mastodon {
			background: linear-gradient(180deg, rgb(99 100 255) 10%, rgb(86 58 204) 100%);
		}

		.button.inactive {
			background: transparent;
			display: none;
		}

		.round-button:hover {
			opacity: 0.9;
		}

		.round-button:active {
			opacity: 0.8;
		}

		// Tooltips
		.tooltip {
			position: relative;
			display: inline-block;
		}

		.tooltip .tooltiptext {
			visibility: hidden;
			background-color: $space-gray-tooltip;
			color: $white;
			text-align: center;
			border-radius: 6px;
			padding: 5px 10px;
			position: absolute;
			z-index: 1000;
			top: 116%;
			left: 50%;
			transform: translateX(-50%);
			opacity: 0;
			transition: opacity ease-in-out 0.1s;
		}
		
		.tooltiptext {
			z-index: 1001;
			user-select: none;
			cursor: default;
			width: max-content;
		}

		.tooltip:hover .tooltiptext {
			visibility: visible;
			opacity: 1;
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
		}

		.tooltiptext:hover {
			visibility: hidden;
			opacity: 0;
		}

	}

	footer {
		margin: 2em;

		svg.logo {
			height: 3em;
			width: 3em;
			cursor: pointer;
		}

		.footer {
			font-size: 18px;
		}

		.footer.footer-credits {
			font-weight: 800;
			margin-bottom: -0.7em;
		}
	}

	@import './mobile/socials.scss';
}