<h1 class="challenge-title">The Scrpttag has You</h1>
<h2 class="challenge-subtitle">#28ComponentsOfFebruaryDay28</h2>
<p class="challenge-part-of">Part of <a href="https://codepen.io/collection/DQRePJ" target="_blank">28 Components of February</a> collection.</p>

<div class="welcome-to-scrpttag">
	<header class="main-header">
		<a class="logo" href="#">
			<div class="glitch-container glitch-hover">
				<diy class="svg-container">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.78649 574">
						<path d="M161.8744,333.99309V261.04868h28.95383a7.0387,7.0387,0,0,0,6.44692-4.21373L235.912,168.66036a3.83521,3.83521,0,0,0-3.51277-5.37445H161.8744V12.72515a14.808,14.808,0,0,0-2.51427-8.993,8.83976,8.83976,0,0,0-7.34924-3.288,23.28046,23.28046,0,0,0-5.22213.96676L69.81655,31.58162c-7.25244,2.51368-10.82908,7.54223-10.82908,15.08505V163.28591H12.66816C4.2542,163.28591,0,167.5407,0,176.05028v72.234c0,8.50958,4.2542,12.76437,12.66816,12.76437h46.8021v302.0484c0,11.68509,15.90325,15.16355,20.78154,4.54548l80.14288-226.8843A16.20471,16.20471,0,0,0,161.8744,333.99309Z" />
						<path d="M274.4304,250.56552a66.78174,66.78174,0,0,0-3.57579,21.55939V560.42968c0,4.0612,1.06355,7.25244,3.28863,9.47634,2.22389,2.1271,5.31775,3.28744,9.47633,3.28744H360.979c8.218,0,12.281-4.25479,12.281-12.76378v-299.381h97.76159a12.765,12.765,0,0,0,12.765-12.765V176.05087a12.765,12.765,0,0,0-12.765-12.765H373.25994V7.82606c0-8.39561-11.43241-10.88495-14.9231-3.24943Z" />
					</svg>
				</diy>
				<diy class="svg-container">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.78649 574">
						<path d="M161.8744,333.99309V261.04868h28.95383a7.0387,7.0387,0,0,0,6.44692-4.21373L235.912,168.66036a3.83521,3.83521,0,0,0-3.51277-5.37445H161.8744V12.72515a14.808,14.808,0,0,0-2.51427-8.993,8.83976,8.83976,0,0,0-7.34924-3.288,23.28046,23.28046,0,0,0-5.22213.96676L69.81655,31.58162c-7.25244,2.51368-10.82908,7.54223-10.82908,15.08505V163.28591H12.66816C4.2542,163.28591,0,167.5407,0,176.05028v72.234c0,8.50958,4.2542,12.76437,12.66816,12.76437h46.8021v302.0484c0,11.68509,15.90325,15.16355,20.78154,4.54548l80.14288-226.8843A16.20471,16.20471,0,0,0,161.8744,333.99309Z" />
						<path d="M274.4304,250.56552a66.78174,66.78174,0,0,0-3.57579,21.55939V560.42968c0,4.0612,1.06355,7.25244,3.28863,9.47634,2.22389,2.1271,5.31775,3.28744,9.47633,3.28744H360.979c8.218,0,12.281-4.25479,12.281-12.76378v-299.381h97.76159a12.765,12.765,0,0,0,12.765-12.765V176.05087a12.765,12.765,0,0,0-12.765-12.765H373.25994V7.82606c0-8.39561-11.43241-10.88495-14.9231-3.24943Z" />
					</svg>
				</diy>
				<diy class="svg-container">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.78649 574">
						<path d="M161.8744,333.99309V261.04868h28.95383a7.0387,7.0387,0,0,0,6.44692-4.21373L235.912,168.66036a3.83521,3.83521,0,0,0-3.51277-5.37445H161.8744V12.72515a14.808,14.808,0,0,0-2.51427-8.993,8.83976,8.83976,0,0,0-7.34924-3.288,23.28046,23.28046,0,0,0-5.22213.96676L69.81655,31.58162c-7.25244,2.51368-10.82908,7.54223-10.82908,15.08505V163.28591H12.66816C4.2542,163.28591,0,167.5407,0,176.05028v72.234c0,8.50958,4.2542,12.76437,12.66816,12.76437h46.8021v302.0484c0,11.68509,15.90325,15.16355,20.78154,4.54548l80.14288-226.8843A16.20471,16.20471,0,0,0,161.8744,333.99309Z" />
						<path d="M274.4304,250.56552a66.78174,66.78174,0,0,0-3.57579,21.55939V560.42968c0,4.0612,1.06355,7.25244,3.28863,9.47634,2.22389,2.1271,5.31775,3.28744,9.47633,3.28744H360.979c8.218,0,12.281-4.25479,12.281-12.76378v-299.381h97.76159a12.765,12.765,0,0,0,12.765-12.765V176.05087a12.765,12.765,0,0,0-12.765-12.765H373.25994V7.82606c0-8.39561-11.43241-10.88495-14.9231-3.24943Z" />
					</svg>
				</diy>
			</div>
		</a>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Challenges</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<main class="main-content">
		<article class="thank-you">
			<h3>Welcome Home!</h3>
			<p>If you see this, you've probably followed me on my path through this this challenge. I would like to thank you. It was such an intensive new experience to me. It was fun and challenging. I hope you enjoyed this ride as much as I did which is only a beginning of a greater adventure.</p>
			<p>If you get here by accident, I suggest you to check out all the <strong>other 27 components of the challenge</strong>. You can find the link on the bottom right of the page. Yeah, it's a bit dark, but I don't want it to disturb you.</p>
			<p><em>Anyway, what can you see now?</em> It's an early prototype layout/design of my blog, the Scrpttag. I describe this with a short sentence: <strong>A blog about my path in tech era.</strong></p>
			<p>Until then, You can find me on some social media platform besides Codepen. Let me know your opinion about the components or ask me anything related to this topic. And of course if you like what I achieved in this interesting challenge, don't forget to follow me on <strong>facebook</strong> & <strong>instagram</strong> & <strong>twitter</strong>. It will help a lot.</p>
			<p><strong>Thank you, Guys!</strong> See you next time.</p>
			<div class="svg-container">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 801.90879 212.81068">
      <path d="M84.34338,101.49515A33.29437,33.29437,0,0,0,71.60244,90.145,93.68539,93.68539,0,0,0,50.56631,82.57a103.54316,103.54316,0,0,1-12.24419-3.70056c-2.75677-1.09279-4.64434-2.21045-5.63785-3.37783a6.37588,6.37588,0,0,1-1.515-4.32146,6.91671,6.91671,0,0,1,3.45225-6.10959c2.30974-1.51512,5.56327-2.26017,9.76058-2.26017a47.08562,47.08562,0,0,1,14.05718,2.30974,76.56409,76.56409,0,0,1,13.337,5.464,7.93816,7.93816,0,0,0,1.34125.24845c1.36595,0,2.558-.81963,3.52668-2.434l7.873-13.21284a4.73462,4.73462,0,0,0,.8445-2.558c0-1.44054-.89407-2.65748-2.65749-3.62613A79.01559,79.01559,0,0,0,65.17,41.59044,70.73539,70.73539,0,0,0,44.38214,38.4362q-11.8841,0-20.4898,4.29675a32.04745,32.04745,0,0,0-13.11355,11.3997,28.266,28.266,0,0,0-4.47047,15.3487c0,7.02867,1.41568,12.81553,4.2966,17.33572A30.79638,30.79638,0,0,0,23.023,97.74488a104.56264,104.56264,0,0,0,21.235,7.3764q10.05844,2.57055,14.67808,5.29011c3.0548,1.813,4.59463,4.17245,4.59463,7.07823,0,3.00523-1.49011,5.1411-4.47048,6.43248-3.00507,1.29152-7.40111,1.93729-13.23754,1.93729q-14.0449,0-31.1446-8.84166a5.95935,5.95935,0,0,0-2.68234-.72019,3.94661,3.94661,0,0,0-3.40254,2.16073L.84434,132.16771A4.37842,4.37842,0,0,0,0,134.7259c0,1.366.79477,2.50847,2.409,3.37768a110.90286,110.90286,0,0,0,19.64546,8.44434,75.5915,75.5915,0,0,0,23.76819,3.82471q19.8936,0,31.41761-8.12146c7.67442-5.43912,11.524-13.26241,11.524-23.5446C88.76428,111.85178,87.29889,106.08978,84.34338,101.49515Z" />
      <path d="M185.89833,117.01773a3.11153,3.11153,0,0,0-2.65748-1.34109,4.74291,4.74291,0,0,0-2.1856.6209,34.01759,34.01759,0,0,1-22.4518,8.36976,28.08445,28.08445,0,0,1-14.90167-4.14774,30.59928,30.59928,0,0,1-10.80366-11.07682,30.583,30.583,0,0,1-.04972-30.15109,29.3511,29.3511,0,0,1,10.72923-10.90309A28.66773,28.66773,0,0,1,158.50416,64.39q11.99574,0,22.6754,8.59335a3.79994,3.79994,0,0,0,2.18544.74506,3.14506,3.14506,0,0,0,2.65748-1.58955l9.71086-14.77753a4.43569,4.43569,0,0,0,.84464-2.43389,3.49507,3.49507,0,0,0-1.34124-2.55819,57.4927,57.4927,0,0,0-37.10518-13.58529A56.19963,56.19963,0,0,0,109.50239,66.501a55.52079,55.52079,0,0,0,.04972,55.90614,56.4539,56.4539,0,0,0,20.51466,20.31593,54.95733,54.95733,0,0,0,28.18894,7.52542,53.92275,53.92275,0,0,0,19.695-3.651,57.63162,57.63162,0,0,0,17.0377-10.18275,3.43813,3.43813,0,0,0,1.58954-2.78163,3.3049,3.3049,0,0,0-.84464-2.1856Z" />
      <path d="M302.92613,48.37065a31.82331,31.82331,0,0,0-11.69771-7.277,42.79329,42.79329,0,0,0-14.728-2.53333A37.48575,37.48575,0,0,0,258.37,43.22955a40.447,40.447,0,0,0-14.25591,12.66652l-2.18529-11.8966c-.32318-1.44039-1.46555-2.16073-3.40284-2.16073H223.12765a3.61216,3.61216,0,0,0-2.60791.89421,3.42219,3.42219,0,0,0-.89376,2.48361v98.351c0,2.35946,1.1175,3.52668,3.37737,3.52668h19.422c2.25987,0,3.37768-1.16722,3.37768-3.52668V87.66142A24.617,24.617,0,0,1,249.37961,74.697a25.98291,25.98291,0,0,1,9.7107-9.413A26.94127,26.94127,0,0,1,272.477,61.83179a30.42634,30.42634,0,0,1,8.74237,1.34124,23.33961,23.33961,0,0,1,7.87316,3.99858l.8692.7202a2.21254,2.21254,0,0,0,1.689.6209,2.77147,2.77147,0,0,0,2.65733-1.5894L303.423,52.866a4.01436,4.01436,0,0,0,.72-2.18559A2.66674,2.66674,0,0,0,302.92613,48.37065Z" />
      <path d="M425.34349,65.95467a49.8223,49.8223,0,0,0-18.00619-19.993,47.38951,47.38951,0,0,0-25.95393-7.277,45.36306,45.36306,0,0,0-21.28443,5.0168,44.62606,44.62606,0,0,0-16.0692,14.25591l-2.18529-14.05718c-.22374-1.31639-1.16723-1.962-2.78194-1.962H323.06819a3.16363,3.16363,0,0,0-2.38417.96849,3.69315,3.69315,0,0,0-.89406,2.55819V195.59927a3.58675,3.58675,0,0,0,.89406,2.53318,3.09477,3.09477,0,0,0,2.38417.9935h19.52146a3.62279,3.62279,0,0,0,2.60762-.91892,3.53322,3.53322,0,0,0,.89406-2.60776l-.22344-62.21447a44.59084,44.59084,0,0,0,15.62172,12.4925,45.80562,45.80562,0,0,0,20.01806,4.37118,47.41908,47.41908,0,0,0,25.82963-7.277,50.05535,50.05535,0,0,0,18.00619-20.01791,61.88709,61.88709,0,0,0,6.48219-28.48711A61.9902,61.9902,0,0,0,425.34349,65.95467Zm-22.97342,43.662a29.36167,29.36167,0,0,1-10.80365,10.90294,28.66348,28.66348,0,0,1-14.90168,4.02344,30.38909,30.38909,0,0,1-15.39857-4.02344,29.66308,29.66308,0,0,1-11.10168-10.85338,28.96016,28.96016,0,0,1-4.07316-15.07554,30.2666,30.2666,0,0,1,30.44911-30.449,28.8657,28.8657,0,0,1,14.97626,4.073,29.8282,29.8282,0,0,1,10.85337,11.02724,30.37143,30.37143,0,0,1,3.99858,15.34871A29.58846,29.58846,0,0,1,402.37007,109.61662Z" />
      <path d="M482.64029,85.78243v-18.735h7.43647a1.8078,1.8078,0,0,0,1.65582-1.08225L501.656,43.31854a.985.985,0,0,0-.90221-1.38036H482.64029V3.26831a3.80328,3.80328,0,0,0-.64576-2.30974A2.2704,2.2704,0,0,0,480.107.11408a5.97933,5.97933,0,0,0-1.34125.2483l-19.76946,7.749a3.77035,3.77035,0,0,0-2.78133,3.87443V41.93818h-11.8966c-2.161,0-3.25368,1.09279-3.25368,3.27838V63.76908c0,2.18559,1.09265,3.27838,3.25368,3.27838h12.0206v77.57779a2.79643,2.79643,0,0,0,5.33751,1.16746L482.26024,87.52A4.162,4.162,0,0,0,482.64029,85.78243Z" />
      <path d="M511.54905,64.355a17.15221,17.15221,0,0,0-.9184,5.53729v74.04789a3.29874,3.29874,0,0,0,.84465,2.43389,3.36385,3.36385,0,0,0,2.43389.84434h19.8689c2.11071,0,3.15424-1.09279,3.15424-3.27823V67.04746h25.109a3.27854,3.27854,0,0,0,3.27854-3.27854V45.21672a3.27854,3.27854,0,0,0-3.27854-3.27854h-25.109V2.01a2.00728,2.00728,0,0,0-3.83284-.83458Z" />
      <path d="M664.81351,57.83321a38.83426,38.83426,0,0,0-16.839-14.18133q-10.87839-4.99216-25.30817-4.96723a89.43069,89.43069,0,0,0-20.41522,2.409A58.85833,58.85833,0,0,0,584.717,47.89876q-3.50214,1.93728-3.50229,4.84307a4.791,4.791,0,0,0,.472,2.18559L587.49834,66.203c.4969,1.21694,1.58985,1.81314,3.27853,1.81314a7.96388,7.96388,0,0,0,3.02994-.72035,48.72534,48.72534,0,0,1,13.41157-4.9175,70.1686,70.1686,0,0,1,15.34885-1.76342q9.57412,0,15.746,5.63785,6.18432,5.66271,6.18417,15.22455v5.09138l-35.88838.12415q-17.32283.11187-26.798,7.64957-9.4627,7.52541-9.46241,22.30279a31.33132,31.33132,0,0,0,18.6271,29.60477,46.95661,46.95661,0,0,0,20.06717,4.12273q12.96485,0,22.1788-4.32146a38.283,38.283,0,0,0,14.80253-11.69787l1.813,10.6795a2.81759,2.81759,0,0,0,1.04292,1.44054,2.68619,2.68619,0,0,0,1.76327.6209h14.77768a3.236,3.236,0,0,0,2.48361-.96864,3.704,3.704,0,0,0,.91892-2.6822V79.54C670.82365,71.21991,668.81178,63.96781,664.81351,57.83321Zm-20.31609,49.22521a19.49911,19.49911,0,0,1-3.502,11.30041,24.15929,24.15929,0,0,1-9.537,7.99731,29.47777,29.47777,0,0,1-13.01411,2.90578q-8.38219,0-14.08219-3.94886-5.7-3.91186-5.68757-10.10832a9.65451,9.65451,0,0,1,3.502-7.94759c2.35961-1.91243,5.66271-2.85621,9.95931-2.85621h32.36154Z" />
      <path d="M796.99129,156.60652a30.66641,30.66641,0,0,0-13.88362-11.02724c-5.98528-2.5582-13.039-3.82471-21.21014-3.82471H730.35577a16.86663,16.86663,0,0,1-8.91608-2.11116c-2.285-1.41568-3.45226-3.25353-3.45226-5.53841a9.36489,9.36489,0,0,1,1.391-5.09138,8.94733,8.94733,0,0,1,3.82486-3.27838,46.58653,46.58653,0,0,0,19.04911,4.02344,48.41889,48.41889,0,0,0,23.76834-5.83658,42.64057,42.64057,0,0,0,16.54064-16.11862,44.2303,44.2303,0,0,0,5.88615-23.172,37.83732,37.83732,0,0,0-6.53191-21.086h10.90309A4.77158,4.77158,0,0,0,796.39524,62.13a4.56111,4.56111,0,0,0,1.39067-3.32811v-12.12a4.60906,4.60906,0,0,0-1.31609-3.52669,5.30908,5.30908,0,0,0-3.65114-1.21694H760.20884a75.49474,75.49474,0,0,0-9.661-2.48362,46.61718,46.61718,0,0,0-8.04719-.89421,45.91363,45.91363,0,0,0-23.346,5.93587,42.03946,42.03946,0,0,0-16.1932,16.36707,47.807,47.807,0,0,0-5.83612,23.64389,46.77982,46.77982,0,0,0,2.55789,15.52258,43.139,43.139,0,0,0,7.27712,13.11354,22.58607,22.58607,0,0,0-9.16469,9.21426,27.58641,27.58641,0,0,0-3.328,13.46114A26.75637,26.75637,0,0,0,699.0129,151.391a29.06867,29.06867,0,0,0,12.74064,10.18276,46.0238,46.0238,0,0,0,18.60223,3.5764h31.54176c5.58813,0,9.71131.81964,12.41806,2.43389,2.70736,1.61441,4.07346,4.32147,4.07346,8.12147q0,6.55677-8.24576,10.0586-8.233,3.53919-22.55109,3.52668a130.46779,130.46779,0,0,1-20.4898-1.68884,96.91274,96.91274,0,0,1-18.08077-4.49533,6.09976,6.09976,0,0,0-1.46525-.2483,3.71036,3.71036,0,0,0-2.161.67047,3.8755,3.8755,0,0,0-1.46494,1.88757L698.218,199.59785a5.37158,5.37158,0,0,0-.34774,1.68883,4.07971,4.07971,0,0,0,.67062,2.26018,5.00781,5.00781,0,0,0,1.86271,1.63911,100.64184,100.64184,0,0,0,21.90533,5.63785,167.06428,167.06428,0,0,0,25.28331,1.98686q16.35463,0,28.68554-4.6692,12.29406-4.65678,18.97514-13.46114,6.66819-8.79216,6.65591-21.03627A29.51429,29.51429,0,0,0,796.99129,156.60652ZM724.4202,73.52965A20.9996,20.9996,0,0,1,731.995,65.7808,20.29682,20.29682,0,0,1,742.625,62.92458a21.2486,21.2486,0,0,1,18.60224,10.60507,21.42,21.42,0,0,1,2.85621,10.97753,20.45468,20.45468,0,0,1-10.60507,18.13049,22.088,22.088,0,0,1-10.97768,2.73191A20.711,20.711,0,0,1,731.871,102.588a20.32526,20.32526,0,0,1-7.50056-7.575A20.92082,20.92082,0,0,1,721.63827,84.383,21.59825,21.59825,0,0,1,724.4202,73.52965Z" />
    </svg>
			</div>
		</article>
	</main>
	<footer class="main-footer">
		<ul>
			<li>
				<a className="p-4 inline-flex items-center" href="https://www.facebook.com/scrpttag" target="_blank">
					Facebook
				</a>
			</li>
			<li>
				<a className="p-4 inline-flex items-center" href="https://twitter.com/scrpttag" target="_blank">
					Twitter
				</a>
			</li>
			<li>
				<a className="p-4 inline-flex items-center" href="https://www.instagram.com/scrpttag" target="_blank">
					Instagram
				</a>
			</li>
			<li>2021 © scrpttag.com</li>
		</ul>
	</footer>
</div>

<div class="console">
	<div class="line line-prompt">type init scrpttag</div>
	<div class="line line-prompt cl-input" contenteditable></div>
	<div class="line cl-loading"></div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap');


$primary: #70e000;
$default: #d1d5da;
$defaultBg: #2f363d;
$dark: #f5f6f7;
$darkBg: #181a1b;

$easingFunction: cubic-bezier(0.175, 0.885, 0.32, 1.275);

* {
	box-sizing: border-box;
}

.sr-only {
	visibility: hidden;
}

.hidden {
	width: 0;
	height: 0;
	visibility: hidden;
	display: none;
	overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Source Code Pro', monospace;
}

html {
	font-size: 16px;
}

body {
	display: flex;
	padding: 0;
	margin: 0;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	font-family: "Source Sans Pro", sans-serif;
	position: relative;
	background-color: $darkBg;
}

.challenge-title {
	text-align: center;
	padding: 0;
	margin: 1rem 0 0.5rem;
	color: lighten($darkBg, 40%);
	font-size: 2rem;
	font-weight: bold;
	position: relative;
	z-index: 2;
	transition: color .3s ease-in-out;
	&.init {
		color: lighten($darkBg, 20%);
	}
}

.challenge-subtitle {
	text-align: center;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 400;
	color: lighten($darkBg, 20%);
	position: relative;
	z-index: 2;
	transition: color .3s ease-in-out;
	&.init {
		color: lighten($darkBg, 10%);
	}
}

.challenge-part-of {
	text-align: center;
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: lighten($darkBg, 20%);
	position: fixed;
	z-index: 2;
	bottom: 1rem;
	right: 1rem;
	transition: right .3s ease-in-out;
	&.init {
		right: 92px;
	}
	font-weight: bold;
	a,
	a:visited {
		color: lighten($darkBg, 20%);
		text-decoration-style: wavy;
		&:hover,
		&:active {
			color: lighten(lighten($darkBg, 20%), 10%);
		}
	}
}

.glitch-container {
	position: relative;
	.svg-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		&:nth-of-type(1) {
			left: 2px;
			background-color: $darkBg;
			display: none;
			svg {
				filter: drop-shadow(-2px 0 2px #ff0000);
			}
		}
		&:nth-of-type(3) {
			left: -2px;
			background-color: $darkBg;
			display: none;
			svg {
				filter: drop-shadow(2px 0 2px #0000ff);
			}
		}
	}
	&.glitch-hover:hover {
		.svg-container {
			&:nth-of-type(1) {
				display: block;
				animation: glitchAnimationRed 2s ease infinite alternate-reverse;
			}
			&:nth-of-type(3) {
				display: block;
				animation: glitchAnimationBlue 3s ease infinite alternate-reverse;
			}
		}
	}
	&.animated {
		.svg-container {
			&:nth-of-type(1) {
				display: block;
				animation: glitchAnimationRed 2s ease alternate-reverse;
			}
			&:nth-of-type(3) {
				display: block;
				animation: glitchAnimationBlue 3s ease alternate-reverse;
			}
		}
	}
}

.welcome-to-scrpttag {
	transform: scaleX(0) scaleY(0);
	pointer-events: none;
	&.init {
		pointer-events: initial;
		animation: init .8s ease-in-out forwards;
	}
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: $darkBg;
	z-index: 1;
	display: flex;
	align-items: stretch;
	.main-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 200px;
		height: 100%;
		padding: 1.25rem;
		display: flex;
		flex-direction: column;
		border-right: 1px solid lighten($darkBg, 15%);
		.logo {
			align-self: center;
			margin-top: 0.875rem;
		}
		.glitch-container {
			width: 42px;
			height: 42px;
			.svg-container {
				svg {
					fill: $dark;
				}
			}
		}
		nav {
			margin: auto 0;
			ul {
				display: flex;
				flex-direction: column;
				li {
					a,
					a:visited {
						display: block;
						padding: .5rem;
						text-decoration: none;
						font-weight: normal;
						transition: color 0.3s $easingFunction;
						color: $dark;
						&:hover,
						&:active {
							color: darken($dark, 15%);
						}
					}
				}
			}
		}
	}
	.main-content {
		flex: 1;
		margin: 0 92px 0 217px;
		padding: 1rem 0;
		.thank-you {
			width: 700px;
			padding: .875rem 1rem;
			color: $dark;
			h3 {
				font-size: 2rem;
				margin-bottom: 1rem;
				line-height: 1.25;
			}
			h4 {
				font-size: 1.25rem;
				margin: 1rem 0;
			}
			p {
				margin-bottom: .5rem;
				line-height: 1.5;
				strong {
					font-weight: bold;
				}
				em {
					font-style: italic;
				}
			}
			.svg-container {
				width: 100px;
				height: 50px;
				margin-top: 1rem;
				svg {
					fill: $dark;
				}
			}
		}
	}
	.main-footer {
		position: fixed;
		top: 0;
		right: 0;
		width: 75px;
		height: 100%;
		padding: 0.875rem;
		border-left: 1px solid lighten($darkBg, 15%);
		display: flex;
		align-items: center;
		flex-direction: column;
		ul {
			height: 100%;
			writing-mode: tb;
			display: flex;
			align-items: center;
			text-transform: uppercase;
			margin: -1rem 0;
			li {
				padding: 1rem 0;
				font-size: 0.875rem;
				color: lighten($darkBg, 20%);
				font-weight: bold;
				&:last-of-type {
					margin-top: auto;
					padding: 0;
				}
				a,
				a:visited {
					text-decoration: none;
					transition: color 0.3s $easingFunction;
					color: lighten($darkBg, 20%);
					&:hover,
					&:active {
						color: lighten($darkBg, 30%);
					}
				}
			}
		}
	}
}

.console {
	width: 700px;
	min-height: 350px;
	background-color: black;
	margin: 2rem 0;
	padding: .5rem;
	font-family: 'Source Code Pro', monospace;
	.line {
		color: $primary;
		padding: .5rem 0 .5rem 1rem;
		&.cl-loading {
			line-height: 1.5;
			&.error {
				color: red;
			}
		}
		&.line-prompt {
			padding-left: 2rem;
			position: relative;
			&::before {
				content: '$';
				position: absolute;
				left: 1rem;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			&[contenteditable]:focus {
				outline: 0;
			}
		}
	}
}

@keyframes glitchAnimationRed {
	0% {
		clip-path: inset(79% 0 14% 0);
	}
	5.8823529412% {
		clip-path: inset(48% 0 2% 0);
	}
	11.7647058824% {
		clip-path: inset(65% 0 1% 0);
	}
	17.6470588235% {
		clip-path: inset(85% 0 16% 0);
	}
	23.5294117647% {
		clip-path: inset(25% 0 53% 0);
	}
	29.4117647059% {
		clip-path: inset(11% 0 5% 0);
	}
	35.2941176471% {
		clip-path: inset(24% 0 68% 0);
	}
	41.1764705882% {
		clip-path: inset(64% 0 11% 0);
	}
	47.0588235294% {
		clip-path: inset(91% 0 8% 0);
	}
	52.9411764706% {
		clip-path: inset(65% 0 27% 0);
	}
	58.8235294118% {
		clip-path: inset(75% 0 26% 0);
	}
	64.7058823529% {
		clip-path: inset(58% 0 12% 0);
	}
	70.5882352941% {
		clip-path: inset(85% 0 6% 0);
	}
	76.4705882353% {
		clip-path: inset(64% 0 22% 0);
	}
	82.3529411765% {
		clip-path: inset(96% 0 5% 0);
	}
	88.2352941176% {
		clip-path: inset(64% 0 20% 0);
	}
	94.1176470588% {
		clip-path: inset(25% 0 54% 0);
	}
	100% {
		clip-path: inset(32% 0 69% 0);
	}
}

@keyframes glitchAnimationBlue {
	0% {
		clip-path: inset(90% 0 3% 0);
	}
	5.8823529412% {
		clip-path: inset(91% 0 2% 0);
	}
	11.7647058824% {
		clip-path: inset(8% 0 93% 0);
	}
	17.6470588235% {
		clip-path: inset(75% 0 9% 0);
	}
	23.5294117647% {
		clip-path: inset(13% 0 9% 0);
	}
	29.4117647059% {
		clip-path: inset(40% 0 47% 0);
	}
	35.2941176471% {
		clip-path: inset(9% 0 83% 0);
	}
	41.1764705882% {
		clip-path: inset(5% 0 35% 0);
	}
	47.0588235294% {
		clip-path: inset(51% 0 11% 0);
	}
	52.9411764706% {
		clip-path: inset(94% 0 3% 0);
	}
	58.8235294118% {
		clip-path: inset(52% 0 32% 0);
	}
	64.7058823529% {
		clip-path: inset(86% 0 14% 0);
	}
	70.5882352941% {
		clip-path: inset(54% 0 39% 0);
	}
	76.4705882353% {
		clip-path: inset(3% 0 7% 0);
	}
	82.3529411765% {
		clip-path: inset(12% 0 80% 0);
	}
	88.2352941176% {
		clip-path: inset(88% 0 6% 0);
	}
	94.1176470588% {
		clip-path: inset(13% 0 39% 0);
	}
	100% {
		clip-path: inset(57% 0 18% 0);
	}
}

@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes blink-caret {
	from,
	to {
		border-color: transparent;
	}
	50% {
		border-color: white;
	}
}

@keyframes init {
	0% {
		transform: scaleY(0) scaleX(0);
	}
	50% {
		transform: scaleY(1) scaleX(0.005);
	}
	65%,
	100% {
		transform: scaleY(1) scaleX(1);
	}
}

import Typed from "https://cdn.skypack.dev/typed.js";

const welcomeToScrpttag = document.querySelector(".welcome-to-scrpttag");
const challengeTitle = document.querySelector(".challenge-title");
const challengeSubtitle = document.querySelector(".challenge-subtitle");
const challengePartOf = document.querySelector(".challenge-part-of");
const clInput = document.querySelector(".cl-input");
const clLoading = document.querySelector(".cl-loading");

function getRandom(from, to) {
	return Math.floor(Math.random() * to) + from;
}

clInput.focus();

const initStrings = [
	"Downloading the source code from Github",
	"Installing dependencies",
	"Gathering the infinity stones",
	"Catching Pokemons (all of them)",
	"Watering Groot",
	"Mining bitcoin",
	"Redirecting Mario to another castle",
	"Dealing with insanity",
	"Permitting everything",
	"Maybe it is wednesday, my dudes",
	"Baking cake...... no, I dont.",
	"Playing with nyancat",
	"Assembling Avengers",
	"Collecting all Trophies in PS4's Spider-man",
	"Making you really impatient",
	"We are almost there",
	"Waking up Neo",
	"Getting over here!",
	"Answering with silence",
	"Finishing the 28 Components of February challenge",
	"Ready"
];

clInput.addEventListener("keydown", function (e) {
	if (e.keyCode === 13) {
		e.preventDefault();
		const text = this.innerText.trim().toLowerCase();
		if (text !== "init scrpttag") {
			new Typed(clLoading, {
				strings: [
					`'${text}' is not recognized as an internal or external command, operable program or batch file. ^1000`,
					""
				],
				typeSpeed: 20,
				loop: false,
				showCursor: false,
				onBegin() {
					clLoading.classList.add("error");
				},
				onComplete() {
					clLoading.classList.remove("error");
				}
			});
		} else {
			this.blur();
			new Typed(clLoading, {
				strings: [
					initStrings
						.map((item, index, array) => `(${index + 1}/${array.length}) ${item}`)
						.join(`^${getRandom(500, 1000)} <br/>`)
				],
				typeSpeed: 20,
				loop: false,
				showCursor: false,
				onComplete() {
					welcomeToScrpttag.classList.add("init");
					challengeTitle.classList.add("init");
					challengeSubtitle.classList.add("init");
					challengePartOf.classList.add("init");
				}
			});
		}
	}
});