:root {
	--bar-height : 4px;
    --space-s:0.2rem;
    --space-m:0.4rem;
    --space-l:0.8rem;
    --space-u:1.6rem;
	--space-ul:3.2rem;
    
    --gap-s:2px;
    --gap-m:4px;
    --gap-l:8px;
    --gap-u:16px;
}


body,header,footer,ul,ol,p,span,h1,h2,h3,li{
	padding: 0;
	margin: 0;
}
header {
	padding: var(--space-u);
}
h1,h2 {
	text-align: center;
}
h2 {
	margin-left: var(--space-u);
}

h3 span {
	float: right;
}
section{
	margin: var(--space-u) var(--space-l);
}
#skill-sect ul ,#quest-sect ul{
	display: flex;
	flex-direction: column;
	gap: var(--gap-l);
	list-style: none;
	padding: 0;
	justify-content: center;
	padding: var(--space-s) var(--space-m);
}


li {
	/* padding: 1rem; */
	display: flex;
	flex-direction: row;
	width: -webkit-fill-available;
	align-items: center;
}
aside ol {
	display: flex;
	justify-content: space-between;
	gap: var(--space-m);
}
aside li {
	display: initial;
	width: initial;
}
li>div:nth-child(2) {
	padding: 0.5rem;
	width: -webkit-fill-available;
	word-break: break-all;
}

input[type="number"] {
	width: 40px;
	padding: var(--space-s);
}

label,
input,
button {
	margin-right: var(--gap-s);
}

h3 {
	margin: var(--space-m) 0;
}

.bar, .bar div {
	height: var(--bar-height);
}

/* form section  */

.btn-div {
	display: flex;
	flex-direction: column;
}

.btn-div button {
	width: -webkit-fill-available;
	height: -webkit-fill-available;
}
#form-sect label {
	margin-top: var(--space-l);
	display: block;
}

#form-sect input[type="number"] {
	width: 40px;
	padding: var(--space-m);
}

form {
	padding: var(--space-l) var(--space-u);
}
form div {
	margin: var(--space-l) 0;
}
.disable {
	opacity: 0.5;
}
form button {
	float: right;
}

footer {
	margin-bottom: var(--space-u);
}

aside {
	position: sticky;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 100;
}

button{
	padding: var(--space-s) var(--space-m);
}
svg {
	width: var(--space-u);
	height: var(--space-u);
}
.del-btn{
	margin: auto;
}
.del-btn svg {
	width: var(--space-l);
	height: var(--space-l);
}
.title-cont>button,
.title-cont>h2 {
	display: inline;
}
.none{
    display: none;
}
/* start  */
nav {
    padding: var(--gap-m);
}
nav button{
    padding: var(--space-m);
    border-radius: 50%;
}
img {
    width: 4rem;
    height: 4rem;
}
#prof {
	display: flex;
	justify-content: space-between;
	padding: var(--space-s) var(--space-m);
}
footer {
	margin: var(--space-ul) 0;
}
@media (min-width:960px) {
	ul {
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;
	}

}