:root {
    --base-color: #282828;
    --base-variant: #212121;
    --text-color: white;
    --secondary-text: white;
    --primary-color: rgb(250,250,247);
    --accent-color: #41465b;
}
.darkmode{
    --base-color: rgb(200,200,200);
    --base-variant: white;
    --text-color: black;
    --secondary-text: white;
    --primary-color: rgb(250,250,247);
    --accent-color: #e6e6e6;
}

#theme-switch{
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--base-variant);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 20px;
    right: 20px;
}
#theme-switch svg{
    fill:--text-color;
}
#theme-switch svg:last-child{
    display: none;
}
.darkmode #theme-switch svg:first-child{
    display: none;
}
.darkmode #theme-switch svg:last-child{
    display: block;
}

        
        button {
			height: 50px;
			margin: 15px;
			width: auto;
			padding-left: 10px;
			padding-right: 10px;
			background: #333;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			cursor: pointer;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			font-family: Consolas, Courier New, monospace;
			border: solid #404c5d 1px;
			font-size: 16px;
			background-color: var(--base-variant); 
            color: var(--text-color);
			-webkit-transition: 500ms;
			transition: 500ms;
			border-radius: 5px;
			-webkit-box-shadow: 1px 1px 13px var(--base-variant), -1px -1px 10px var(--accent-color);
            box-shadow: 1px 1px 13px var(--base-variant), -1px -1px 10px var(--accent-color);
		}

			button:hover {
				-webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
				box-shadow: 1px 1px 13px #20232e, -1px -1px 13px #545b78;
				color: #d6d6d6;
				-webkit-transition: 500ms;
				transition: 500ms;
			}

			button:active {
				-webkit-box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
				box-shadow: 1px 1px 13px #20232e, -1px -1px 33px #545b78;
				color: #d6d6d6;
				-webkit-transition: 100ms;
				transition: 100ms;
			}

		.card {
			width: auto;
			height: 400px;
			background-color: var(--base-variant); 
            color: var(--text-color);
			box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
			padding: 20px;
			font-family: Consolas, Courier New, monospace;
		}

		.download-button{
		height: 50px;
		width: auto;
		padding: 15px;
		margin: 15px;
		background: #333;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		cursor: pointer;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		font-family: Consolas, Courier New, monospace;
		border: solid #404c5d 1px;
		font-size: 16px;
		background-color: var(--base-variant);
        color: var(--text-color);
		-webkit-transition: 500ms;
		transition: 500ms;
		border-radius: 5px;
		-webkit-box-shadow: 1px 1px 13px var(--base-variant), -1px -1px 10px var(--accent-color);
        box-shadow: 1px 1px 13px var(--base-variant), -1px -1px 10px var(--accent-color);
		}

		.loader-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 120px;
			width: auto;
			margin: 2rem;
			font-family: "Poppins", sans-serif;
			font-size: 1.6em;
			font-weight: 600;
			user-select: none;
			background-color: var(--base-variant); 
            color: var(--text-color);
		}

		.loader-letter {
			display: inline-block;
			opacity: 0;
			animation: loader-letter-anim 4s infinite linear;
			z-index: 2;
		}

			.loader-letter:nth-child(1) {
				animation-delay: 0.1s;
			}

			.loader-letter:nth-child(2) {
				animation-delay: 0.205s;
			}

			.loader-letter:nth-child(3) {
				animation-delay: 0.31s;
			}

			.loader-letter:nth-child(4) {
				animation-delay: 0.415s;
			}

			.loader-letter:nth-child(5) {
				animation-delay: 0.521s;
			}

			.loader-letter:nth-child(6) {
				animation-delay: 0.626s;
			}

			.loader-letter:nth-child(7) {
				animation-delay: 0.731s;
			}

			.loader-letter:nth-child(8) {
				animation-delay: 0.837s;
			}

			.loader-letter:nth-child(9) {
				animation-delay: 0.942s;
			}

			.loader-letter:nth-child(10) {
				animation-delay: 1.047s;
			}

			.loader-letter:nth-child(11) {
				animation-delay: 1.152s;
			}

			.loader-letter:nth-child(12) {
				animation-delay: 1.3s;
			}

			.loader-letter:nth-child(13) {
				animation-delay: 1.45s;
			}

			.loader-letter:nth-child(14) {
				animation-delay: 1.55s;
			}

			.loader-letter:nth-child(15) {
				animation-delay: 1.7s;
			}

			.loader-letter:nth-child(16) {
				animation-delay: 1.85s;
			}

			.loader-letter:nth-child(17) {
				animation-delay: 2s;
			}

			.loader-letter:nth-child(18) {
				animation-delay: 2.15s;
			}

			.loader-letter:nth-child(19) {
				animation-delay: 2.3s;
			}


		@keyframes loader-letter-anim {
			0% {
				opacity: 0;
			}

			5% {
				opacity: 1;
				text-shadow: 0 0 4px #fff;
				transform: scale(1.1) translateY(-2px);
			}

			20% {
				opacity: 0.2;
			}

			100% {
				opacity: 0;
			}
		}

		#rainbow {
			--border-radius: 5px;
			--border-width: 4px;
			appearance: none;
			position: relative;
			padding: 1em 1.2em;
			border: 0;
			font-family: "Roboto", Arial, "Segoe UI", sans-serif;
			font-size: 18px;
			font-weight: 500;
			background-color: var(--base-variant); 
            color: var(--text-color);
			z-index: 2;
		}

			#rainbow::after {
				--m-i: linear-gradient(#000, #000);
				--m-o: content-box, padding-box;
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 95%;
				height: 90%;
				padding: var(--border-width);
				border-radius: var(--border-radius);
				background-image: conic-gradient( #488cfb, #29dbbc, #ddf505, #ff9f0e, #e440bb, #655adc, #488cfb );
				-webkit-mask-image: var(--m-i), var(--m-i);
				mask-image: var(--m-i), var(--m-i);
				-webkit-mask-origin: var(--m-o);
				mask-origin: var(--m-o);
				-webkit-mask-clip: var(--m-o);
				mask-composite: exclude;
				-webkit-mask-composite: destination-out;
				filter: hue-rotate(0);
				animation: rotate-hue linear 500ms infinite;
				animation-play-state: paused;
			}

			#rainbow:hover::after {
				animation-play-state: running;
			}

		@keyframes rotate-hue {
			to {
				filter: hue-rotate(1turn);
			}
		}