/* 1. Define the Font Locally */
@font-face {
    font-family: 'Diavlo';
    /* WOFF2 is the gold standard for modern web & mobile */
    src: url('/assets/fonts/woff2/Diavlo_BOLD_II_37.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    /* Important: Shows fallback text immediately if font loads slowly on mobile */
    font-display: swap; 
}

/* 1. Global Reset and Layout */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

body {
    background-color: #ffffff; /* White background */
    display: flex;             /* Use Flexbox */
    justify-content: center;   /* Center Horizontally */
    align-items: center;       /* Center Vertically */
}

/* 2. Text Styling */
.centered-text {
    /* 'Diavlo' is the family name defined by the CDN */
    font-family: 'Diavlo', sans-serif; 
    font-weight: 700;          /* 700 triggers the Bold variant */
    font-size: 100px;
    color: black;
    margin: 0;
    text-align: center;
}
.footer-text {
    position: absolute;        /* Sticks element to specific coordinate */
    bottom: 20px;              /* 20px from the bottom */
    width: 100%;               /* Spans full width */
    text-align: center;        /* Centers text inside the footer */
    font-family: sans-serif;   /* Standard font for legibility at small sizes */
    font-size: 11px;           /* Very small size */
    color: black;
}