<ul>
	<li>
		<input type="checkbox" name="menu" id="menu">
		<label for="menu">
			<div class="burger_button"></div>
		</label>
		<ul>
			<li class="btn btn_Github">
				<a href="#" title="GitHub">
					<span alt="GitHub"></span>
				</a>
			</li>
			<li class="btn btn_Codepen">
				<a href="#" title="Codepen">
					<span alt="Codepen"></span>
				</a>
			</li>
			<li class="btn btn_StackOverflow">
				<a href="#" title="Stack Overflow">
					<span alt="Stack Overflow"></span>
				</a>
			</li>
			<li class="btn btn_Medium">
				<a href="#" title="Medium">
					<span alt="Medium"></span>
				</a>
			</li>
			<li class="btn btn_Figma">
				<a href="#" title="Figma">
					<span alt="Figma"></span>
				</a>
			</li>
		</ul>
	</li>
</ul>

@font-face {
	font-family: "Font Awesome 6 Brands";
	src: url("https://site-assets.fontawesome.com/releases/v6.3.0/webfonts/fa-brands-400.woff2");
}

body {
	width: 100%;
	height: 100vh;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e5e5e5;
}
ul {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	padding: 0;
	z-index: 0;
	> li {
		display: block;
		width: 64px;
		height: 64px;
		position: relative;
	}
}

#menu {
	display: none;
	~ label {
		display: flex;
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background: #fff;
		position: relative;
		justify-content: center;
		align-items: center;
		transition: all 0.2s ease-in-out;
		&:hover {
			background: #ffe95f;
		}
		.burger_button {
			display: block;
			width: 32px;
			height: 2px;
			background: #505050;
			position: absolute;
			transition: all 0.2s ease-in-out;
			&::before {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background: #505050;
				position: absolute;
				top: -11px;
				left: 0;
				transition: all 0.2s ease-in-out;
			}
			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background: #505050;
				position: absolute;
				top: 11px;
				left: 0;
				transition: all 0.2s ease-in-out;
			}
		}
	}
	~ ul {
		> .btn {
			position: absolute;
			z-index: -1;
			display: block;
			height: 50px;
			width: 50px;
			border-radius: 50%;
			background: #fff;
			top: 7px;
			left: 7px;
			transform-origin: 25px 25px;
			transition: all 0.5s ease-in-out;
			text-align: center;
			line-height: 50px;
			transform: rotate(0deg) translate(0px, 0px) scale(0.5);
			box-shadow: rgba(0, 0, 0, 0.17) 0px 0px 13px,
									rgba(0, 0, 0, 0.09) 0px 0px 5px;
			&:hover {
				background: #ffe95f;
				> a {
					color: #000;
				}
			}
			> a {
				color: #505050;
				text-decoration: none;
				> span {
					transform: rotate(0deg);
					transition: all 0.5s ease-in-out;
					font-family: "Font Awesome 6 Brands";
					font-size: 24px;
					cursor: pointer;
				}
			}
			&_Github,
			&_Codepen,
			&_StackOverflow,
			&_Medium,
			&_Figma {
				> a > span {
					display: block;
					transform: rotate(0deg);
				}
			}
		}
	}
	&:checked {
		~ label {
			background: #ffdd0c;
			&:hover {
				background: #ffe95f;
			}
			> .burger_button {
				background: rgba(0, 0, 0, 0);
				&::before {
					transform: translateY(11px) rotate(45deg);
				}
				&::after {
					transform: translateY(-11px) rotate(-45deg);
				}
			}
		}
		~ ul > .btn {
			opacity: 1;
			&_Github {
				transform: rotate(-180deg) translate(80px, 0px) scale(1);
				> a > span {
					transform: rotate(180deg);
				}
			}
			&_Codepen {
				transform: rotate(-135deg) translate(80px, 0px) scale(1);
				> a > span {
					transform: rotate(135deg);
				}
			}
			&_StackOverflow {
				transform: rotate(-90deg) translate(80px, 0px) scale(1);
				> a > span {
					transform: rotate(90deg);
				}
			}
			&_Medium {
				transform: rotate(-45deg) translate(80px, 0px) scale(1);
				> a > span {
					transform: rotate(45deg);
				}
			}
			&_Figma {
				transform: rotate(0deg) translate(80px, 0px) scale(1);
				> a > span {
					transform: rotate(0deg);
				}
			}
		}
	}
}