@font-face {
	font-family: 'cookie-monster';
	src: url('../fonts/Cookiemonster/Cookiemonster-gv11.ttf') format('truetype');
}

@font-face {
	font-family: 'messy-handwritten';
	src: url('../fonts/MessyHandwritten/MessyHandwritten-Regular.ttf') format('truetype');
}

html {
	font-family: simsun, messy-handwritten, cookie-monster, serif; 
	scroll-behavior: smooth; 
}

div {
	display: flex; 
	flex-direction: column;
	align-items: center; 
	justify-content: center;
}

h1 {
	font-size: 3vw; 
	margin: 4vh; 
}

h2 {
	font-size: 2vw; 
	margin: 3rem;
}

h3 {
	font-size: 1.5vw; 
	margin: 2vh; 
}

p {
	font-size: 1rem;
	text-align: center; 
	margin: 0; 
}

span {
	font-size: 0.9vw; 
	font-style: italic; 
	margin-bottom: 1vh;
}

.section-link {
	margin: 3rem;
	color: #808A91;
	text-shadow: 0 0 5px #F6F7F1, 0 0 10px #F6F7F1;
	font-size: 1.5vw; 
}

#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #D1D682;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	overflow: hidden; 
}

.spinner {
	width: 10vw;
	animation: spin 2s linear infinite;
}
  
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

#main-content {
	display: none; 
}

header {
	width: 100%;
	height: 100vh;
	box-sizing: border-box; 
	background-image: url('imgs/decor/Fondo\ Spring\ Butterfly\ Gorjuss.jpg');
	background-size: cover; 
	background-position: center;
	display: flex; 
	align-items: center; 
	justify-content: center;
	position: relative; 
}

nav {
	position: absolute; 
	top: 0; 
	display: flex; 
}

nav > a {
	margin: 5% 5%;
}

header > div {
	position: relative; 
	text-align: center; 
	width: 43%;
	aspect-ratio: 4 / 3; 
	z-index: 1; 
}

#border {
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 120%;
	height: auto;
	opacity: 0.9; 
}

header > div > div {
	position: absolute; 
	top: 35%; 
	right: 20%;
	text-align: center; 
	transform: rotate(-3deg); 
	z-index: 2; 
	width: 60%;
	height: 45%;
	/* border: 1px solid black;  */
}

header > div > div > p {
	font-size: min(15vh, 4vw); 
	margin: 5% 0; 
	color: #272321;
	font-weight: bold; 
	text-align: center; 
	text-shadow: 0 0 5px #5A422A, 0 0 10px #AE7877;
}

#name {
	color: #423B35;
	font-family: messy-handwritten, cookie-monster, simsun, serif; 
	text-shadow: 0 0 5px #5A422A, 0 0 20px #9CA364;
}

#clip {
	top: 0; 
	right: 0; 
	height: 60%; 
	width: auto; 
}

#yellowflower {
	width: 30%; 
	top: 0;
	left: 0;
}

#blueflower {
	width: 40%;
	bottom: -10%;
	right: -10%;
}

header > a {
	position: absolute; 
	bottom: -4%; 
	box-sizing: border-box; 
	width: 4%; 
	aspect-ratio: 1 / 1; 
	background-image: url('imgs/decor/butterfly.png');
	background-size: contain; 
	background-position: center; 
	background-repeat: no-repeat; 
	z-index: 1; 
	border-radius: 50%;
	box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3), inset 0 0 10px 10px rgba(255, 255, 255, 0.3);
	/* border: 1px solid black;  */
}

header, #info, .project-group, .project-div {
	border-radius: 5%; 
	box-shadow: inset 0 0 10px 15px #F6F7F1; 
}

header, #info {
	box-shadow: inset 0 0 10px 15px #f6f7f1, 0 0 10px 15px #F6F7F1;
	box-sizing: border-box; 
}

#info {
	background-image: linear-gradient(to bottom, rgba(246, 247, 241, 0.8), rgba(246, 252475, 241, 0.4), rgba(246, 252475, 241, 0.3)), url('imgs/decor/quilt.jpg');
	background-size: 30%;
	background-position: center; 
	padding: 4%;
	/* text-shadow:  0 0 5px #F6F7F1,
	0 0 6px #F6F7F1,
	0 0 7px #F6F7F1, 
	0 0 8px #F6F7F1,
	0 0 9px #F6F7F1, 
	0 0 10px #F6F7F1, 
	0 0 11px #F6F7F1,
	0 0 12px #F6F7F1, 
	0 0 13px #F6F7F1,
	0 0 14px #F6F7F1, 
	0 0 15px #F6F7F1, 
	0 0 20px #F6F7F1,
	0 0 25px #F6F7F1, 
	0 0 30px #F6F7F1, 
	0 0 35px #F6F7F1,
	0 0 40px #F6F7F1, 
	0 0 45px #F6F7F1,
	0 0 50px #F6F7F1, 
	0 0 60px #F6F7F1;   */

}

#about {
	width: 60%; 
	position: relative; 
}

#about > p {
	font-size: 1.5rem;
}

.contact-container {
	flex-direction: row; 
	margin: 1rem;
	height: 4rem; 
}

.contact-div {
	height: 100%; 
	width: auto; 
	padding: 5%; 
	box-sizing: border-box; 
	display: flex; 
	align-items: center; 
}

.contact-container a {
	height: 100%; 
	border-radius: 50%;
}

.contact-container a:hover {
	background-color: #F6F7F1; 
	box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3), inset 0 0 10px 10px rgba(255, 255, 255, 0.3);
}

.contact-container picture, .contact-container img {
	height: 100%; 
	width: auto; 
}

#projects {
	width: 100%; 
	text-align: center; 
}

#personal {
	background-image: url('imgs/decor/plaid.jpg');
	background-size: 50%;
}

#class {
	background-image: url('imgs/decor/polkadots.jpg');
	background-size: 50%;
}

.project-group {
	width: 85%; 
	margin: 2%; 
	position: relative; 
}

.project-container {
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	grid-auto-rows: auto;
	justify-items: center;
	align-items: stretch;
	margin: 0 4rem 3rem; 
}

.project-div {
	background-color: #F6F7F1; 
	padding: 2rem; 
	width: 65%;
	margin-bottom: 3rem;
	position: relative; 
	background: linear-gradient(180deg, rgba(245, 251, 253, 0.7) 0%, rgba(201, 230, 248, 0.9) 100%);
    box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3), 
		inset 0px 4px 1px rgba(255, 255, 255, 0.3), 
		inset 0px -4px 1px rgba(0, 0, 0, 0.4);
}

.project-link, .project-img {
	width: 100%;
	border-radius: 5%;
}

.project-container img {
	width: 100%; 
	height: 100%;
	object-fit: cover;
	box-sizing: border-box;
	border-radius: inherit;
	box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3), 
		inset 0px 4px 1px rgba(255, 255, 255, 0.3), 
		inset 0px -4px 1px rgba(0, 0, 0, 0.4);
}

.project-link img:hover {
	cursor: pointer; 
	opacity: 0.7;
	box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3), 
		inset 0px 4px 1px rgba(255, 255, 255, 0.3), 
		inset 0px -4px 1px rgba(0, 0, 0, 0.4);
}

#contact {
	height: 10vh; 
}

#mametchi {
	width: 15%;
	height: auto; 
	top: 0;
	right: 0; 
	transform: translateY(-100%) scaleX(-1);
	box-shadow: none;
}

picture {
	display: content; 
}

.decal {
	position: absolute; 
	opacity: 0.8; 
	width: 100%; 
}

.decal-div {
	position: absolute; 
	aspect-ratio: 1 / 1; 
}

.decal-div picture {
	width: 100%; 
	height: 100%; 
	text-align: start; 
}

.decal-div p {
	position: absolute; 
}

#heart {
	width: 17%;
	left: -20%;
	top: 30%; 
	rotate: -10deg;
}

#strawberry {
	top: 0; 
	left: -15%; 
	width: 30%;
	rotate: -15deg;
	z-index: 1; 
}