/* CSS Document */
/* 1. LOAD YOUR PURCHASED FONT */
@font-face {
    font-family: 'Silvano Western';
    src: url('../fonts/Silvano-Western.woff2') format('woff2'),
         url('../fonts/Silvano-Western.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 2. LAYOUT & BACKGROUND */
body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: url('../images/zapatekno_mis_nueves_background.png') no-repeat center center fixed;
    background-size: contain; /* Forces image to match window exactly */
	background-color: #2a1c12;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Silvano Western', serif;
}

.main-container {
    text-align: center;
    max-width: 1200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}








/* 5. SOCIAL ICONS */
/* Container to hold everything at the bottom */

.bottom-lockup {
    position: fixed;   /* Locks it to the screen */
    bottom: 40px;      /* Distance from the very bottom */
    left: 0;
    right: 0;          /* These two help center it horizontally */
    text-align: center;
    z-index: 10;       /* Makes sure it stays on top of the background */
}

/* Space between the icons and the website URL */
.social-links {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 25px;         /* Space between each icon */
}

.social-links img {
    width: 50px !important; 
    height: 50px !important;
    min-width: 50px !important; 
    min-height: 50px !important;
	display: block;
    transition: transform 0.2s ease;
    /* This ensures they all start with the filter applied */
}

/* Subtle hover effect */
.social-links a:hover img {
    transform: scale(1.2);
}

.footer-links a {
    font-family: Silvano Western, sans-serif; /* Or your Silvano font */
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgb(42, 28, 18);
    text-decoration: none;
    opacity: 0.8;
}

.icon-color {
    /* Targets your font color #2a1c12 (rgb 42, 28, 18) */
    filter: brightness(0) saturate(100%) invert(10%) sepia(21%) saturate(1219%) hue-rotate(338deg) brightness(97%) contrast(92%);
}

.footer-links a:hover {
    opacity: 1;
}