/* 1. Basic Reset */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Stops scrolling */
}

/* 2. The Main Background and Flexbox Centering */
body {
    /* Path to your green leather background with the empty circle */
    background: #000 url('green-leather.png') no-repeat center center fixed;
    background-size: cover; /* This makes the background fill the screen */
    
    /* Flexbox magic: This centers everything perfectly */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 3. The Clickable Emblem Container */
.emblem-container {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.5s ease;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.7)); /* Depth shadow */
}

/* 4. Precision Fit the Emblem Image */
.emblem-image {
    /* ------------------------------------------------------------------------- */
    /* THIS IS THE KEY! */
    /* Adjust this number (e.g., 40vh, 45vh) until the emblem fits the circle. */
    /* We are basing the size on the vertical height of the screen.           */
    /* ------------------------------------------------------------------------- */
    height: 42vh; 
    
    width: auto; /* Keeps the emblem from distorting */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 5. Hover and Active Effects */
.emblem-container:hover {
    filter: drop-shadow(0 0 45px rgba(184, 115, 51, 0.4)); /* Copper glow on hover */
}

.emblem-container:hover .emblem-image {
    transform: scale(1.05); /* Slight grow on hover */
}

.emblem-container:active .emblem-image {
    transform: scale(0.97); /* Slight shrink on click */
}