/*The default layout of the page (header and animated title)*/
html, body, header{ /*Fill the white gaps and keep things centered*/
	margin: 0;
	padding: 0;
	text-align: center;
}
#navigation{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
	background: #cfb97e;
}
.navLink{
	font-family: "Bitcount Grid Single", system-ui;
	color: black;
}
.navLink:hover{
	color: white;
}
#aniTitle{
	font-size: 70px;
	font-family: "Bitcount Grid Single", system-ui;
	margin: 35px;
	animation: fadeIn 2s 1;
}
/*The actual home page code*/
#randomPhoto{
	height: 500px;
	border-radius: 25px;
}
#homepageContent{
	display: inline-block;
	animation: fadeIn 2s 1;
}
#homepageText{
	max-width: 60%;
	min-width: 45%;
	display: inline-block;	
	margin: 0;
	position: relative; /*CHANGE THIS ON MEDIA QUERY*/
	bottom: 150px;
}
@keyframes fadeIn {
	0%{opacity: 0;}
	25%{opacity: 0.25;}
	50%{opacity: 0.5;}
	75%{opacity: 0.75;}
	100%{opacity: 1;}
}
/*Media queries*/
@media (max-width: 940px) {
    #homepageText{
        position: relative;
        top: 0px;
        flex-direction: column-reverse;
    }
    #aniTitle{
        margin: 0;
    }
}
@media (min-width: 1201px) {
    #homepageText{
        left: 30px;
    }
}
@media (max-width: 600px){
	#randomPhoto{
		max-width: 100%;
	}
}