* 							{ box-sizing: border-box; }
a 							{ color: #000; text-decoration: underline; }
a:hover 					{ color: #000; text-decoration: underline; }
img 						{ display: block; border: none; }

body 						{ margin: 0; padding: 0; }

/* TYPOGRAPHY */

body 						{ font-family: Helvetica, Arial, sans-serif; font-weight: 400;  }

#intro 						{ font-size: 7.5vw; }
#projects 					{ font-size: 5.0vw; line-height: 1.4em; }
#contact					{ font-size: 5.0vw; line-height: 1.0em; }
#footer 					{ font-size: 15px; line-height: 1.0em; }

/* STRUCTURE */

#intro 						{ z-index: 200; }
header 						{ z-index: 300 !important; }
#projects 					{ z-index: 400 !important; }
#contact 					{ z-index: 400 !important; }
footer 						{ z-index: 400 !important; }
#extra 						{ z-index: -10 !important; }

/* HEADER */

header 						{ width: 100%; height: auto; margin: 0; padding: 7.5vw; position: fixed; top: 0; left: 0; }
.logo 						{ width: auto; height: 14.25vw; margin-right: auto; }

/* INTRO */

#intro 						{ width: 100%; height: auto; margin: 0; padding: 35vw 7.5vw 7.5vw 7.5vw; position: relative; background-color: #FFF; }
#intro p:first-child 		{ margin-top: 0; }
#intro p:last-child 		{ margin-bottom: 0; }

/* PROJECTS */

#projects 					{ width: 100%; height: auto; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; background-color: #FFF; }
.project 					{ width: 100%; height: auto; margin: 0; padding: 7.5vw; position: sticky; top: 0; display: flex; flex-direction: column; gap: 7.5vw; }
.project-image 				{ position: relative; width: 100%; margin: 0; padding: 0; background-color: #000; }
.project-about 				{ position: relative; width: 100%; margin: 0; padding: 0; display: flex; align-items: flex-start; }

.project.paraiso			{ background-color: #999999; color: #000; }
.project.artificialis		{ background-color: #FF5CFF; color: #000; }
.project.mude				{ background-color: #33CC66; color: #000; }
.project.aemula				{ background-color: #4169E1; color: #000; }
.project.spherical			{ background-color: #FAFF45; color: #000; }


/* CONTACTS */

#contact 					{ width: 100%; margin: 0; padding: 15vh 0; position: relative; text-align: center;  background-color: #FFF; }

/* FOOTER */

footer 						{ width: 100%; margin: 0 0 100vh 0; padding: 0 0 50px 0; position: relative; text-align: center; background-color: #FFF; }

/* EXTRA */

#extra 						{ width: 100%; height: 100vh; background-color: #333; position: fixed; bottom: 0; left: 0; }
.vertical 					{ width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; display: flex; flex-direction: row; justify-content: space-between; }
.horizontal 				{ width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; display: flex; flex-direction: column; justify-content: space-between; }
.vertical div 				{ width: 1px; height: 100%; background-color: #666; margin: 0; padding: 0; }
.horizontal div 			{ width: 100%; height: 1px; background-color: #666; margin: 0; padding: 0; }


@media only screen and (min-width: 768px) { 

	.project 	{ top: -95vw; }

}


@media only screen and (min-width: 1024px) { 
	
/* TYPOGRAPHY */

#intro 						{ font-size: 4vw; }
#projects					{ font-size: 2vw; }
#contact					{ font-size: 3.5vw; }

	
/* REST */

header 						{ padding: 2.5vw; }
.logo 						{ height: 5.5vw; margin-right: 0; margin-left: auto; }

#intro 						{ padding: 15.5vw 7.5vw 7.5vw 7.5vw; }

.project 					{ padding: 4vw; top: 0; flex-direction: row; gap: 4vw; }
.project-image 				{ width: 50%; }
.project-about 				{ width: 50%; }

}