* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	font: 1em/1.5 sans-serif;
	height: 100vh;
	display: grid;
	place-items: center;
	transition: background-color 0.3s;
	user-select: none;
}
main {
	padding: 1.5em 0;
}
.container{
	display: flex;
	align-items: center;
	justify-content: center;
}
.wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo{
    width: 250px;
	aspect-ratio: 1;
	background-image: url(./typography\ logo_black\ logo.png);
	background-repeat: no-repeat;
	background-size: contain;
}
.logo-holder{
	display: flex;
	width: 100px;
	height: 100px;
	background-image: url(./logo_name/logo_name_black_np.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}
.project-author{
	bottom: 0;
	position: absolute;
	margin: 0 0 5rem 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.name{
	display: flex;
	align-items: center;
	gap:0 .2rem


}
.loader {
	height: 4px;
	width: 130px;
	--c:no-repeat linear-gradient(#6100ee 0 0);
	background: var(--c),var(--c),#d7b8fc;
	background-size: 60% 100%;
	animation: l16 3s infinite;
  }
  @keyframes l16 {
	0%   {background-position:-150% 0,-150% 0}
	66%  {background-position: 250% 0,-150% 0}
	100% {background-position: 250% 0, 250% 0}
  }
 
.pl,
.pl__worm {
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.pl {
	animation-name: bump;
	animation-timing-function: linear;
	width: 8em;
	height: 8em;
}
.pl__ring {
	stroke: hsla(var(--hue),10%,10%,0.1);
	transition: stroke 0.3s;
}
.pl__worm {
	animation-name: worm;
	animation-timing-function: cubic-bezier(0.42,0.17,0.75,0.83);
}

.lds-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
  }
  .lds-roller div {
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
  }
  .lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #000000;
	margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
  }
  .lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
  }
  .lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
  }
  .lds-roller div:nth-child(4) {
	animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
  }
  .lds-roller div:nth-child(5) {
	animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
  }
  .lds-roller div:nth-child(6) {
	animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
  }
  .lds-roller div:nth-child(7) {
	animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
  }
  .lds-roller div:nth-child(8) {
	animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
  }
  @keyframes lds-roller {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  
/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,30%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.pl__ring {
		stroke: hsla(var(--hue),10%,90%,0.1);
	}
	.logo-holder{
		background-image: url(./logo_name/logo_name_white_np.png);
	}
	.logo{
		width: 250px;
		aspect-ratio: 1;
		background-image: url(./typography\ logo_white\ logo.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.lds-roller div:after {
		content: " ";
		display: block;
		position: absolute;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #fff;
		margin: -4px 0 0 -4px;
	  }
}
@media screen and (max-width: 600px) {
	.logo{
		width: 150px;
		aspect-ratio: 1;
		background-image: url(./typography\ logo_white\ logo.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.project-author{
		bottom: 0;
		margin: 0 0 5rem 0;
		display: flex;
		text-align: center;
	}
  }
/* Animations */
@keyframes bump {
	from,
	42%,
	46%,
	51%,
	55%,
	59%,
	63%,
	67%,
	71%,
	74%,
	78%,
	81%,
	85%,
	88%,
	92%,
	to { transform: translate(0,0); }
	44% { transform: translate(1.33%,6.75%); }
	53% { transform: translate(-16.67%,-0.54%); }
	61% { transform: translate(3.66%,-2.46%); }
	69% { transform: translate(-0.59%,15.27%); }
	76% { transform: translate(-1.92%,-4.68%); }
	83% { transform: translate(9.38%,0.96%); }
	90% { transform: translate(-4.55%,1.98%); }
}
@keyframes worm {
	from { stroke-dashoffset: 10; }
	25% { stroke-dashoffset: 295; }
	to { stroke-dashoffset: 1165; }
}
=======
.progress-holder{
    position: relative;
    fill: none;
    stroke-dasharray:502;
    stroke-dashoffset:0;
    stroke-width:10;
    stroke:rgba(236, 236, 236, 0);

}
.progress{
    stroke-width:10;
    position: absolute;
    fill:none;
    stroke-linecap:round;
    animation: progress1 2100ms linear infinite;
    stroke:rgb(4, 165, 111);
}
@keyframes progress1 {
    0%{
        stroke-width:0;
        stroke-dasharray:500;
        stroke-dashoffset:500;

    }
    50%{
        stroke-width:5;
        stroke-dasharray:500;
        stroke-dashoffset: 0;
    }
    100%{
        stroke-width:0;
        stroke-dasharray:1000;
        stroke-dashoffset:-500;
    }
}