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;
}
/*Tailored towards the experience page itself*/
#experienceOptions{
	display: flex;
	gap: 40px;
	justify-content: center;
	align-items: center;
}
.experienceOption{
	font-size: 2.5rem;
}
.clickable{    
    background-color: #cfb97e;
    color: white;
    padding: 14px 25px;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
}
.clickable:hover {    
    background-color: #ad996a; 
    color: black;
}
.experience{
	display: flex;
	align-items: center;
	justify-content: center;
}
.experienceText{
	display: inline-block;
	width: 60%;
}	
.experienceImage{
	height: 500px;
	margin: 20px;
	border-radius: 25px;
}
/*Media queries*/
@media (max-width: 940px) {
	#aniTitle{
        margin: 0;
    }
    .experience{
        display: inline-block;
        align-items: center;
        margin-bottom: 0;
    }
    .bar{
        border: 4px solid black;
    }
}
@media (max-width: 600px){
    #aniTitle{
        font-size: 60px;
    }
    .experienceImage{
        max-width: 88%;
    }
    .clickable{
        padding: none;
        font-size: 1.5rem;
    }
}