@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";*,*::after,*::before{margin:0;padding:0;font-family:"IBM Plex Sans",sans-serif}::-webkit-scrollbar{display:none}body{background-color:#000;height:100vh}a .home{z-index:5;position:fixed;display:flex;align-items:center;justify-content:center;left:-150px;-webkit-animation:animation-left-author 1s cubic-bezier(0.55, 0.5, 0.45, 0.5) forwards;animation:animation-left-author 1s cubic-bezier(0.55, 0.5, 0.45, 0.5) forwards;-webkit-animation-delay:-0.5s;animation-delay:-0.5s;top:15px;width:32px;height:32px;border-radius:0 5px 5px 0px;background-color:#262626;color:#aaa;cursor:pointer;border-left:1px solid rgba(16,255,205,.2);text-shadow:0 0 3px #aaa;opacity:.8;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a .home::before{content:"";position:absolute;height:100%;width:2px;background-color:rgba(16,255,205,.7);left:-5px;top:0px;-webkit-filter:blur(3px);filter:blur(3px);-webkit-animation:animation-left-author-blur 5s linear infinite;animation:animation-left-author-blur 5s linear infinite}a .home:hover{opacity:1;color:#fff;text-shadow:0 0 3px #fff}.container{display:flex;align-items:center;justify-content:center;margin:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:0px;position:relative;align-content:center;height:100%}.container .hackBox{width:720px;height:720px;background-color:#0e0e0e;padding:10px;position:relative}.container .hackBox .hackStart{margin-bottom:20px;display:flex;border:none !important;background-color:#262626;padding:15px;color:#fff;cursor:pointer;border-radius:5px;font-size:13px;border:1px solid;text-align:center;justify-content:space-around;transition:all .2s}.container .hackBox .hackStart:hover{background-color:#077d3a}.container .hackBox .hackButton{margin-top:10px;margin-bottom:10px;display:flex;background-color:#222;border-radius:5px;width:100%;text-align:center;justify-content:space-between;text-transform:uppercase;transition:all .2s}.container .hackBox .hackButton:hover{box-shadow:0 0 0 3px rgba(16,255,205,.1),0 0 0 1px rgba(16,255,205,.15),0 0 10px rgba(16,255,205,.05)}.container .hackBox .hackButton .progress{background:#323232;border-left:2px solid rgba(16,255,205,.2);border-right:2px solid rgba(16,255,205,.2);border-radius:6px;height:4px;width:300px;outline:none;opacity:.8;margin:auto;display:block;-webkit-appearance:none;appearance:none}.container .hackBox .hackButton .progress::-webkit-slider-thumb{width:10px;height:10px;background:#10ffcd;box-shadow:0 0 10px #10ffcd,0 0 0 3px rgba(16,255,205,.2);border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none}.container .hackBox .hackButton .progress:hover{opacity:1}.container .hackBox .hackInfo{font-size:20px;display:flex;height:310px;justify-content:space-around;transform:translateY(100%);text-align:center;color:#fff}.container .hackBox .hackInfo h2{font-size:13px;font-weight:500}.container .hackBox .hackText{display:flex;justify-content:space-around;transform:translateY(100%);text-align:center;color:#fff}.container .hackBox .hackText h2{font-size:16px;font-weight:600;margin-top:-5px}.container .hackBox .hackFunction{position:absolute;display:block;width:720px;height:600px;margin:0 auto;margin-top:50px;margin-bottom:50px;overflow:hidden;z-index:2}.container .hackBox .hackFunction .circle{position:relative;background:#ff0;border-radius:10px;border:1px solid #000;top:45%;left:10px;width:8px;height:8px}.container .hackBox .hackFunction .allLine#line1{left:110px;position:absolute}.container .hackBox .hackFunction .allLine#line2{left:145px;position:absolute}.container .hackBox .hackFunction .allLine#line3{left:180px;position:absolute}.container .hackBox .hackFunction .allLine#line4{left:215px;position:absolute}.container .hackBox .hackFunction .allLine#line5{left:250px;position:absolute}.container .hackBox .hackFunction .allLine#line6{left:285px;position:absolute}.container .hackBox .hackFunction .allLine#line7{left:320px;position:absolute}.container .hackBox .hackFunction .allLine#line8{left:355px;position:absolute}.container .hackBox .hackFunction .allLine#line9{left:390px;position:absolute}.container .hackBox .hackFunction .allLine#line10{left:425px;position:absolute}.container .hackBox .hackFunction .allLine#line11{left:460px;position:absolute}.container .hackBox .hackFunction .allLine#line12{left:495px;position:absolute}.container .hackBox .hackFunction .allLine#line13{left:530px;position:absolute}.container .hackBox .hackFunction .allLine#line14{left:565px;position:absolute}.container .hackBox .hackFunction .allLine#line15{left:600px;position:absolute}.container .hackBox .hackFunction .allLine .line{position:relative;width:13px;height:500px;background-color:var(--color)}.container .hackBox .hackFunction .allLine .line.up{top:0px;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.container .hackBox .hackFunction .allLine .line.down{bottom:-120px;border-top-right-radius:10px;border-top-left-radius:10px}.container .hackBox .hackFooter{width:720px;position:absolute;bottom:10px}.container .hackBox .hackFooter .progressBox{height:4px;width:100%;background-color:#222;border-radius:5px}.container .hackBox .hackFooter .progressBox .progressBar{height:4px;background-color:#10ffcd;border-top-left-radius:5px;border-bottom-left-radius:5px}@-webkit-keyframes animation-left-author{from{left:-500px}to{left:20px}}@keyframes animation-left-author{from{left:-500px}to{left:20px}}@-webkit-keyframes animation-left-author-blur{0%{-webkit-filter:blur(3px);filter:blur(3px)}50%{-webkit-filter:blur(4px);filter:blur(4px)}100%{-webkit-filter:blur(3px);filter:blur(3px)}}@keyframes animation-left-author-blur{0%{-webkit-filter:blur(3px);filter:blur(3px)}50%{-webkit-filter:blur(4px);filter:blur(4px)}100%{-webkit-filter:blur(3px);filter:blur(3px)}}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	font-family: 'IBM Plex Sans', sans-serif;
}

::-webkit-scrollbar {
	display: none;
}

body {
	background-color: black;
	height: 100vh;
}

a .home {
	z-index: 5;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	left: -150px;
	-webkit-animation: animation-left-author 1s cubic-bezier(0.55, 0.5, 0.45, 0.5) forwards;
	animation: animation-left-author 1s cubic-bezier(0.55, 0.5, 0.45, 0.5) forwards;
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
	top: 15px;
	width: 32px;
	height: 32px;
	border-radius: 0 5px 5px 0px;
	background-color: rgba(38 38 38);
	color: #aaa;
	cursor: pointer;
	border-left: 1px solid rgba(16 255 205 / 20%);
	text-shadow: 0 0 3px #aaa;
	opacity: 0.8;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	&::before {
		content: '';
		position: absolute;
		height: 100%;
		width: 2px;
		background-color: rgba(16 255 205 / 70%);
		left: -5px;
		top: 0px;
		-webkit-filter: blur(3px);
		filter: blur(3px);
		-webkit-animation: animation-left-author-blur 5s linear infinite;
		animation: animation-left-author-blur 5s linear infinite;
	}
	&:hover {
		opacity: 1;
		color: #fff;
		text-shadow: 0 0 3px #fff;
	}
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin-top: 0px;
	position: relative;
	align-content: center;
	height: 100%;

	.hackBox {
		width: 720px;
		height: 720px;
		background-color: rgba(14 14 14);
		padding: 10px;
		position: relative;

		.hackStart {
			margin-bottom: 20px;
			display: flex;
			border: none !important;
			background-color: rgba(38 38 38);
			padding: 15px;
			color: #fff;
			cursor: pointer;
			border-radius: 5px;
			font-size: 13px;
			border: 1px solid;
			text-align: center;
			justify-content: space-around;
			transition: all 0.2s;
			&:hover {
				background-color: rgba(7 125 58);
			}
		}

		.hackButton {
			margin-top: 10px;
			margin-bottom: 10px;
			display: flex;
			background-color: rgba(34 34 34);
			border-radius: 5px;
			width: 100%;
			text-align: center;
			justify-content: space-between;
			text-transform: uppercase;
			transition: all 0.2s;

			&:hover {
				box-shadow: 0 0 0 3px rgba(16 255 205 / 10%), 0 0 0 1px rgba(16 255 205 / 15%), 0 0 10px rgba(16 255 205 / 5%);
			}

			.progress {
				background: rgba(50 50 50);
				border-left: 2px solid rgba(16 255 205 / 20%);
				border-right: 2px solid rgba(16 255 205 / 20%);
				border-radius: 6px;
				height: 4px;
				width: 300px;
				outline: none;
				opacity: 0.8;
				margin: auto;
				display: block;
				-webkit-appearance: none;
				appearance: none;
			}

			.progress::-webkit-slider-thumb {
				width: 10px;
				height: 10px;
				background: rgba(16 255 205 / 100%);
				box-shadow: 0 0 10px rgba(16 255 205), 0 0 0 3px rgba(16 255 205 / 20%);
				border-radius: 50%;
				cursor: pointer;
				-webkit-appearance: none;
				appearance: none;
			}

			.progress:hover {
				opacity: 1;
			}
		}

		.hackInfo {
			font-size: 20px;
			display: flex;
			height: 310px;
			justify-content: space-around;
			transform: translateY(100%);
			text-align: center;
			color: #fff;

			h2 {
				font-size: 13px;
				font-weight: 500;
			}
		}

		.hackText {
			display: flex;
			justify-content: space-around;
			transform: translateY(100%);
			text-align: center;
			color: #fff;

			h2 {
				font-size: 16px;
				font-weight: 600;
				margin-top: -5px;
			}
		}

		.hackFunction {
			position: absolute;
			display: block;

			width: 720px;
			height: 600px;
			margin: 0 auto;
			margin-top: 50px;
			margin-bottom: 50px;
			overflow: hidden;
			z-index: 2;

			.circle {
				position: relative;
				background: yellow;
				border-radius: 10px;
				border: 1px solid black;
				top: 45%;
				left: 10px;
				width: 8px;
				height: 8px;
			}

			.allLine {
				@for $i from 1 to 16 {
					&#line#{$i} {
						left: 75 + (35 * $i) + px;
						position: absolute;
					}
				}

				.line {
					position: relative;
					width: 13px;
					height: 500px;
					background-color: var(--color);

					&.up {
						top: 0px;
						border-bottom-right-radius: 10px;
						border-bottom-left-radius: 10px;
					}
					&.down {
						bottom: -120px;
						border-top-right-radius: 10px;
						border-top-left-radius: 10px;
					}
				}
			}
		}

		.hackFooter {
			width: 720px;
			position: absolute;
			bottom: 10px;

			.progressBox {
				height: 4px;
				width: 100%;
				background-color: rgba(34 34 34);
				border-radius: 5px;

				.progressBar {
					height: 4px;
					background-color: rgba(16 255 205);
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
				}
			}
		}
	}
}

@-webkit-keyframes animation-left-author {
	from {
		left: -500px;
	}
	to {
		left: 20px;
	}
}

@keyframes animation-left-author {
	from {
		left: -500px;
	}
	to {
		left: 20px;
	}
}

@-webkit-keyframes animation-left-author-blur {
	0% {
		-webkit-filter: blur(3px);
		filter: blur(3px);
	}
	50% {
		-webkit-filter: blur(4px);
		filter: blur(4px);
	}
	100% {
		-webkit-filter: blur(3px);
		filter: blur(3px);
	}
}

@keyframes animation-left-author-blur {
	0% {
		-webkit-filter: blur(3px);
		filter: blur(3px);
	}
	50% {
		-webkit-filter: blur(4px);
		filter: blur(4px);
	}
	100% {
		-webkit-filter: blur(3px);
		filter: blur(3px);
	}
}