html {
	height:100%;
	max-height: 100%;
	overflow-y: hidden;
}
body {
	height: 100%;
}
article {
	height:100%;
	max-height: 100%;
	overflow-y: hidden;
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	h3{
		font-family: 'Amatic SC', cursive;
		font-size: 2rem;
		text-align: center;
	}
	#image-modal {
		display:block;
		opacity:0;
		z-index: 3;
		top: 0;
		left: 0;
		height: 0;
		width:0;
		transition: opacity .6s;
		&::after {
			content: "";
			background-color: var(--bg-color);
			position:absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width:0;
			height:0;
			transition: opacity .2s;
			z-index: -1;
			opacity:0;
			&.has-image {
				width:100%;
				height: 100%;
			}
		}
		&.has-image {
			opacity:1;
			position:fixed;
			height: 100%;
			width: 100%;
			padding:0;
			align-content: center;
			#image-holder {
				position:absolute;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			&::after {
				width:100%;
				height: 100%;
				opacity: 1;
			}
			img{
				margin: 0 auto;
				max-height: 100%;
				border-radius: 20px;
			}
			.close {
				bottom:0;
				transition-delay: 1.3s;
			}
		}
		.close {
			bottom:-100px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			background-color: var(--primary-color);
			padding: 15px 15px 8px;
			border-radius: 20px 20px 0 0;
			transition: all .6s;
			transition-delay: 0;
			cursor: pointer;
			svg {
				width:20px;
				fill: var(--bg-color);
			}
		}
	}
	> section {
		height:100%;
		max-height: 100%;
		overflow-y: hidden;
		display: flex;
		flex-direction: row;
		flex-shrink: 0;
		margin: 0;
		padding-top:50px;
		> section {
			flex-shrink: 0;
			width: 100vw;
			margin: 0;
			padding: 40px 0;
			position: relative;
			h1{
				padding-top: 0;
			}
			#mockup {
				width: 60vw;
				height: 40vh;
				background-color: var(--secondary-comp-color);
				margin: 0 auto;
				position: relative;
				padding: 1vw;
				box-shadow: 0 41px 40px -42px #000;
				display: flex;
				flex-direction: column;
				gap: .5vh;
				opacity: 0;
				animation: fade-in 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
				#mock-nav {
					opacity: 0;
					position:relative;
					top: -500px;
					height: 3vh;
					background-color: var(--complementary-color);
					animation: fly-in 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
				}
				#mock-header {
					opacity: 0;
					position:relative;
					height: 10vh;
					left: -500px;
					background-color: var(--complementary-color);
					animation: fly-in .8s .5s forwards cubic-bezier(0.11, 0, 0.5, 0);
				}
				#mock-content-container {
					position:relative;
					display: flex;
					flex-direction: row;
					gap: .5vw;
					#mock-content-left {
						opacity: 0;
						position:relative;
						width: 60%;
						left:-500px;
						top: 500px;
						background-color: var(--complementary-color);
						height: 20vh;
						animation: fly-in 1s.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
					}
					#mock-content-right {
						width: 40%;
						height:20vh;
						display: flex;
						flex-direction: column;
						gap: .5vh;
						position:relative;
						#mock-block1 {
							background-color: var(--complementary-color);
							height: 30%;
							top: -500px;
							left: 500px;
							opacity: 0;
							position:relative;
							animation: fly-in 1s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
						}
						#mock-block2 {
							background-color: var(--complementary-color);
							height:70%;
							opacity: 0;
							left: 500px;
							position:relative;
							animation: fly-in 1s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
						}
					}
				}
				#mock-footer {
					opacity: 0;
					position:relative;
					top: 500px;
					background-color: var(--complementary-color);
					flex-grow:1;
					animation: fly-in 1s 2s forwards cubic-bezier(0.11, 0, 0.5, 0);
				}
			}
			#mock-code-screen {
				width: 60vw;
				height: 40vh;
				background-color: var(--primary-color);
				margin: 0 auto;
				position: relative;
				padding: 1vw;
				box-shadow: 0 41px 40px -42px #000;
				display: flex;
				flex-direction: row;
				gap: .5vh;
				opacity: 0;
				overflow: hidden;
				ul {
					list-style: none;
					line-height: 2;
					text-align: right;
					font-size: clamp(1vw, 1vw, 1rem);
					padding: 0 1vw;
					li {
						color: var(--bg-color);
					}
				}
				p {
					color: var(--bg-color);
					line-height: 2;
					white-space: pre-wrap;
					font-size: clamp(1vw, 1vw, 1rem);
				}
				&.visible {
					animation: fade-in 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
				}
			}
			picture {
				img {
					width:80px;
					fill: var(--primary-color)
				}
			}
		}
		> ul {
			height:100%;
			max-height: 100%;
			overflow-y: hidden;
			display: flex;
			flex-direction: row;
			flex-shrink: 0;
			margin:0;
			padding:0;
			list-style: none;
			> li {
				flex-shrink: 0;
				width: 100vw;
				padding: 40px 0;
				position: relative;
				&.visible {
					.description {
						&::after {
							bottom:calc(100% - 1px);
						}
					}
				}
				.image-container {
					max-width:100%;
					overflow: hidden;
					height: calc(50vh + 70px);
					.designimages {
						display:flex;
						flex-direction: row;
						width:100%;
						max-width: 100%;
						height: 50vh;
						list-style:none;
						padding:0;
						margin-bottom: -50px;
						transform: translateX(0);
						transition: all 1s;
						li {
							width:100%;
							flex-shrink: 0;
							text-align: center;
							align-content: center;
							padding: 0 40px;
							a {
								display: inline-block;
								margin: 0 auto;
								max-height: 50vh;
								overflow: hidden;
								border-radius: 40px;
								border: 5px solid var(--complementary-color);
								box-shadow: 0 41px 40px -42px #000;
							}
						}
					}
				}
				.description {
					padding: 40px;
					background-color: var(--primary-color);
					position:absolute;
					left:0;
					width:100%;
					bottom:0;
					transform: translateY(calc(100% + 1px));
					transition: all .6s;
					cursor: pointer;
					z-index:2;
					border-radius: 20px 20px 0 0;
					&.open {
						transform: translateY(0);
					}
					&::after {
						content: "About";
						display: block;
						position: absolute;
						bottom:60%;
						background-color: var(--primary-color);
						color: var(--bg-color);
						left:50%;
						padding: 15px 30px;
						border-radius: 20px 20px 0 0;
						transform: translate(-50%);
						font-family: 'Amatic SC', cursive;
						font-size: 1.6rem;
						transition: all .5s;
						animation: bottom-adjust 4s infinite;
					}
					p, li, h3, h4, a, h2{
						color: var(--bg-color);
					}
				}
				.image-to-buttons {
					display: flex;
					flex-direction: row;
					gap: 10px;
					justify-content: center;
					position: relative;
					margin-top:-30px;
					z-index: 1;
					span {
						height: 20px;
						width: 20px;
						background-color: var(--secondary-color);
						border-radius: 50%;
						cursor: pointer;
						&.active {
							background-color: var(--complementary-color);
						}
					}
				}
			}
		}
	}
	.move-suggestion {
		.mobile {
			position:absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			animation: swipe-left 4s infinite;
		}
		.desktop {
			position: absolute;
			right: 40px;
			top: 50%;
			transform: translateY(-50%);
			animation: scroll-down 4s infinite;
			display: none;
		}
		svg {
			fill: var(--primary-color);
			width: 60px;
		}
	}
}
@keyframes fade-in {
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@keyframes fly-in {
	100% {
		left: 0;
		top: 0;
		opacity: 1;
	}
}
@keyframes swipe-left {
	10% {
		transform: translateX(-40%);
	}
	20% {
		transform: translateX(-60%);
	}
	30% {
		transform: translateX(-40%);
	}
	40% {
		transform: translateX(-60%);
	}
	50% {
		transform: translateX(-50%);
	}
}
@keyframes scroll-down {
	10% {
		transform: translateY(-40%);
	}
	20% {
		transform: translateY(-60%);
	}
	30% {
		transform: translateY(-40%);
	}
	40% {
		transform: translateY(-60%);
	}
	50% {
		transform: translateY(-50%);
	}
}
@keyframes bottom-adjust {
	10% {
		padding-bottom: 20px;
	}
	20% {
		padding-bottom: 15px;
	}
}
@media screen and (min-width: 660px) {
}
@media screen and (min-width: 940px) {
	article {
		& > section {
			& > ul {
				& > li {
					& .image-container {
						height: calc(70vh + 70px);
						& .designimages {
							height: 70vh;
							& li {
								a {
									max-height: 70vh;
									max-width:800px;
									img {
										max-height: 800px;
									}
								}
							}
						}
					}
					.description {
						width: 800px;
						left:50%;
						transform: translate(-50%, calc(100% + 1px));
						&.open {
							transform: translate(-50%, 0);
						}
					}
				}
			}
			> section {
				#mockup {
					border-radius: 20px;
					height: 60vh;
					#mock-nav {
						height: 4vh;
					}
					#mock-header {
						height: 15vh;
					}
					#mock-content-container {
						position:relative;
						display: flex;
						flex-direction: row;
						#mock-content-left {
							height: 30vh;
						}
						#mock-content-right {
							height:30vh;
						}
					}
				}
				#mock-code-screen {
					border-radius: 20px;
					height: 60vh;
				}
			}
		}
		.move-suggestion {
			.mobile {
				display: none;
			}
			.desktop {
				display: inline-block;
			}
		}
	}
}