@font-face {
    font-family: 'Atelia';
    src: url('fonts/atelia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Space-Grotesk';
    src: url('fonts/space-grotesk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
 
body {
	font-family: "Space-Grotesk", sans-serif;
	font-weight: 500;
	font-style: normal;
	background-color: white;
	color: black;
	font-size: 1.45rem;
}
a {color: #6d21c2;}
a:hover {color: black;}

h1 {font-family: 'Atelia'; font-size: 4rem;}
h2 {font-family: 'Atelia'; font-size: 2.5rem; color: #6d21c2;}
h3 {font-family: 'Atelia'; font-size: 2.0rem;}

.bgr-yellow {background-color: #f6ce46;}

header .header-logo {background-color: white;}
header .header-menu {background-color: #6d21c2; font-weight: bold;}
header .header-menu .navbar {color: #fff !important; background-color: #6d21c2 !important;}
header .header-menu .navbar .nav-link {color: #fdf6e2;}
header .header-menu .navbar .nav-link:hover {color: #6d21c2; background-color: #f6ce46;}
header .header-menu .navbar .nav-link.active {background-color: black;}
header .header-menu .navbar .nav-link.active:hover {background-color: #f6ce46;}

main {background-color: white;}
main .slogan {padding: 5rem; margin-bottom: 2rem;}

footer {color: #6d21c2; background-color: #fdf6e2; font-size: 70%;}
footer a {color: #6d21c2;}
footer a:hover {color: black;}
footer .footer-logo {max-height: 60px;}