:root {
	font-family: monospace;
	--cyan-base:#0ab772;
	--white-base:#d7ddde;
	--white-readable:#e8e8e8;
	--white-readable2:#cdcdcd;
	--white-dull2:#b0b0b0;
	--white-dull:#8e8b8b;
	--black-base:#130a33;
	animation: fillColor 15s ease infinite;
}
.bar {
	margin: 0.8rem 0;
	background-color: rgba(68, 75, 73, 0.441);
}

.bar div {
	transition: width 0.5s ease-in-out;
	background-color: violet;
}

.disable {
	opacity: 0.5;
}

form::backdrop {
	background-color: #a81abe2e;
	backdrop-filter: blur(4px);
}

/* start  */

body{
	background-color: var(--black-base);
	color: var(--white-base);
}
button{
	border: none;
	outline: none;
}
nav{
	background-color: #18171b3a;
	backdrop-filter: blur(5px);
	box-shadow: inset 0px 0px 60px 0px #dafdff4d;
	border-bottom: solid var(--white-base) 2px;
}
nav button{
	background-color: var(--black-base);
}
nav label{
	margin: 0;
}
nav button:hover{
	background-color: var(--white-base);
}
nav svg {
	animation: fillColor 15s ease infinite;
}
h2 {
	color: var(--white-dull2);
	font-size: 0.9rem;
}
.del-btn svg {
	fill: var(--white-dull);
}
#prof div p {
	color: var(--white-dull);
	font-size: 0.8rem;
}
#prof div:last-child p{
	text-align: right;
}
#prof span {
	color: #ee82ee;
	font-size: 1.2rem;
}


/* skill and quest items */
button{
	background-color: transparent;
}
svg {
	fill: white;
}
#skill-sect li , #quest-sect li {
	background-color: #eef5fb2e;
    backdrop-filter: blur(100px);

}
#skill-sect .bar div{
	background-color: var(--cyan-base);
	animation: bgColor 15s ease infinite;
}
body {
	background: linear-gradient(45deg,#0d0a33,#041b29);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}
footer{
	text-align: center
}
a{
	background-color: white;
	padding: 4px;
	transition: all 1s;
}
svg{
	transform: scale(0.8);
	transition: all 0.4s;
}
button:hover svg{
	transform: scale(1.2);
}
@keyframes fillColor{
	0% {
		fill:#666fec;
	}
	50% {
		fill:#60baf2;
	}
	100%{
		fill:#666fec;
	}
}
@keyframes bgColor{
	0% {
		background-color:#666fec;
	}
	50% {
		background-color:#60baf2;
	}
	100% {
		background-color:#666fec;
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}