/* Shared font styles for advent calendar pages */

@font-face {
    font-family: 'Christmas';
    src: url('font/ASnow_for_Santa.ttf') format('truetype');
    /* src: url('Snow_for_Santa.ttf') format('truetype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Common styles for h1 and h2 */
h1, h2 {
    margin-bottom: 1rem;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
    color: #2261ac;
     /* Multiple white text-shadows to fill transparent parts */
     text-shadow: 
     0 0 0 white,
     1px 0 0 white,
     -1px 0 0 white,
     0 1px 0 white,
     0 -1px 0 white,
     1px 1px 0 white,
     -1px -1px 0 white,
     1px -1px 0 white,
     -1px 1px 0 white,
     2px 0 0 white,
     -2px 0 0 white,
     0 2px 0 white,
     0 -2px 0 white,
     2px 2px 0 white,
     -2px -2px 0 white,
     2px -2px 0 white,
     -2px 2px 0 white,
     3px 0 0 white,
     -3px 0 0 white,
     0 3px 0 white,
     0 -3px 0 white,
     3px 3px 0 white,
     -3px -3px 0 white,
     3px -3px 0 white,
     -3px 3px 0 white,
     4px 0 0 white,
     -4px 0 0 white,
     0 4px 0 white,
     0 -4px 0 white,
     2px 2px 4px rgba(0, 0, 0, 0.3);
}

h1 {
    font-size: 3.5rem;
    margin-top: 0;
    text-align: center;
}

h2 {
    font-size: 2rem;
}

@media (max-width: 768px) {
    h1, h2 {
        letter-spacing: 1px;
    }
    
    h1 {
        font-size: 3.5rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    h1, h2 {
        letter-spacing: 0.5px;
        margin-bottom: 0.75rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
}