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

@font-face {
    font-family: 'BricolageGrotesque';
    src: url('/static/fonts/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf') format('truetype');
}

body {
    font-family: 'NotoColorEmoji', sans-serif;
}

h1 {
    font-family: 'BricolageGrotesque', sans-serif;
    font-weight: bold;
    font-size: 50px;
}

h2 {
    font-family: 'BricolageGrotesque', sans-serif;
    font-weight: bold;
    font-size: 45px;
}

h3 {
    font-family: 'BricolageGrotesque', sans-serif;
    font-weight: bold;
    font-size: 40px;
}

h4 {
    font-family: 'BricolageGrotesque', sans-serif;
    font-weight: bold;
    font-size: 35px;
}

h5 {
    font-family: 'BricolageGrotesque', sans-serif;
    font-weight: bold;
    font-size: 30px;
}

h6 {
    font-family: 'BricolageGrotesque', sans-serif;
    font-weight: bold;
    font-size: 25px;
}

p {
    font-family: 'BricolageGrotesque', sans-serif;
    font-size: 20px;
}

i {
    font-family: 'BricolageGrotesque', sans-serif;
    font-size: 20px;
    font-style: italic;
}

a {
    font-family: 'BricolageGrotesque', sans-serif;
    font-size: 20px;
    text-decoration: underline;
    color: black;
}

a:hover {
    font-family: 'BricolageGrotesque', sans-serif;
    font-size: 20px;
    text-decoration: underline;
    color: rgb(75, 74, 74);
}