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

body {
    font-family: 'Trocchi', serif;
    background: #f5f2e8;
    color: #023047;
}

.form-container {
    background: #fefae0 url('/static/images/paper.png') repeat;
    border-radius: 1rem;
    box-shadow: 0 33px 45px rgba(0, 0, 0, 0.3),
                0 0 10px rgba(255, 183, 3, 0.2);
    padding: 2rem;
    max-width: 800px;
    margin: 2rem auto;
    backdrop-filter: blur(3px);
}

h1, h2, h3, .fancy-header {
    font-family: 'Magical Brains', cursive;
    color: #023047;
}

/* Default strong is navy */
strong {
    color: #023047;
    font-weight: bold;
}

/* Custom strong color: orange */
strong.orange,
strong.strong-orange {
    color: #fb8500;
}

/* If you use <strong class="strong-navy">, can ensure consistent override */
strong.strong-navy {
    color: #023047;
}