@font-face {
    font-family: Magical Neverland;
    src: url(../font/magical-neverland.ttf);
    font-size: 1em;
    letter-spacing: 4px;
}

*{
    margin: 0;
    box-sizing: border-box;
}

body{
    /* scroll-behavior: smooth; Optional for smooth scrolling */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #000000;
    opacity: 1;
    /* https://www.magicpattern.design/tools/css-backgrounds */
    background-image:  linear-gradient(#081a25 3.4000000000000004px, transparent 3.4000000000000004px), linear-gradient(90deg, #081a25 3.4000000000000004px, transparent 3.4000000000000004px), linear-gradient(#081a25 1.7000000000000002px, transparent 1.7000000000000002px), linear-gradient(90deg, #081a25 1.7000000000000002px, #000000 1.7000000000000002px);
    background-size: 85px 85px, 85px 85px, 17px 17px, 17px 17px;
    background-position: -3.4000000000000004px -3.4000000000000004px, -3.4000000000000004px -3.4000000000000004px, -1.7000000000000002px -1.7000000000000002px, -1.7000000000000002px -1.7000000000000002px;
}

.siteHeader{
    height: 60px;
    width: 100vw;
    position: fixed;
    background-color: black;
    z-index: 1000;
    padding: 10px;
    transition: height .6s cubic-bezier(0, 0.4, 0, 1.01);
    transition: background-color .6s cubic-bezier(0, 0.4, 0, 1.01);
    z-index: 10000;
}

#logoLink{
    display: flex;
    gap: 10px;
    justify-content: center;
    text-decoration: none;
}

#menuOptions{
    top: -500px;
    margin: 10px;
    margin: auto;
    width: 70%;
    position: relative;
    /* left: 60px; */
    color: white;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-evenly;
    /* gap: 20px; */
    transition: top .6s cubic-bezier(0, 0.4, 0, 1.01);
}

#menuOptions > a{
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
    text-decoration: none;
}

#logo{
    height: 40px;
}

#headerName{
    font-family: Magical Neverland;
    color: white;
    text-decoration: none;
    width: auto;
	font-size: 1.5em;
}

/* Section1 */
#section1{
    width: 100vw;
	height: 150vh;
	overflow: hidden;
}

#introTitle{
	width: 100vw;
    height: 100vh;
    position: absolute;
    /* text-align: center; */
    z-index: 3;
    top: 50%;
    display: flex
;
    /* margin: auto; */
    justify-content: center;
    font-family: 'Magical Neverland';
    color: white;
    font-size: 5em;
}

/* Disney Project Wall */
/* https://codepen.io/designfenix */
:root {
	--duration: 15s;
}

.introSection {
	width: 100vw;
    top: 50px;
    margin-top: 200px;
    position: relative;
}

.wrapper-images {
	display: flex;
	flex-direction: column;
	height: 150vh;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	opacity: 0.8;
	transform: translate3d(-50%, -50%, 0) perspective(800px) rotatey(10deg)
		rotateX(-10deg);
}
.images-line {
	animation: runner var(--duration) linear infinite;
	display: flex;
	transform: translateX(23%);
	&:nth-child(even) {
		animation-duration: calc(var(--duration) * 1.5);
	}
	.line {
		background-position: 50% 50%;
		background-size: cover;
		flex: none;
		height: 29vh;
		margin: clamp(10px, 2vw, 20px);
		width: 20vh;
		position: relative;
		transition: ease-in-out all 0.3s;
		border-radius: 1rem;
		.img {
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-position: 50% 50%;
			background-size: cover;
			transition: ease-in-out all 0.3s;
			overflow: hidden;
			border-radius: 1rem;
		}
		&:hover {
			.img {
				cursor: pointer;
				transform: scale(1.1) translatez(0px);
			}
			&:after {
				filter: blur(35px) opacity(0.8);
			}
		}
		&:after {
			content: "";
			background: inherit;
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			top: 3vh;
			position: absolute;
			background-size: cover;
			z-index: -1;
			transition: ease-in-out all 0.3s;
			filter: blur(25px) opacity(0.8);
		}
	}
}

@keyframes runner {
	to {
		transform: translateX(-10.4%);
	}
}

/*Dev*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap");
.dev {
	font-family: "Poppins", sans-serif;
	position: fixed;
	font-size: clamp(8px, 3vw, 14px);
	bottom: 1vw;
	left: 1vw;
	padding: 1em;
	color: #111;
	background-color: white;
	border-radius: 25px;
	cursor: pointer;
	z-index: 100;
	a {
		text-decoration: none;
		font-weight: bold;
		color: #111;
		transition: ease all 0.3s;
		&:hover {
			color: #ef5350;
			text-decoration: underline;
		}
	}
	span {
		display: inline-block;
		transition: ease all 0.3s;
		color: #ef5350;
		&:hover {
			transform: scale(1.2);
		}
	}
}


/* Section 2 */
#section2{
	width: 100vw;
    height: auto;
    top: 100vh;
    position: absolute;
}

.options{
	width: 100vw;
	margin: 25px;
}

.headerBox{
	text-align: center;
    color: white;
	margin-bottom: 10px;
}

.portfolioTitle{
	font-size: 2em;
}

.portfolioDesc{
	font-size: 1.2em;
}

.contentBox{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
}

.link{
	width: 560px;
	height: 315px;
}

@media (max-width: 1020px) {

}

@media (max-width: 750px) {

}

@media (max-width: 450px) {
	#section1{
		width: 100vw;
		height: 150vh;
		overflow: hidden;
	}
	
	#introTitle{
		width: 100vw;
		height: 100vh;
		position: absolute;
		text-align: center;
		z-index: 3;
		top: 40%;
		display: flex
	;
		/* margin: auto; */
		justify-content: center;
		font-family: 'Magical Neverland';
		color: white;
		font-size: 5em;
	}
	
	/* Disney Project Wall */
	/* https://codepen.io/designfenix */
	:root {
		--duration: 15s;
	}
	
	.introSection {
		width: 100vw;
		top: 50px;
		margin-top: 200px;
		position: relative;
	}
	
	.wrapper-images {
		display: flex;
		flex-direction: column;
		height: 150vh;
		justify-content: center;
		left: 50%;
		position: absolute;
		top: 50%;
		opacity: 0.8;
		transform: translate3d(-50%, -50%, 0) perspective(800px) rotatey(10deg)
			rotateX(-10deg);
	}
	.images-line {
		animation: runner var(--duration) linear infinite;
		display: flex;
		transform: translateX(23%);
		&:nth-child(even) {
			animation-duration: calc(var(--duration) * 1.5);
		}
		.line {
			background-position: 50% 50%;
			background-size: cover;
			flex: none;
			height: 29vh;
			margin: clamp(10px, 2vw, 20px);
			width: 20vh;
			position: relative;
			transition: ease-in-out all 0.3s;
			border-radius: 1rem;
			.img {
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-position: 50% 50%;
				background-size: cover;
				transition: ease-in-out all 0.3s;
				overflow: hidden;
				border-radius: 1rem;
			}
			&:hover {
				.img {
					cursor: pointer;
					transform: scale(1.1) translatez(0px);
				}
				&:after {
					filter: blur(35px) opacity(0.8);
				}
			}
			&:after {
				content: "";
				background: inherit;
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				top: 3vh;
				position: absolute;
				background-size: cover;
				z-index: -1;
				transition: ease-in-out all 0.3s;
				filter: blur(25px) opacity(0.8);
			}
		}
	}
	
	@keyframes runner {
		to {
			transform: translateX(-10.4%);
		}
	}
	
	/*Dev*/
	@import url("https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap");
	.dev {
		font-family: "Poppins", sans-serif;
		position: fixed;
		font-size: clamp(8px, 3vw, 14px);
		bottom: 1vw;
		left: 1vw;
		padding: 1em;
		color: #111;
		background-color: white;
		border-radius: 25px;
		cursor: pointer;
		z-index: 100;
		a {
			text-decoration: none;
			font-weight: bold;
			color: #111;
			transition: ease all 0.3s;
			&:hover {
				color: #ef5350;
				text-decoration: underline;
			}
		}
		span {
			display: inline-block;
			transition: ease all 0.3s;
			color: #ef5350;
			&:hover {
				transform: scale(1.2);
			}
		}
	}
	
	
	/* Section 2 */
	#section2{
		width: 100vw;
		height: auto;
		top: 100vh;
		position: absolute;
	}
	
	.options{
		width: 100vw;
		margin: 0;
	}
	
	.headerBox{
		text-align: center;
		color: white;
		margin-bottom: 10px;
	}
	
	.portfolioTitle{
		font-size: 2em;
	}
	
	.portfolioDesc{
		font-size: 1.2em;
	}
	
	.contentBox{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-evenly;
	}
	
	.link{
		width: 100vw;
		height: 315px;
	}

	.pic{
		width: 100vw;
		object-fit: cover;
	}
}