html {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}
body {
	max-width: 100%;
	width:100%;
	overflow-x: hidden;
}
article {
	width:1200px;
	max-width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
}
header h1{
	color: var(--complementary-color);
}
#skills {
	padding:20px 0;
	max-width:515px;
	border-radius:100%;
	aspect-ratio: 1/1;
	margin: 0 auto;
	position: relative;
	align-content: center;
	text-align: center;
	h2 {
		font-size: 2.4rem;
		text-align: center;
		padding: 0 0 15px;
		text-align: left;
	}
	ul{
		padding: 0;
		margin: 0;
		list-style: none;
		li {
			display: inline-block;
			margin-bottom:10px;
			position: relative;
			z-index: 1;
			opacity: 0;
			transform: scale(0);
			animation: skill-fade-in .8s forwards cubic-bezier(0.5, 1, 0.89, 1);
			animation-delay: var(--random-delay, 0s);
			div {
				color: var(--bg-color);
				text-align: center;
				background-color: var(--primary-color);
				border: 1px solid var(--bg-color);
				border-radius: 20px;
				padding: 10px;
				cursor: pointer;
				position: relative;
				&:hover, &.clicked {
					span {
						display: block;
						transform: translateX(-50%) rotate(0deg) scale(100%);
						opacity: 1;
					}
				}
				span {
					position: absolute;
					z-index: -1;
					bottom:90%;
					left: 50%;
					transform: translateX(-50%) rotate(180deg) scale(0);
					border-radius: 50%;
					height:50px;
					width: 50px;
					background-color: var(--complementary-color);
					align-content: center;
					transform-origin: bottom center;
					opacity: 0;
					font-size: 1.2rem;
					transition: all 300ms;
				}
			}
		}
	}
}
@keyframes skill-fade-in {
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes shake {
    0% { transform: rotate(0); }
	2% { transform: rotate(5deg); }
	4% { transform: rotate(-5deg); }
	6% { transform: rotate(5deg); }
	8% { transform: rotate(0); }
	100% { transform: rotate(0); }
}
@keyframes zoomies {
    0% { transform: rotate(-20deg) scale(1); }
	3% { transform: rotate(-20deg) scale(.95); }
	6% { transform: rotate(-20deg) scale(1.05); }
	9% { transform: rotate(-20deg) scale(.95); }
	12% { transform: rotate(-20deg) scale(1); }
	100% { transform: rotate(-20deg) scale(1); }
}
#resume {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	.start, .end {
		position: relative;
		z-index: -1;
	}
	#click-suggest {
		position:absolute;
		right: -51px;
		top: -60px;
		opacity: 0;
		animation: skill-fade-in .8s 1s forwards cubic-bezier(0.5, 1, 0.89, 1);
		p {
			font-family: 'Amatic SC', cursive;
			font-size: 2rem;
			font-weight: bold;
			margin-bottom: -18px;
			animation: shake 5s 2s infinite;
			transform-origin: center center;
			display: inline-block;
			float:right;
			position: relative;
			right:-10px;
		}
		svg{
			clear: both;
			transform: rotate(-20deg);
			fill: var(--primary-color);
			animation: zoomies 6s 3s infinite;
		}
	}
	> li {
		margin-bottom: 100px;
		font-size:1.2rem;
		position: relative;
		&::before {
			content: '';
			background-color: var(--bg-color);
			position: fixed;
			top: -1px;
			left: -1px;
			width:1px;
			height:1px;
			z-index: 3;
			opacity: 0;
			transition: opacity 1s;
		}
		&.clicked {
			&::before {
				width:auto;
				height:auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: .8;
			}
			.description{
				opacity: 1;
				position:fixed;
				transform: scale(1);
				align-content: center;
				top:20px;
				left: 20px;
				right: 20px;
				z-index: 3;
				bottom: 20px;
				overflow-y: auto;
				border-radius: 20px;
				ul {
					display:block;
				}
			}
		}
		small {
			font-size: .9rem;
		}
		&.item {
			z-index: 1;
			&.clicked {
				z-index: 3;
			}
		}
		&.date, &.start, &.end{
			text-align: center;
			div {
				background-color: var(--bg-color);
				border: 2px dashed var(--primary-color);
				display: inline-block;
				padding: 20px;
				border-radius: 50%;
				aspect-ratio: 1/1;
				align-content: center;
			}
		}
		&:nth-child(4n+4){
			text-align: right;
			.hgroup {
				text-align: left;
			}
			li {
				text-align: left;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
		.hgroup {
			display: inline-block;
			padding: 20px;
			border-radius: 20px;
			background-color: var(--secondary-comp-color);
			border: 2px dashed var(--complementary-color);
			position: relative;
		}
		.description {
			opacity: 0;
			transition: all .8s;
			transform: scale(0);
			ul {
				display: none;
				margin: 0;
				padding: 20px 20px 20px 40px;
				background-color: var(--complementary-color);
				border-radius: 20px;
				li {
					color: var(--bg-color);
					padding-bottom: 15px;
					font-size: 1rem;
				}
			}
		}
	}
}
/* Styling for the element that follows the path */
#follow-path {
	width: 128px;
	height: 128px;
	background: url("../images/Idle.png") no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	animation: idle-animation 1s steps(7) infinite;
	transform-origin: bottom center;
	transform: scaleY(-1);
	&.landed {
		background: url("../images/Jump.png") no-repeat;
		animation: landing-animation .3s steps(3) forwards;
	}
	&.hurt {
		background: url("../images/Hurt.png") no-repeat;
		animation: hurt-animation .3s steps(3) forwards;
	}
	&.walking {
		background: url("../images/Walk.png") no-repeat;
		animation: walk-animation 1s steps(10) infinite;
	}
	&.dead {
		background: url("../images/Dead.png") no-repeat;
		background-position-x: -640px;
		animation: dead-animation .5s steps(4) forwards;
	}
}
@keyframes idle-animation {
	from { background-position: 0px; }
	to { background-position: -896px; }
}
@keyframes landing-animation {
	from { background-position: -768px; }
	to { background-position: -1152px; }
}
@keyframes walk-animation {
	from { background-position: 0px; }
	to { background-position: -1280px; }
}
@keyframes hurt-animation {
	from { background-position: 0px; }
	to { background-position: -384px; }
}
@keyframes dead-animation {
	from { background-position: 0px; }
	to { background-position: -512px; }
}
#path-container {
	position: absolute;
	top:-5px;
	left:-5px;
	height:5px;
	width:5px;
	overflow: visible;
	z-index: -2;
	path {
		stroke: var(--primary-color);
		stroke-dasharray: 10, 5;
	}
}
@media screen and (min-width: 660px) {
	#skills {
		padding:20px 40px;
		background-color: var(--primary-color);
		padding: 20px 40px 56px;
		h2{
			text-align: center;
			color: var(--bg-color);
		}
	}
}
@media screen and (min-width: 940px) {
	#skills {
		margin-bottom: 100px;
	}
	#resume {
		#click-suggest {
			display: none;
		}
		> li {
			margin-bottom: 200px;
			&:last-child{
				margin-bottom: 0;
			}
			&:nth-child(4n+4){
				&.clicked .description, .description {
					position:relative;
					align-content: inherit;
					opacity: 1;
					transform: scale(1);
					top:-60px;
					left: inherit;
					right: inherit;
					z-index: inherit;
					bottom: inherit;
					overflow-y: inherit;
					border-radius: inherit;
					ul {
						right:0;
						left:auto;
						li {
							font-size: 1.2rem;
						}
					}
				}
			}
			&.clicked {
				&::before {
					display: none;
				}
			}
			&.clicked .description, .description {
				position:relative;
				align-content: inherit;
				opacity: 1;
				transform: scale(1);
				top:-60px;
				left: inherit;
				right: inherit;
				z-index: inherit;
				bottom: inherit;
				overflow-y: inherit;
				border-radius: inherit;
				ul {
					display: inline-block;
					align-content: center;
					position:absolute;
					left: 0%;
					top: 50%;
					padding: 40px 40px 40px 60px;
					transform: translateY(-50%) scale(0);
					width: 50%;
					min-height: 400px;
					z-index: 1;
					transition: all 1s;
					opacity: 0;
					li {
						font-size: 1.2rem;
					}
				}
			}
			&.visible {
				z-index: 1;
				&:nth-child(4n+4){
					.description {
						ul {
							right:50%;
							left:auto;
						}
					}
				}
				.description {
					ul {
						transform: translateY(-50%) scale(1);
						left: 50%;
						opacity: 1;
					}
				}
			}
		}
	}
}