/*
	dashWoorkZ Sovereign Society represented by 
	Lord :Dash: La Londe thank the source for this code 
	Traversy Media and its owner Brad Traversy. You can view the original video 
	
	here: https://www.youtube.com/watch?v=qNiUlml9MDk,
	
	you can also download the original code from 
	
	here: https://github.com/bradtraversy/qr-code-generator
	
	I removed all Tailwind CSS and replaced it with what you see below.
	I also added some javascript to add some CSS to the generated elements.
	*/
	
	/*  ///=== CSS# Resets ===\\\ */
	@media (prefers-reduced-motion: no-preference) {
		:has(:target) {
		   scroll-behavior: smooth;
		   scroll-padding-top: 3rem;
		}
	}
	   
	*,
	*::before,
	&::after {
		box-sizing: border-box;
		padding-inline: 0;
		padding-block: 0;
		margin-inline: 0;
		margin-block: 0;
	}
		
   html {
	   scroll-behavior: smooth;
   }
	
	/* ///=== Responsive Code ===\\\ */
	@media screen and (max-width: 45rem) {
		#main__container {
			gap: 1.5rem;
			max-width: calc(100% - 1rem);
			margin-inline: 0.5rem;
		}
		
		#main__container .qr__code__generator {
			display: flex;
			flex-direction: column;
			max-width: calc(100% - 2rem);
			gap: 2rem;
			border: 0.3rem inset dodgerblue;
			outline: 0.3rem ridge gold;
		}
		
		#main__container .qr__code__generator .qr__code {
			display: inline grid;
			place-content: center;
			gap; 2rem;
			padding-block: 1rem;
			padding-inline-start: 1rem;
			max-width: 25rem;
		}
		
		#generate-form .btnDiv {
			justify-content: center;
			align-items: flex-end;
			padding-block: 1rem;
			padding-inline: 0;
			gap: 2rem; 
			width: 100%;
			flex-direction: column ; 
		}
	}
		
		/* \\\======================/// */
		
	body {
		display: inline grid;
		align-content: center;
		min-width: 100svw;
		min-height: 100svh;
		font-family: "Poppins", "sans-serif";
	}

	img {
	  scale: 0.8;
	}
	
	a {
		text-decoration: none;
	}
	
	/* ///=== Full-Screen Code ===\\\ */
	#main__container {
		display: inline grid;
		position: relative;
		place-content: center;
		width: 100%;
	}
		
	#main__container .qr__code__generator {
		--bg-image: url("../img/qr-code.svg");
		--bg-image-opacity: 0.5;

		align-self: center;
		display: inline flex;
		position: relative;
		gap: 1rem;
		border: 0.3rem inset gold;
		outline: 0.3rem ridge dodgerblue;
		outline-offset: 0.1rem;
		border-radius: 1rem;
		margin-inline: auto;
		padding-block-start: 0.5rem;
		max-width: 80rem;
		justify-content: center;
		align-items: center;
	}
	
	#main__container .qr__code__generator::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		opacity: var(--bg-image-opacity);

		background-image: var(--bg-image);
		background-size: cover;
		background-position: center;
	}
	

			
	#main__container .qr__code__generator .qr__code {
		display: inline grid;
		place-content: center;
		gap; 2rem;
		padding-block: 1rem;
		padding-inline-start: 1rem;
		max-width: 25rem;
	}
	
	#main__container .qr__code__generator .qr__code .title {
		color: gold;
		text-shadow: 0 0.2rem 0.2rem blue;
		background-color: red;
		text-align: center;
		padding-block: 0.5rem;
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 0.1rem;
	}

	#main__container .qr__code__generator div p {
		color: blue;
		text-shadow: 0 0.02675rem 0.03675rem gold;
		font-weight: 700;
		letter-spacing: 0.1rem;
		text-align: center;
		padding-block: 0.5rem;
		padding-inline: 0.5rem;
	}

	#main__container .qr__code__generator div .p1 {
	  border-bottom: 0.4rem inset gold;
	}


	/* \\\======================/// */
	  
	#main__container .qr__code__generator .qr__code #generate-form {
	  display: inline grid;
	  gap: 1rem;
	}
	  
	#main__container .qr__code__generator .qr__code #generate-form .qr__input {
		border: 0.2rem inset gold;
		max-width: 100%;
		padding-inline-start: 2rem;
		padding-block: 0.5rem;
	}

	#main__container .qr__code__generator .qr__code #generate-form .btnDiv {
		display: inline flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 1rem;
		padding-inline: 0.5rem;
		gap: 2rem; 
		width: 100%; 
	}
	
	#main__container .qr__code__generator .qr__code #generate-form .btnDiv .reset,
	#main__container .qr__code__generator .qr__code #generate-form .btnDiv .submit {
		font-size: 1.25rem;
		color: dodgerblue;
		text-shadow: 0 0.1rem 0.1rem purple;
		text-align: center;
		padding-block: 0.5rem;
		background-color: gold;
		border: 0.2rem inset blue;
		outline: 0.2rem ridge purple;
		outline-offset: 0.1rem;
		border-radius: 0.5rem;
		min-width: 10rem;
	}
	
	/* ///=== Generated Code ===\\\ */
	#main__container .qrInfo {
		display: inline grid;
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.generated {
		display: inline grid;
		grid-template-columns: 1fr;
		padding-inline: 1rem;
		padding-block: 1rem;
		margin-inline: auto;
		width: 100%;
	}
	
	.saveImg {
		font-size: 1.25rem;
		color: gold;
		text-shadow: 0 0.2rem 0.2rem dodgerblue;
		text-align: center;
		padding-block: 0.5rem;
		display: none;
		background-color: red;
	}

	#save-link{
		font-size: 1.25rem;
		color: gold;
		text-shadow: 0 0.2rem 0.2rem dodgerblue;
		text-align: center;
		padding-block: 0.5rem;
		background-color: red;
		min-width: 16.5rem;
		margin-inline: auto;
	}
	/* \\\======================///

	/* ///=== Spinner Code ===\\\ */
	#spinner {
		display: inline flex;
		flex-direction: column;
		gap: 1rem;
		align-items: baseline;
		
	}

	.spinner {
		fill: blue;
		width: 10rem;
		height: 10rem;
		border-radius: 50%;
		animation: spin 500ms infinite;
	}

	@keyframes spin {
		0% {
		transform: rotate(0deg);
		}
		100% {
		transform: rotate(360deg);
		}
	}
	
	#spinner {
		display: none;
	  }
	/* \\\======================///