* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Caveat', cursive;
    color: #000000; /* Black text for the white background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('bg.avif'); /* specify the image */
    background-size: cover;    /* keep it as cover */
    background-repeat: no-repeat; 
    background-attachment: fixed;  /* optional, keep buildings pinned relative to screen */
background-position: center calc(100% - 140px);
}

/* Header - No background */
header {
    margin: 24px 24px 0 24px;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-group { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.brand-text { 
    font-size: 2rem; 
    font-weight: 700; 
    letter-spacing: -0.5px;
}

.brand-logo { 
    height: 32px; 
    width: auto; 
    display: block; 
    /* Inverts your white logo to black so it's visible on the white bg */
    filter: invert(1); 
}

.social-icons a {
    color: #000000; /* Black icons */
    font-size: 1.2rem;
    margin-left: 20px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.social-icons a:hover { 
    opacity: 0.5; 
}

/* Main Content */
main {
    margin: 24px 24px auto 24px;
    padding: 20px 40px 80px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main h1 { 
    font-size: 3rem; 
    font-weight: 700; 
    margin-bottom: 40px; 
    line-height: 1.2; 
    max-width: 800px;
}

.links-container { 
    display: flex; 
    gap: 20px; 
    flex-wrap: wrap; 
    justify-content: center; 
}

/* Updated Sketchy Button Styles */
.example-link {
    display: inline-block;
    background: transparent; 
    color: #000000; 
    text-decoration: none;
    padding: 14px 30px; 
    font-weight: 500;
    
    /* The Sketchy Border Effect */
    border: 2px solid #000000; 
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; 
    
    transition: all 0.3s ease;
}

.example-link:hover {
    background: #000000; 
    color: #ffffff; 
    
    /* Shifts the "sketch" shape slightly on hover for a cool animated drawn effect */
    border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px; 
    transform: translateY(-3px) rotate(-1deg); /* Added a tiny tilt */
}

/* Footer remains solid black for contrast at the bottom */
footer { 
    background: #000000; 
    margin-top: 48px; 
    padding: 40px 20px; 
    text-align: center; 
}

.contact-info { 
    font-size: 1rem; 
    font-weight: 300; 
    color: #cccccc; 
}

.contact-info p { 
    margin: 8px 0; 
}

/* Responsive adjustments */
@media (max-width: 768px) {
    main h1 { font-size: 2rem; }
    .links-container { flex-direction: column; width: 100%; }
    .example-link { width: 100%; }
    header { flex-direction: column; gap: 16px; }
    .social-icons a { margin: 0 10px; }
}