friendenstein/sass/_home.scss

div.home-container {
	width: 100%;
	height: 100%;
	display: flex;

	div.home {
		margin: 35% auto;	
		text-align: center;

		h1 {
			margin: 0;
			font-size: 4rem;
			color: var(--fgColor);
			background-color: var(--bgColor);

			&::before {
				content: none;
			}
		}
	}

	@media (max-width: 650px) {
		div.home {
			margin: auto auto;
		}
	}
}

.social-icon {
	padding: .2em .3em 0 .3em;
	font-size: 32px;
	cursor: pointer;

	&-container {
		position: relative;
		display: inline-block;
		text-align: center;
	}

	&-menu {
		position: absolute;

		display: none;
		opacity: 0;
		transition: all 0.15s ease-out 0.15s;

		background-color: transparent;	

		left: 50%;
		transform: translateX(-50%);
		top: 100%;

		z-index: 10;

		&-arrow {
			margin: 0 auto;
			width: 0;
			height: 0;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-bottom: 4px solid var(--metaColor);
			padding-top: .5em;
		}

		&-inner {
			padding-top: .5em;
			font-weight: bold;
			position: relative;
			padding: .4em 1em;
			border: 2px dashed var(--metaColor);
			border-radius: 0.8rem;
			
			&:before {
				content: "";
				border-color: transparent;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: -1;
				box-shadow: 0 0 20px 1px #000;
				border-radius: 0.8rem;
			}
		}
	}
}

.nolink:hover .social-icon-menu {
	display: inline-block;
	opacity: 1;
}